【實例簡介】

【實例截圖】

【核心代碼】

kforce

require.config({

packages:[{

name:'echarts',

location:'./echarts/src',

main:'echarts'

},{

name:'zrender',

location:'./zrender/src',

main:'zrender'

}]

});

var option = {

title : {

text: '人物關(guān)系：喬布斯',

subtext: '數(shù)據(jù)來自人立方',

x:'right',

y:'bottom'

},

tooltip : {

trigger: 'item',

formatter: '{a} : {b}'

},

legend: {

x: 'left',

selected:{'朋友':true,'家人':true},

data:['家人','朋友']

},

isShowScrollBar:false,

series: [

{

type:'kforce',

categories : [

{

name: '人物',

itemStyle: {

normal: {

color : '#ff7f50'

}

}

},

{

name: '家人',

itemStyle: {

normal: {

color : '#ff7f50'

}

}

},

{

name:'朋友',

itemStyle: {

normal: {

color : '#87cdfa'

}

}

}

],

itemStyle: {

normal: {

label: {

show: true,

textStyle: {

color: '#000000'

}

},

nodeStyle : {

brushType : 'both',

strokeColor : 'rgba(255,215,0,0.4)',

lineWidth : 2

}

},emphasis:{

linkStyle : { strokeColor : '#5182AB'}

}

},

minRadius : 15,

maxRadius : 25,

density : 0.8,

attractiveness: 0.8,

nodes:[

{category:0, name: '喬布斯', value : 10,shapeType:'rectangle',onclick:function(params){

alert(params.target.style.text);

params.target.style.text = "雷布斯";

},

itemStyle:{

normal:{

width:100,

height:80

}

}},

{category:1, name: '麗薩-喬布斯',value : 2,shapeType:'ellipse',

itemStyle:{

normal:{

a:40,

b:20

}

}},

{category:1, name: '保羅-喬布斯',value : 3},

{category:1, name: '克拉拉-喬布斯',value : 3},

{category:1, name: '勞倫-鮑威爾',value : 7},

{category:2, name: '史蒂夫-沃茲尼艾克',value : 5},

{category:2, name: '奧巴馬',value : 8,shapeType:'rectangle'},

{category:2, name: '比爾-蓋茨',value : 9},

{category:2, name: '喬納森-艾夫',value : 4},

{category:2, name: '蒂姆-庫克',value : 4},

{category:2, name: '龍-韋恩',value : 1},

],

links : [

{source : 1, target : 0, weight : 1,

onclick:function(params){

alert(params.target.style.text);

},

itemStyle:{

normal:{

lineWidth:10,

text:'麗薩-喬布斯',

textColor:'#030303',

textFont:'bold 15px verdana',

textPosition:'inside'

}

}},

{source : 2, target : 0, weight : 2},

{source : 3, target : 0, weight : 1},

{source : 4, target : 0, weight : 2},

{source : 5, target : 0, weight : 3},

{source : 6, target : 0, weight : 6},

{source : 7, target : 0, weight : 6},

{source : 8, target : 0, weight : 1},

{source : 9, target : 0, weight : 1},

{source : 10, target : 0, weight : 1}

]

}

]

};

require(

[

'echarts',

'echarts/chart/kforce',

],

function(ec) {

var myChart = ec.init(document.getElementById('demo1'));

myChart.setOption(option);

}

)

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的echart 图谱_zrend echart 展示家庭图谱示例代码(类思维导图)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。