echarts词云图绘制与踩坑记录（vue）（算半原创）

由于项目需求，需要做一个词云图，然后百度了使用方法（官网示例好像没有词云图）

下面是实现的步骤和代码

安装依赖并在main中导入

npm install echarts
npm install echarts-wordcloud

import * as echarts from 'echarts' // 引入Echarts
Vue.prototype.$echarts = echarts // echarts挂载到原型

在script里面引入

import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

创建组件(记得加高度)

<template>
 <div ref="wordcloud" class="wordcloud">
 </div>
</template>

// 热词图
    myTool () {
      var chart1 = this.$echarts.init(document.getElementById('wordcloud'))
      // 绘制图表
      chart1.setOption({
        title: {
          // text: "热爱祖国",
          x: 'center'
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
        },
        series: [{
          type: 'wordCloud',
          // 用来调整词之间的距离
          gridSize: 10,
          // 用来调整字的大小范围
          // Text size range which the value in data will be mapped to.
          // Default to have minimum 12px and maximum 60px size.
          sizeRange: [14, 60],
          // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
          // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
          // rotationRange: [-45, 0, 45, 90],
          // rotationRange: [ 0,90],
          rotationRange: [0, 0],
          // 随机生成字体颜色
          textStyle: {
            normal: {
              color: function () {
                return (
                  'rgb(' +
                  Math.round(Math.random() * 255) +
                  ', ' +
                  Math.round(Math.random() * 255) +
                  ', ' +
                  Math.round(Math.random() * 255) +
                  ')'
                )
              }
            }
          },
          // 位置相关设置
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          width: '200%',
          height: '200%',
          // 数据
          data: [
            { name: '许嵩', value: 15000 },
            { name: '周杰伦', value: 16181 },
            { name: '汪苏泷', value: 4386 },
            { name: '徐良', value: 2055 },
            { name: '汪峰', value: 6467 },
            { name: '王菲', value: 6244 },
            { name: '萧敬腾', value: 6898 },
            { name: '许巍', value: 8484 },
            { name: '胡歌', value: 11112 },
            { name: '迪卡普里奥', value: 9112 },
            { name: '李小龙', value: 18112 },
            { name: '成龙', value: 14312 }
          ]
        }],
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // restore: { show: true },
            saveAsImage: {
              show: true,
              pixelRatio: 1,
              title: '保存为图片',
              type: 'png',
              lang: ['点击保存'],
              name: '数据统计图表'
            }
            // magicType: { type: ['line', 'bar'] }
          }
        }
      })
    },

然后期间词云图没反应，打开控制台报错

前端词云效果echarts报错：...createTextStyle is not a function

百度到方法是要么更新echarts版本，要么安装低版本词云依赖

解决方案1： 跟随word-cloud依赖，加载高版本的echarts

npm install echarts@5.0.2 --save

解决方案2： 跟随echarts依赖，加载低版本版本的word-cloud依赖

 npm install echarts-wordcloud@1.1.3 --save