echarts词云图

1. 安装使用

安装

echarts4.9以下版本，使用词云echarts-wordcloud1插件

npm install echarts@4.9.0
npm install echarts-wordcloud@1.1.3

echarts4.9以上版本使用echarts自带的词云效果

npm install echarts@5.0.0
npm install echarts-wordcloud@2.0.0

echarts4.9以下使用

<div id="echartciyun" style="height:3.8rem"></div>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

mounted() {
    this.initEchartsciyun('echartciyun');
},

// 词云图
initEchartsciyun(id) {
    let _this = this;
    let myChart = echarts.init(document.getElementById(id));
    myChart.clear();
    // 数据源
    let keywords = [{ "name": "男神", "value": 2.64 },
    { "name": "好身材", "value": 4.03 },
    { "name": "校草", "value": 24.95 },
    { "name": "酷", "value": 4.04 },
    { "name": "时尚", "value": 5.27 },
    { "name": "阳光活力", "value": 5.80 },
    { "name": "初恋", "value": 3.09 },
    { "name": "英俊潇洒", "value": 24.71 },
    { "name": "霸气", "value": 6.33 },
    { "name": "腼腆", "value": 2.55 },
    { "name": "蠢萌", "value": 3.88 },
    { "name": "青春", "value": 8.04 },
    { "name": "网红", "value": 5.87 },
    { "name": "萌", "value": 6.97 },
    { "name": "认真", "value": 2.53 },
    { "name": "古典", "value": 2.49 },
    { "name": "温柔", "value": 3.91 },
    { "name": "有个性", "value": 3.25 },
    { "name": "可爱", "value": 9.93 },
    { "name": "幽默诙谐", "value": 3.65 }
    ];
    let option = {
    series: [{
        type: 'wordCloud',
        sizeRange: [15, 80],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '100%',
        height: '100%',
        textStyle: {
        normal: {
            color: function() {
            return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
            ].join(',') + ')';
            }
        }
        },
        data: keywords
    }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
    myChart.resize();
    });
},

</script>

echarts4.9以上使用

跟上面差不多，也是需要安装的

2. 报错

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

可能因为你的echarts依赖版本落后了，echarts词云效果使用，直接 ‘npm install echarts-wordcloud ’ ，默认加载的是最新版本依赖，需要echarts更新到 5.0.1+ 的版本。

我的示例使用的是4.9.0版本的echarts,就报了如下错误。

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

npm install echarts@5.0.2 --save

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

 npm install echarts-wordcloud@1.1.3 --save