vue-echarts-wordcloud词云

本文主要是介绍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()
      },

这篇关于vue-echarts-wordcloud词云的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！