⑧ vue+echarts实现热词分析
1 依赖
"dependencies": {
"echarts": "^4.0.4",
"echarts-wordcloud": "^1.1.3",
},
tip:
echarts-wordcloud
现在有 2.0 和 1.x 两个版本,2.0 对应echarts
5.x 版本
2 效果
3 实现
3.1 html
<template>
<div>
<div class="chart" ref="chartWordCloud"></div>
</div>
</template>
<style scoped>
.chart {
width: 100%;
height: 600px;
}
</style>
3.2 js
<script>
import { ref } from 'vue'
import echarts from 'echarts'
require('echarts-wordcloud')
import hotWordsData from '../data/hotWords'
const chartEffect = () => {
// 处理数据
const originData = hotWordsData.data.map(item => ({
name: item.name,
value: item.heat
}))
// 随机生成颜色
const randomColor = () => {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(',') + ')'
}
return { originData, randomColor }
}
export default {
name: 'hotWords',
mounted() {
const chart = echarts.init(this.$refs.chartWordCloud)
chart.setOption({
series: [{
type: 'wordCloud',
shape: 'circle',
left: 'center',
top: 'center',
right: null,
bottom: null,
width: '100%',
height: '100%',
sizeRange: [10, 80],
rotationRange: [-90, 90],
rotationStep: 45,
gridSize: 8,
drawOutOfBound: false, // 超出画布部分不显示,与sizeRange相关
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'normal'
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: this.data
}]
})
},
setup() {
const { originData, randomColor } = chartEffect()
const data = ref(originData.map(val => ({
...val,
textStyle: {
normal: {
color: randomColor()
}
}
})))
return { data }
},
}
</script>
3.3 配置参数说明
shape
- 要绘制的“云”的形状
- 可用的参数有circle(默认)、cardioid(心形曲线,最著名的极坐标方程)、diamond (square的别名)、triangle-forward、triangle(triangle- standing、pentagon和star的别名
sizeRange
- 映射到的文本大小范围
rotationRange & rotationStep
- 文字旋转范围和步进程度
文本将通过
rotationStep 45
在[-90,90]
范围内随机旋转
gridSize
- 网格的像素大小,用于标记画布的可用性
网格尺寸越大,单词之间的间距就越大
4 数据
{
"detail": "微博热搜关键词",
"data": [
{ "name": "世界杯", "rank": 1.0, "heat": 185, "count": 1 },
{ "name": "直播间", "rank": 1.0, "heat": 100, "count": 1 },
{ "name": "377面霜", "rank": 1.0, "heat": 66, "count": 1 },
{ "name": "李佳琪", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "捡漏", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "377精华", "rank": 1.0, "heat": 66, "count": 1 },
{ "name": "广州疫情", "rank": 1.0, "heat": 165, "count": 1 },
{ "name": "海珠疫情", "rank": 1.0, "heat": 155, "count": 1 },
{ "name": "疫情", "rank": 1.0, "heat": 225, "count": 1 },
{ "name": "城中村", "rank": 1.0, "heat": 85, "count": 1 },
{ "name": "石家庄", "rank": 1.0, "heat": 105, "count": 1 },
{ "name": "摆烂政策", "rank": 1.0, "heat": 105, "count": 1 },
{ "name": "大学生", "rank": 1.0, "heat": 95, "count": 1 },
{ "name": "阿根廷vs沙特阿拉伯", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "梅西世界杯首秀", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "广州新增本土感染者8210例", "rank": 1.0, "heat": 85, "count": 1 },
{ "name": "成都疫情防控", "rank": 1.0, "heat": 65, "count": 1 },
{ "name": "今晚看梅西阿根廷", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "美国vs威尔士", "rank": 1.0, "heat": 55, "count": 1 },
{ "name": "中国男足", "rank": 1.0, "heat": 55, "count": 1 }
]
}