ECharts 5 配置

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

整理了一些工作中常用的ECharts配置。

examples

Echarts Gallery

在react中使用Echarts：echarts-for-react

5.0.0

Echarts 5.0.0更新日志：

https://github.com/apache/incubator-echarts/releases

指定渲染器

官方文档：使用 Canvas 或者 SVG 渲染

默认使用Canvas渲染：

1
2
3
this.chart = echarts.init(container, null, {renderer: 'canvas'})
// 等价于
this.chart = echarts.init(container)

移动端推荐使用SVG渲染：

1
this.chart = echarts.init(container, null, {renderer: 'svg'})

如果已经设置了renderer: 'svg'，但是渲染出的仍然是canvas，检查一下是否引入了SVG渲染器模块:

1
2
3
import echarts from 'echarts/lib/echarts'
// 引入SVG渲染器模块
import 'zrender/lib/svg/svg'

通用

设置渐变填充色

配置文档：https://echarts.apache.org/zh/option.html#series-line.areaStyle.color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
color: {
    type: 'linear', 
    // 线性渐变，x y x2 y2 参数用于配置渐变色的起止位置, 依次对应右/下/左/上四个方位。
    // 0 0 0 1 代表渐变色从正上方开始。
    // 范围从 0 - 1，相当于在图形包围盒中的百分比，
    // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#7EB2FB' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#487BF6' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},

自定义tooltip

formatter: https://echarts.apache.org/zh/option.html#tooltip.formatter

1
2
3
4
5
6
tooltip: {
    confine: true, // 将 tooltip 框限制在图表的区域内 
    formatter: function(options) {
        // ...
    }
}

使用富文本标签自定义样式

https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE

legend关闭图例选择

1
2
3
legend: {
    selectedMode: false,
}

设置x、y轴颜色

1
2
3
4
5
6
7
xAxis: {
    axisLine: {
        lineStyle: {
            color: '#0087ED'
        }
    }
}

设置x、y轴分区域的背景颜色

1
2
3
4
5
6
7
8
9
10
yAxis: {
    splitArea: {
        show: true,
        areaStyle: {
            color: [
                'rgba(123,19,19,0.3)'
            ]
        }
    }
}

强制x、y轴显示所有刻度标签

默认会采用标签不重叠的策略间隔显示标签。设置interval : 0强制显示所有标签：

1
2
3
4
5
6
7
8
9
10
xAxis: {
    axisLabel: {
        interval: 0,
    },
},
yAxis: {
    axisLabel: {
        interval: 0,
    },
},

绘制额外的元素

https://echarts.apache.org/zh/option.html#graphic

标题居中

使用left: center而不是textAlign: center。具体看issue：标题使用textAlign无法居中 #4550 

1
2
3
4
5
6
option = {
    title: {
        text: '标题标题',
        left: 'center',
    },
}

词云

github echarts-wordcloud

折线图

拐点

1
2
3
4
5
6
series: [{
    name: name,
    type: 'line',
    symbol: 'circle', // 拐点类型，实心圆
    symbolSize: 8, // 拐点大小
}]

平滑曲线

series-line. smooth

如果是boolean类型，则表示是否开启平滑处理。如果是number类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为true时相当于设为0.5。

柱状图

设置最大宽度

1
2
3
4
5
series: [
   {
    barMaxWidth: 100
   }
]

堆叠柱状图数据为0时label会堆叠

解决方法1：label设置formatter，为0时隐藏label：

1
2
3
4
5
6
7
8
series: [{
    label: {
        show: true,
        formatter: (params) => {
            return params.value || ''
        }
    },
}]

解决方法2：将值设置为null隐藏该类目

注意：如果有设置tooltip，tooltip显示的值将会是-

1
2
3
4
5
6
function formatNum(num) {
     if(num === 0) {
        return null
     }
     return num
}
1
2
3
series: [{
    data: [2, formatNum(0), 2, 1, 1, 1, formatNum(0)],
}]

双Y轴 折线图 + 柱状图

Demo: https://www.makeapie.com/editor.html?c=x5zMgDYwEZ

关键代码：

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
legend: {
    data: ['频道数', '有效视频数'],
},
xAxis: {
    type: 'category',
    name: '分类',
    data: [],
},
yAxis: [
    {
        type: 'value', // 左侧y轴
        name: '频道数', 
    },
    {
        type: 'value', // 右侧y轴
        name: '有效视频数',
    },
],
series: [
    {
        type: 'line',
        name: '频道数',
        yAxisIndex: 0, // 指定使用的y轴的index
        data: [],
    },
    {
        type: 'bar',
        name: '有效视频数',
        yAxisIndex: 1, // 指定使用的y轴的index
        data: [],
    },
],

注意点

  • yAxis为数组，一个item对应一个y轴的配置
  • series的每个item都要添加yAxisIndex字段，指定其使用的y轴的index

饼图

设置上下边距

饼图不能通过grid调整上下左右距离容器的距离，需要通过series中的center调整：

1
center: ['50%', '50%']

圆环中间文字

配置文档：https://echarts.apache.org/zh/option.html#title.text

1
2
3
4
5
6
7
8
title: {
    text: '渠道分布',
    x: 'center',
    y: 'center',
    textStyle: {
       // ...
    },
}

圆环所有标签放在中心位置

series-pie.label.position 

1
2
3
4
5
6
7
8
9
10
11
12
13
series: [{
    // ...
    avoidLabelOverlap: false,
    label: {
        show: false,
        position: 'center'
    },
    emphasis: {
        label: {
            show: true,
        }
    },
}]

扇形之间的间隔（描边）

描边线宽

1
2
3
4
5
6
7
series: [{
    // ...
    itemStyle: {
        borderColor: '#fff', 
        borderWidth: 1,
    },
}]

不响应和触发鼠标事件（取消hover高亮、hover在扇区上的放大动画等）

1
2
3
4
{
    type: 'pie',
    silent: true,
}

渲染企业微信通讯录数据

企业微信API：Canvas 支持方案

open-data 控件 demo

tooltip 无法正确渲染通讯录数据，显示的是乱码

解决方法：设置renderMode: 'richText'

1
2
3
tooltip: {
   renderMode: 'richText',
},

问题汇总

Component legend.scroll not exists. Load it first.

问题：按需引入import 'echarts/lib/component/legend'后，设置legendtype: scroll报错

解决：将缺少的legendScroll引入即可 import 'echarts/lib/component/legendScroll'