创新实训博客（21）——Vue中使用ECharts进行数据可视化（进阶部分）

引入词云

[code]    init_top_tag_cloud() {
var that = this
getTagBrowsingCountRecently().then(response => {
const { data } = response
var list = []
for (var i in data) {
list.push({ 'name': data[i].name, 'value': data[i].count })
}
var option = {
title: {
text: '热门标签'
},
tooltip: {
show: true
},
series: [{
type: 'wordCloud',
gridSize: 1,
shape: 'rectangle',
sizeRange: [20, 60],
width: 411,
height: 350,
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: list
}]
}
that.top_tag_cloud.setOption(option)
})
},

时间线功能

动态数据图表

多个图表级联

1. 首先初始化图表

2. 为每个图表设置相应的参数

3. 使用echarts自带的级联功能

4. 然后就可以在两个完成级联的图表上，鼠标移动到一个上，在另一个的对应位置也会同时显示信息

词云显示效果