echarts 文字標籤雲圖實現方法

加載ECHART相關JS

var myChart = echarts.init(document.getElementById('ChartOwnFansTag')); 

var option = {

series : [

{

                                                type:'force',

name : "Force tree",

ribbonType: false,

itemStyle: {

normal: {

label: {

show: true,

rotate:false,

textStyle:{ color:'#ffffff',fontSize:12}

},

nodeStyle : {

color:'rgba(0,0,0,0)',//這裏是隱藏圓圈

brushType : 'both',

borderWidth : 0

},

linkStyle: {

type: 'line',

strokeColor: 'rgba(0,0,0,0)'//這裏是隱藏鏈接線

}

}

},

minRadius : 5,

maxRadius : 20,

coolDown: 0.995,

nodes : [

{id: 0, name:'adidas', value:3, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[9],fontSize:24}}}}},//這裏根據數據量設置【value/圓大小】【color/字顏色】【fontSize/字大小】

{id: 1, name:'品牌', value:2.5, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[8],fontSize:22}}}}},

{id: 2, name:'代言人', value:2, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[7],fontSize:20}}}}},

{id: 3, name:'熱話題', value:1.5, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[5],fontSize:14}}}}},

{id: 4, name:'印象', value:1, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[3],fontSize:12}}}}},

{id: 5, name:'公益', value:.5, itemStyle: {normal: {label: {textStyle:{ color:Rgba.white[2],fontSize:6}}}}}

],

links: [

                                                        //這裏注意，source必須所有爲0（及上面最大值的ID），這樣就實現一圈小圓圍着中間一個圓的效果

{source: 0, target: 1},

{source: 0, target: 2},

{source: 0, target: 3},

{source: 0, target: 4},

{source: 0, target: 5}

]

}

]

};

// 爲echarts對象加載數據 

myChart.setOption(option); 

最終效果