echarts 文字标签云图实现方法

摘要: 做了个项目，用的百度的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);

最终效果