vue使用echarts实现词云效果

大屏展示中某一模块需要实现词云效果

此处默认已经安装echarts
echarts配置项为

  options: {
        series: [
          {
            type: 'wordCloud',
            // left: '-5%',                 // X轴偏移量
            top: '5%',                  // Y轴偏移量
            bottom: '5%',
            width: '100%',               // canvas宽度大小
            height: '100%',              // canvas高度大小
            sizeRange: [12, 22],         //  词典字体大小范围配置
            rotationRange: [0, 0],       // 词典字体旋转角度配置，默认不旋转
            gridSize: 20,                // 词典字体间距配置
            layoutAnimation: true,       // 为false词典过度会阻塞
            textStyle: {          // 单独配置某个词典样式
              color: 'rgba(255, 255, 255, 0.6)'
            },
            // 渲染词典数据
            data: [
              {
                value: '12',          // 词典大小配置
                name: '90%流动人口',     // 词典名称配置
                textStyle: {          // 单独配置某个词典样式
                  shadowBlur: 4,
                  shadowOffsetY: 14,
                  color: '#ffffff'
                }
              },
              { value: '3', name: '商业形态复杂' },
              { value: '9', name: '建筑不规范' },
              {
                value: '7',
                name: '拆迁安置小区',
                textStyle: {          // 单独配置某个词典样式
                  color: '#ffffff'
                }
              },
              { value: '6', name: '2004年建' },
              { value: '8', name: '设施老旧' },
              { value: '5', name: '商住一体' },
              { value: '4', name: '人员密集' },
              { value: '3', name: '消防设施不足' }]
          }
        ]
      }

此时并不会生效，只会显示标题
这个时候需要安装wordCloud的依赖，先查看自己的echarts版本
如果大于5.0则npm install echarts-wordcloud安装（默认安装2.0的）
如果是4.x版本的就需要 npm install echarts-wordcloud@1

然后main.js 注入
    import 'echarts-wordcloud'

配置完后重新跑一遍项目