echarts的词云图表类型有哪些_echarts之词云图

获取后端数据

getChartCloud() {

this.$http({

method: "post",

url: "/api/getCloud"

})

.then(response => {

this.arrCloud = response.data;

this.drawMyCloud();

})

.catch(function(error) {

console.log(error);

});

},

画词云图

drawMyCloud() {

let option = {

toolbox: {

feature: {

saveAsImage: {}

}

},

series: [

{

type: "wordCloud",

//调整词之间的距离

gridSize: 20,

//用来调整字的大小范围

sizeRange: [12, 50],

//用来调整词的旋转方向，，[0,0]代表着没有角度，也就是词为水平方向需要设置角度参考注释内容

// rotationRange: [-45, 0, 45, 90],

// rotationRange: [ 0,90],

rotationRange: [-60, 60],

shape: "pentagon",

//词云图中的数据

data: this.arrCloud,

//随机生成字体颜色

textStyle: {

normal: {

color: function() {

return (

"rgb(" +

[

Math.round(Math.random() * 160),

Math.round(Math.random() * 160),

Math.round(Math.random() * 160)

].join(",") +

")"

);

}

},

emphasis: {

shadowBlur: 10,

shadowColor: "#333"

}

}

}

]

};

this.cloud.setOption(option);

},

效果图

点赞

收藏

分享

文章举报

starlsy

发布了13 篇原创文章 · 获赞 0 · 访问量 476

私信

关注