# 1. ECharts 中的Canvas和SVG
Apache EChartsTM 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v4.0 (opens new window) 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 renderer 参数 (opens new window) 为 'canvas' 或 'svg' 即可指定渲染器，比较方便。
SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 ZRender (opens new window) 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。
适用场景：
Canvas渲染器适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 特效 (opens new window)。SVG渲染器由于它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊，适合低数据量绘制图形的场景。
ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。
- ECharts 的 预构建文件 (opens new window) 中，常用版 (opens new window) 和 完整版 (opens new window) 已经包含了 SVG 渲染器，可直接使用。而 精简版 (opens new window) 没有包括。
- 如果 在线自定义构建 ECharts (opens new window)，则需要勾上页面下方的 “SVG 渲染”。
- 如果 [线下自定义构建 ECharts](https://echarts.apache.org/zh/tutorial.html#自定义构建 ECharts) ，则须引入 SVG 渲染器模块，即：
import 'zrender/lib/svg/svg';
// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
2
3
4
5
6
# 2. 快速起步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入在线CDN的 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
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
这是官网快速入门的示例，有点改动是通过jsDelivr (opens new window) 的 CDN 引入eCharts的，创建ECharts图表的步骤：
- 引入
ECharts - 准备一个指定大小（宽高）的DOM元素，作为
echarts创建图表的渲染容器 - 将准备好的DOM作为参数，初始化echarts实例；
- 指定
JSON对象option指定图表的配置项（组件）和数据； - 调用
echarts实例的setOption方法配置图表。
从上述的option配置项和渲染的图形中可以看到常见的图形组件：标题、工具栏、图例、提示框、坐标轴（X轴、Y轴）。
组件在配置对象option中还可以配置组件的一些关于图表类型、布局、大小、对其方式等属性。其中的Y轴跟数据源series相关联。
# 3. 系列series
在 echarts 里，系列（series (opens new window)）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 series 包含的要素至少有：
- 一组数值（
data） - 图表类型（
type） - 关于这些数据如何映射成图的参数。
一个网页里面可以创建多个echarts实例，每个echarts实例也可以创建多个图表（同个容器中）和坐标系，所以代表数据和映射图形的series组件，常常是以数组的形式进行配置：
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：
heatmap (opens new window)（热力图）
...
在配置图表数据时，可以在series中使用data属性直接配置，也可以使用option的 dataset (opens new window)中的数据，通过encode配置项指定source中数组的索引来配置：
# 4. 组件
axis中的类型有categories、value。
categories：类目轴，需要在axis中同时指定类目的数据data，且与series数组中的元素对象的name属性相同。
value：数值轴，常常是Y轴，数据会从series数组中的data获取
scale：配置轴是否从0开始
# 5. 标记线和标记点
在绘制折线图的时候，常常有标记某个点、某个值或者是某段区域的这种需求。
echarts在series.line中提供了markPoint、markLine、markArea配置项来标记点、线、区间。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入在线CDN echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts line mark',
},
toolbox: {
show: true,
feature: {
dataView: {
show: true
},
restore: {
show: true
},
dataZoom: {
show: true
},
saveAsImage: {
show: true
},
magicType: {
type: ['line', 'bar']
}
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值', symbol: 'arrow' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
markArea: {
data: [
[
{
yAxis: 25
},
{
yAxis: 35
}
]
]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# 6. 坐标系
很多图表需要运行在坐标系上，如line (opens new window)（折线图）、bar (opens new window)（柱状图）、scatter (opens new window)（散点图）、heatmap (opens new window)（热力图）等等。坐标系用于图表布局和显示数据的刻度等，echarts中常见的坐标系有直角坐标系 (opens new window)、极坐标系 (opens new window)、地理坐标系（GEO） (opens new window)、单轴坐标系 (opens new window)、日历坐标系 (opens new window) 等。其他一些系列，例如 pie (opens new window)（饼图）、tree (opens new window)（树图）等等，并不依赖坐标系，能独立存在。
直角坐标系图表的简单配置：
图表类型：
bar、line、scatterxAxis (opens new window)、yAxis (opens new window)：取值类型（category、value）
grid (opens new window)（直角坐标系底板）：
- 区域缩放 dataZoom：类型有inside和slider
示例：
// 指定图表的配置项和数据
var option = {
title: {
text: '直角坐标系常用配置'
},
tooltip: {},
legend: {},
xAxis: [
{ type: 'category', gridIndex: 0, data: ["1月","2月","3月","4月","5月","6月"] },
{ type: 'category', gridIndex: 1, data: ["橘子","苹果","香蕉","雪梨","西瓜","葡萄"] }
],
yAxis: [
{ gridIndex: 0 },
{ gridIndex: 1 }
],
//grid以数组的形式指定多个坐标系（图表）和布局
grid: [
{ bottom: '60%' },
{ top: '60%' }
],
series: [{
name: '水果月销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},{
name: '年度销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
//通过xAxisIndex、yAxisIndex指定坐标系
xAxisIndex: 1,
yAxisIndex: 1 ,
}],
dataZoom: [{
xAxisIndex:0,
top:"45%"
},{
yAxisIndex:0
},{
yAxisIndex: 1
},{
xAxisIndex: 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
# 参考文章
[1] 浏览器绘图的基本原理 https://blog.csdn.net/ccav4137/article/details/83776717
[2] canvas 与svg的区别 https://www.it610.com/article/1305867372153835520.htm
[3] 使用 Canvas 或者 SVG 渲染 https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93
[4] ECharts 基础概念概览 https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88