当前位置：首页 > news >正文

vue使用Echarts5实现词云图

news 2025/8/8 17:05:42

先上官网

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

先安装

npm install echarts
npm install echarts-wordcloud

再引入

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

> import Echarts from 'echarts' //echarts4版本 引入
> import * as echarts from 'echarts'  //echarts5版本 引入
> import 'echarts-wordcloud’

//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);})