echarts 文字标签云图实现方法

2019独角兽企业重金招聘Python工程师标准>>>

加载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); 

最终效果

转载于:https://my.oschina.net/u/2287567/blog/354335