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对

象括号去掉就行


正常的词云图

字体颜色不同

相关推荐
AI视觉网奇12 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems12312 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡15 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh15 小时前
less和sass
前端·less·sass
Nan_Shu_61416 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel17 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登17 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞18 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始18 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible18 小时前
带有渐变光晕
前端·javascript·css