[JavaScript知识库]vue-echarts-wordcloud词云

一，注意事项
在vue中引入echarts-wordcloud依赖，发觉无法正常显示，后经过查找相关资料，发觉是版本问题，echarts-wordcloud 2 对应的是echarts5, echarts-wordcloud 1对应的是echarts 4

二， 步骤

1 安装 npm

npm install echarts
npm install echarts-wordcloud

2 导入

  import * as echarts from 'echarts'
  import 'echarts-wordcloud';

3

  <div ref="wordCloudChart" style="width: 100%; height: 180px"/>
	
   wordCloudChart: undefined,

   // 初始化 echarts
   this.$nextTick(() => {
    	this.initCharts();
    	this.setTasteAndToppingPreference();
        });
	
	//初始化视图
   initCharts() {
        this.wordCloudChart = echarts.init(this.$refs.wordCloudChart)
        this.__resizeChartHandler = debounce(() => {
          this.wordCloudChart.resize()
        }, 50)
        window.addEventListener('resize', this.__resizeChartHandler)
      },
      
	// 初始化数据
    setTasteAndToppingPreference(data) {
        this.wordCloudChart.setOption({
          tooltip: {},
          series: [{
            type: 'wordCloud',
            left: 'center',
            top: 'center',
            width: '70%',
            height: '80%',
            right: null,
            bottom: null,
            gridSize: 2,
            sizeRange: [12, 40],
            rotationRange: [-90, 90],
            shape: 'smooth',
            drawOutOfBound: true,
            textStyle: {
              color: function () {
                return randomColor({hue: '#1785ff', count: 1})[0];
                //使用 randomColor.js 获取蓝色的相近色
              }
            },
            data: data
          }]
        })
        this.wordCloudChart.resize()
      },