echart 词云 避坑

let myWordCloudChart = this.$echarts.init(
          document.getElementById("xxx")
        );
        let option = {
          title: {
            text: '',
            x: 'center'
          },
          backgroundColor: '',
          //浮窗
          tooltip: {
            trigger: 'item',
            padding: [10, 15],
            textStyle: {
              fontSize: 18
            },
            formatter: params => {
              const { name, value } = params
              return `
              种类：${name} <br/>
              数量：${value}`
            }
          },

          series: [
            {
              type: 'wordCloud',
              shape: 'circle',
              drawOutOfBound: false,
              layoutAnimation: true,
              // 用来调整词之间的距离
              gridSize: 30,
              // 用来调整字的大小范围
              sizeRange: [15, 20],
              // 用来调整词的旋转方向，[0,0]--代表着没有角度，也就是词为水平方向，
              rotationRange: [0, 90],
              rotationRange: [0, 0],
              // 字体颜色
              textStyle: {
                normal: {
                  color: "#cfd9e0",
                  // backgroundColor: '#0c4165',
                  // borderWidth: '100px',
                },
                //鼠标经过
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: '#0c4165'
                }
              },
              label: {
                formatter: params => {
                  console.log(params)
                  // const { name, value } = params
                  // return `
                  // 种类：${name} <br/>
                  // 数量：${value}`
                },
              },
              // 位置相关设置
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              // width: '100%',
              // height: '100%',
              // 数据
              data: this.harmType,


            }
          ]
        }
        option && myWordCloudChart.setOption(option);
      

注

1、echarts4版本对应词云图wordcloud1 ----- npm install echarts-wordcloud@1
2、echarts5版本对应词云图wordcloud2 ----- npm install echarts-wordcloud@2
3、ECharts的词云图默认只会展示name属性作为词云的内容，不会同时展示name和value属性。如果想要在词云图中同时展示name和value，可以通过自定义tooltip的方式实现