在VUE 中制作 echarts 词云图

在数据处理的项目中，词云图是经常会出现的，该文章手把手教你在vue项目中制作一个echarts词云图。借鉴词云图github中的一个图片。

导入云图API

npm install echarts
npm install echarts-wordcloud

在main.js中添加echart

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
require('echarts-wordcloud');

在页面中使用云图

type:"wordCloud",

data数据格式

  [{       "value": 112,       "name": "08款开着挺好"   },   {       "value": 231,       "name": "08款有劲"   },   {       "value": 131,       "name": "08款朗逸入手"   },   {       "value": 223,       "name": "1.0t2.0刚刚好"   }]

完整的echart函数

drawLine() {
     
     let myChart = this.$echarts.init(
       document.getElementById("myecharts-wordcloud")
     );
     
     let option = {
       title: {
         text: "热词",
         textStyle: {
           color: "#148D75",
         },
         top: 14,
         left: 26,
       },
       series: [
         {
           type: "wordCloud",
           size: ["80%", "80%"],
           rotationRange: [0, 0],   
           textPadding: 0,
           autoSize: {
             enable: true,
             minSize: 14,
           },
           left: "center",                 
           top: "center",
           right: null,
           bottom: null,
           textStyle: {
             normal: {
               color: function() {
                 return "#056E71"
               },
             },
           },
           data: [{
                     "value": 112,
                     "name": "08款开着挺好"
                 },
                 {
                     "value": 231,
                     "name": "08款有劲"
                 },
                 {
                     "value": 131,
                     "name": "08款朗逸入手"
                 },
                 {
                     "value": 223,
                     "name": "1.0t2.0刚刚好"
                 }
                    ],
        },
       ],
     };
     
     myChart.setOption(option, true);
   },

调用echarts函数

this.drawLine();

- 可选择在mounted或者created函数中调用

效果

name中的词随机颜色

修改textStyle中return的返回值

 textStyle: {
            normal: {
                color: function () {
                    return 'rgb(' + [
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255)
                        ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },

参考文档：https://github.com/ecomfe/echarts-wordcloud