云南住房与建设厅网站,个人做百度云下载网站,宣传网页设计,网站新闻怎么写先上官网
词云图有些特殊#xff0c;它属于Echarts 的扩展#xff0c;需要额外安装Echarts-wordcloud包。 Echarts 官网 Echarts-wordcloud 词云图官网 先安装
npm install echarts
npm install echarts-wordcloud再引入 echarts选一个引入就行#xff1b;4或5版本都可以 …先上官网
词云图有些特殊它属于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);})注如果运行时发现词云图无法显示但又没有报错看看是否给容器设置了高度不要设置 100%设置固定高度 有问题的词云图 注如果文字颜色是单一色彩代表textStyle代码配置没生效把textStyle下的normal对 象括号去掉就行 正常的词云图
字体颜色不同
