⑧ 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'
import '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 }
  ]
}