牛骨文教育服务平台(让学习变的简单)
博文笔记

echarts如何实现热词图

创建时间:2018-10-26 投稿人: 浏览次数:2014

热词图,看着要实现很难的样子,但实际并没有多么复杂,只需要将词云的js文件引入即可;其他的和饼图、柱形图相差无几,就多了两个词云的引入文件。

以下是词云的引入文件名称,没有的小伙伴可以自行网络下载一下即可

在这里插入图片描述

热词图实现代码,小伙伴们可以参考一下,有不同意见可以互相借鉴一下
var z1_option = {
title : {
text: ‘热词图’
},
series: [{
type: ‘wordCloud’,
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: ‘pentagon’,
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’
}
},
data: [{
name: ‘Sam S Club’,
value: 10000,
}, {
name: ‘Macys’,
value: 6181
}, {
name: ‘Amy Schumer’,
value: 4386
}, {
name: ‘Jurassic World’,
value: 4055
}, {
name: ‘Charter Communications’,
value: 2467
}, {
name: ‘Chick Fil A’,
value: 2244
}, {
name: ‘Planet Fitness’,
value: 1898
}, {
name: ‘Pitch Perfect’,
value: 1484
}, {
name: ‘Express’,
value: 1112
}, {
name: ‘Home’,
value: 965
}, {
name: ‘Johnny Depp’,
value: 847
}, {
name: ‘Lena Dunham’,
value: 582
}, {
name: ‘Lewis Hamilton’,
value: 555
}, {
name: ‘KXAN’,
value: 550
}, {
name: ‘Mary Ellen Mark’,
value: 462
}, {
name: ‘Farrah Abraham’,
value: 366
}, {
name: ‘Rita Ora’,
value: 360
}, {
name: ‘Serena Williams’,
value: 282
}, {
name: ‘NCAA baseball tournament’,
value: 273
}, {
name: ‘Point Break’,
value: 265
}]
}]
};
//初始化
document.getElementById(‘hot_word_chart’).removeAttribute(“echarts_instance”);
var myChart1 = echarts.init(document.getElementById(‘hot_word_chart’), “macarons”);
myChart1.setOption(z1_option);

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。