Vue echarts-wordcloud使用技巧总结+避坑

echarts官网虽然展示了wordcloud的demo和源码，但是在将代码引入vue项目中会报两种错误，目前网上针对此两种问题的解决方案不是很多，并且都不能解决根本性问题，查找起来就浪费了太多时间，得不偿失，所以下面将会阐述我的最终解决方案和必坑方法！
页面最终效果展示

image.png

1. 引入echarts

npm install echarts

2. man.js引入

import echarts from 'echarts'

3. dom使用

  //  tip: 页面方法中会通过 this.$echarts.init(this.$refs.loginTimes)方法获取到ref绑定为loginTimes的DOM节点，
      然后通过echarts的内部机制将echarts视图以canvas的形式展现在页面上
      
<div ref="loginTimes" class="block-up-login"></div>

4. 方法中调用

<script>
    export default 
        mounted() {
             // 初始化视图
            this.getIint()
        },
        methods: {
            getIint() {
            // 获取到ref绑定为loginTimes的DOM节点，以canvas的形式展现在视图层
                let myChart = this.$echarts.init(this.$refs.loginTimes)
                // echarts参数设置
                myChart.setOption({
                    backgroundColor: '#fff', // canvas背景颜色
                    // canvas标题配置项
                    title: {
                        text: '我是标题',
                        top: '0%',
                        left: '-1%',
                        textStyle: {
                            fontSize: 14,
                            color: '#3B3E41',
                            fontWeight: 'normal'
                        }
                    },
                    series: [
                        {
                            type: 'wordCloud',
                            left: '-5%',                 // X轴偏移量
                            top: '20%',                  // Y轴偏移量
                            width: '100%',               // canvas宽度大小
                            height: '100%',              // canvas高度大小
                            sizeRange: [12, 50],         //  词典字体大小范围配置
                            rotationRange: [0, 0],       // 词典字体旋转角度配置，默认不旋转
                            gridSize: 25,                // 词典字体间距配置
                            layoutAnimation: true,       // 为false词典过度会阻塞
                            textStyle: {                 // 词典样式配置
                                normal: {
                                    color() {
                                        // 颜色随机渐变
                                        let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                                        return colors[parseInt(Math.random() * 10)]
                                    }
                                }
                            },
                            // 渲染词典数据
                            data: [{
                                    value: '50',          // 词典大小配置
                                    name: 'iPhone 13'     // 词典名称配置
                                    textStyle: {          // 单独配置某个词典样式
                                    shadowBlur: 4,
                                    shadowOffsetY: 14,
                                    color: '#BDBEFA'
                                   }
                                },
                                { value: '30', name: 'VIVO' },
                                { value: '29', name: 'OPPO' },
                                { value: '28', name: 'HONOR' },
                                { value: '27', name: 'iPhone 12 pro max' },
                                { value: '26', name: 'iPhone 12 pro max' },
                                { value: '25', name: 'HUAWEI MATE 10' },
                                { value: '24', name: 'ONEPLUS' },
                                { value: '23', name: 'Lenova T470' },
                                { value: '22', name: 'MacBook Air ' },
                                { value: '21', name: 'SAMSUNG' },
                                { value: '20', name: 'iPad mini' },
                                { value: '16', name: 'BLACKBERRY' },
                                { value: '14', name: 'OPPO' },
                                { value: '13', name: 'SAMSUNG' },
                                { value: '12', name: '361' },
                                { value: '10', name: 'Lenova' }]
                        }
                    ]
                })
            }
        }
    }
</script>

5. 此时页面会报错 Component series.wordCloud not exists. Load it first.

   
   image.png
6. 报错原因

echarts插件中没有wordCloud依赖包，这是一个坑，虽然官网有阐述，但是位置不醒目，一般根本不知道

tip: 此时如果你百度，会出现很多让你引用第三方js库，也就是echarts-wordcloud.min.js文件，既然项目都安装了echaert，还去引用外部wordclou.js文件，不仅增加了项目的打包体积，更是多此一举，最后报错依旧不能解决，所以一下解决方案重中之重！

7. 解决办法

1. 安装 wordCloud 1.0 依赖包
    npm install echarts-wordcloud@1
    
2. man.js 注入
    import 'echarts-wordcloud'

tip: 必须安装这个版本，不能执行官网npm install echarts-wordcloud，因为echarts5.0以下的版本使用1.0的词云 默认安装是2.0，否则会报错：
TypeError: babel_runtime_helpers_defineProperty_WEBPACK_IMPORTED_MODULE_0__default(...) is not a function，如图：

image.png

安装完成后，保存项目，刷新页面，你就会发现词云视图就神奇办的出现了！！！

作者：bug爱好者
链接：https://juejin.cn/post/7044809985154351141
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。