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对

象括号去掉就行


正常的词云图

字体颜色不同

相关推荐
haaaaaaarry37 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.2 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木3 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github