接下来我们将会学习 ECharts 的基础配置，包括 series、xAxis、yAxis、grid、tooltip、title、legend、color。要求学员们知道这些配置的主要作用是什么就可以了。
首先我们准备一个 ECharts 实例来对这些基础配置进行学习。打开 ECharts 官方实例，选择其中一个例子，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts 基础概念概览</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#box {
margin: 20px;
width: 800px;
height: 600px;
}
</style>
<body>
<div id="box"></div>
</body>
<script src="./js/echarts.min.js"></script>
<script>
// 初始化实例对象 ECharts.init(dom)容器;
var myChart = echarts.init(document.querySelector('#box'));
// 指定配置项和数据
var option = {
title: {
text: '折线图堆叠',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value',
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
// 将配置项设置给 ECharts 实例对象。
myChart.setOption(option);
</script>
</html>
效果：
系列（series）
系列（series）是很常见的名词。在 ECharts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 ECharts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
ECharts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、…
比如将这个值修改为 bar。
那他就会变成柱状图。
每个系列通过 type 决定自己的图表类型，可以多个图表重叠。比如我们将第二个 series.type 修改成 pie。
记得测试完后需要将值改回 line。
series.name 就是系列名称，series.data 是系列中的数据内容数组，在这里也就是每一个折线的拐点。但是我们再看一下这一条数据：
在图上找到这条线：
诶？我们的数据开头不是 150 吗？这是因为我们设置了 stack。series.stack 是数据堆叠，同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加。
当然你也可以修改这几条线的颜色。在 option 中加入以下内容：
color:['pink','orange','red','blue','green'],
预览效果
组件（component）
在系列之上，ECharts 中各种内容，被抽象为“组件”。例如，ECharts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…。
我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。
注：因为系列是一种特殊的组件，所以有时候也会出现 “组件和系列” 这样的描述，这种语境下的 “组件” 是指：除了 “系列” 以外的其他组件。
用option描述图表
title
首先来看 option 中的第一个配置 title。将这个值修改为 折线图堆叠 2。
此时图表的标题也跟着改变了。也就是说 title.text 配置是设置图表的标题。
你可以在配置项 title 中找到 title.text 甚至关于 title 配置项更多的内容。
由于后续我们会讲解很多配置项的内容，就不每一个都贴上配置项文档链接了，你可以在这个地方找到我们没有讲到的配置项的其他内容：
tooltip
当我们将鼠标放在折线的拐点处时会出现提示框组件：
但是如果我们删掉这个值。
此时将鼠标放在折线的拐点处时就不会出现提示框组件了。
此时的 tooltip.trigger = ‘axis’ 指的是触发类型，他的值是可选的，包括：
item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
none：什么都不触发。
注意：在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
toolbox 工具栏
toolbox 工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox.feature.saveAsImage 是保存为图片，也就是这个：
查询手册，我们来试一下这一个值：
修改 toolbox：
toolbox: {
feature: {
saveAsImage: {},
dataView:{}
}
},
坐标系
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。
一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），ECharts 暗自为他们创建了 grid 并关联起他们：
再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：
再来看下图，一个 ECharts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：
外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter（散点图）能运行在直角坐标系、极坐标系、地理坐标系（GEO）等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line（折线图）、bar（柱状图）等等。
grid
grid 是直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
left、right、bottom 几个值分别是 grid 组件离容器左侧、右侧、底部的距离。containLabel 是指 grid 区域是否包含坐标轴的刻度标签。
离容器距离是什么意思呢？还记得我们之前定义了一个 DOM 容器吗，他和 grid 的关系如下图：
当我们把 left 值设置为 0%，containLabel 设置成 false 后，grid 区域就会紧紧地贴合在 DOM 容器边上了。
xAxis 和 yAxis
xAxis 是设置 X 轴的相关配置，yAxis 设置 Y 轴的相关配置。type 是坐标轴类型、xAxis.type=‘category’ 类目轴，适用于离散的类目数据。像下面勾选的每一条折线，就是类目轴。
xAxis.boundaryGap=false 是坐标轴两边留白策略。当把值修改为 true 时：
就会离坐标轴有一段空白的距离。
xAxis.data 就很清晰了，就是类目数据。但是注意一点的是，它只在类目轴（type: ‘category’）中有效。如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。
如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。
yAxis.type=‘value’ 数值轴，适用于连续数据。像下面框起来的数据，就是类目轴。
如果我们互换两个的值：
xAxis: {
type: 'value',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'category'
},
那他就是这样了：
测试完后记得修改回去。
实验总结
本小节主要学习了以下知识点：
ECharts 实例
ECharts 基础配置
系列（series）
组件（component）
用 option 描述图表
坐标系
如果记不住这些配置项和属性都没关系，因为 ECharts 的使用方法就是去查官方文档，在他给出的代码上进行修改，从而定制出我们想要的图表。
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
