Echarts中使用水球图和标签云图(词云图)

发表于 | 分类于
Echarts中使用水球图

前言

本文主要汇总一些Echarts自身不包含的组件。

水球图

对于Echarts4.9及以下是内置水球图的，但是5.x以上版本是没有的。

https://github.com/ecomfe/echarts-liquidfill

安装

1
2
npm install echarts
npm install echarts-liquidfill@3

注意:

echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

使用

1
2
import * as echarts from "echarts";
import "echarts-liquidfill";

简单示例

1
2
3
4
5
6
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

标签图

安装

1
npm install echarts-wordcloud --save

引用

1
2
import * as echarts from "echarts";
import "echarts-wordcloud";

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var myChart = echarts.init(document.getElementById('boxECD1'));
var keywords =[
    {"name":"张三","value":100},
    {"name":"李四","value":80},
    {"name":"王五","value":100},
    {"name":"赵六","value":100},
    {"name":"田七","value":100}
]
var option = {
  series: [{
    type: 'wordCloud',
    // sizeRange: 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
    sizeRange: [20, 40],
    rotationRange: [0, 0],
    //rotationStep: 每个词旋转的角度范围和旋转的步进
    rotationStep: 45,
    //gridSize:词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
    gridSize:15,
    // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
    shape: 'pentagon',
    width: '100%',
    height: '100%',
    textStyle: {
      fontFamily: 'sans-serif',
      fontWeight: 'bold',
      // 颜色可以用一个函数来返回字符串，这里是随机色
      color: function () {
        return 'rgb(' + [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 220)
        ].join(',') + ')';
      }
    },
    emphasis: {
      focus: 'self',
      textStyle: {
        textShadowColor: '#333'
      }
    },
    data:keywords
  }]
};
myChart.setOption(option);