vue使用Echarts5实现词云图

先上官网

词云图有些特殊,它属于Echarts 的扩展,需要额外安装Echarts-wordcloud包。
Echarts 官网
Echarts-wordcloud 词云图官网


先安装

javascript 复制代码
npm install echarts-wordcloud
npm install echarts echarts-wordcloud

再引入

echarts选一个引入就行;4或5版本都可以

javascript 复制代码
> import Echarts from 'echarts' //echarts4版本 引入
> import * as echarts from 'echarts'  //echarts5版本 引入
> import 'echarts-wordcloud'

javascript 复制代码
//vue3语法
    onMounted(()=>{
    //echarts初始化
      const chart = echarts.init(document.getElementById('main'));
      //添加resize事件,根据浏览器窗口变化,自动重置echarts图表大小
      window.addEventListener('resize', ()=>{
        chart.resize()
      })
      //词云图的数据集合
      const cityList = [
        {name: "金水区", value: "111"},
        {name: "管城区", value: "222"},
        {name: "惠济区", value: "458"},
        {name: "二七区", value: "445"},
        {name: "新郑市", value: "456"},
        {name: "荥阳市", value: "647"},
        {name: "巩义市", value: "189"},
        {name: "经开区", value: "664"},
        {name: "郑东区", value: "652"},
        {name: "航空港区", value: "732"},
        {name: "郑州市", value: "852"},
      ];
      //词云图的配置项
      const option ={
        tooltip: {
          show: true
        },
        series: [{
          name: '词云图',
          type: 'wordCloud',
          sizeRange: [10, 50],//文字范围
          //文本旋转范围,文本将通过rotationStep45在[-90,90]范围内随机旋转
          rotationRange: [-45, 90],
          rotationStep: 45,
          textRotation: [0, 45, 90, -45],
          //形状
          shape: 'circle',
          textStyle: {
          //文字色彩配置不生效的话,可以解开注释(echarts5默认注释掉),猜测是版本问题
            //normal: {
              color: function() {//文字颜色的随机色
                return 'rgb(' + [
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250)
                ].join(',') + ')';
              },
           // },
            //悬停上去的字体的阴影设置
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: cityList
        }]
      };
      //导入配置项生成词云图
      chart.setOption(option);
    })

注:如果运行时发现词云图无法显示,但又没有报错,看看是否给容器设置了高度,不要设置 100%,设置固定高度


有问题的词云图


注:如果文字颜色是单一色彩,代表textStyle代码配置没生效,把textStyle下的normal对

象括号去掉就行


正常的词云图

字体颜色不同

相关推荐
JSLove5 分钟前
常见 npm 报错问题
前端·npm
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子7 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua10 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
markyankee10110 分钟前
Vue 计算属性和侦听器详解
vue.js
嘗_26 分钟前
暑期前端训练day5
前端
uncleTom66633 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥36 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm