1、echarts5.0以下的版本使用?echarts-wordcloud 1.0 的詞云
1. 安裝 wordCloud 1.0 依賴包npm install echarts-wordcloud@12. man.js 注入import 'echarts-wordcloud'2、echarts5.0及以上的下載 echarts-wordcloud 2.0 版本
注意：npm install echarts-wordcloud 默認安裝的是 2.0 版本
具體使用：
項目中引用：
import * as echarts from 'echarts';
import 'echarts-wordcloud';echarts-wordcloud 基本配置
<div ref="word-cloud" class="flex can-class" ></div>// 這里和echarts的使用一樣，先拿到容器元素const myChart = echarts.init(this.$refs['word-cloud']);window.addEventListener('resize', function() {myChart.resize();});appProto().then(res => {if (res.data.code === 200) {// 因為UI設計規定了顏色，因此我就采用這幾個顏色座位隨機的顏色調整const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA'];var option = {backgroundColor: '#fff',series: [{type: 'wordCloud',sizeRange: [15, 70], // 用來調整字的大小范圍rotationRange: [0, 0],// 每個詞旋轉的角度范圍和旋轉的步進rotationStep: 45,gridSize: 10, // 用來調整詞之間的距離shape: 'pentagon',// shape這個屬性雖然可配置，但是在詞的數量不太多的時候，效果不明顯，它會趨向于畫一個橢圓//位置的配置width: '100%',height: '100%',drawOutOfBound: false,// 允許詞太大的時候，超出畫布的范圍layoutAnimation: true,// 布局的時候是否有動畫textStyle: {normal: {// 顏色可以用一個函數來返回字符串，這里是隨機色color: function(v) {const index = Math.floor(Math.random() * color.length);return color[index];},fontFamily: 'sans-serif',fontWeight: '550'}},//劃過添加的陰影，因為我不需要，因此注釋了<!-- emphasis: {focus: 'self',textStyle: {textShadowBlur: 10,textShadowColor: '#333'}}, -->//data格式是一個數組data: res.data.data}]};myChart.setOption(option);}});
