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);
最终效果