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,
        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
  • 要绘制的“云”的形状。任意极坐标方程都可以表示为a
    //回调函数,或者一个关键字可用的礼物有圆形(默认),
    // cardioid(苹果或心脏形状的曲线,最著名的极坐标方程),diamond (
    // square的别名)、triangle-forward、triangle, (triangle- standing、pentagon和star的别名。

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 }
  ]
}

原文地址:http://www.cnblogs.com/pleaseAnswer/p/16914691.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性