其实一路写来，我们一贯秉承的理念是，授人以鱼不如授人以渔。在ECharts研究了那么久之后，发现实际上网站里的图表有很多可控的元素，不要求自己开发，但是只要足够熟悉，改变唾手可得。
就在今天，ECharts正式进入了3.0时代，变化太快有点赶不上，但是很多原理性的东西没有发生变化，所以，谨以此文向快要被淘汰的2.0致敬。
（以上都是因为自己还没来得及看3.0而写出来的话，不用认真。）
既然说是自定义图表，那么以下会用案例的形式进行一些讲解。Echarts系列之——自定义图表。
Case 1：从简单到复杂
一张图表究竟有多少元素？如果问我的话，一口气大概能说出来的就有：标题、副标题、横轴、纵轴、副轴、数据标签、颜色、大小、图例、辅助线、形状...等等。
上述说的大多来自于Excel，毕竟常年用它做图表，那一套已经基本掌握的八九不离十了。但是，就实际情况而言，可以突破的点还有很多，只是大多情况下，再增加元素有点难度。（其实就是想说，从0-1是难点，1-2相对容易，但是从90%起，再增加的难度也是不言而喻的）
有点扯远了，回到这一章的主题，从简单到复杂，这里将要演示的是关于在ECharts中，如何把极简的图表加上各种元素。
先上图表：
图1 折线图再上代码：
option = {
xAxis: [
{
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
],
yAxis: [
{
type: "value",
}
],
series: [
{
type: "line",
data: [11, 11, 15, 13, 12, 13, 10]
}
]
};
乍看之下是不是啥都没有？实际上也确实是什么都没有。
这真的不是一张截图（连我自己都差点信了）。不然你可以手放到图的点上去试试。
看到一张这么朴素的图是用Echarts做的，有没有一种内牛满面的冲动？不用着急，接下来，就是见（wo）证（ma）奇（dai）迹（ma）的时刻。
图2 ECharts折线图（改）
对比之后是不是觉得一下子不一样了？实际上就是把一些关键性的参数做了调整，就能有这样的效果，具体如下：
- 标题
首先加了一个标题。修改了文字、文本位置、图上的位置、文字颜色以及字体，代码如下：
title: {
text: "未来一周气温变化",
textAlign: "center",
x: "center",
textStyle: {
color: "rgb(150, 150, 150)",
fontFamily: "微软雅黑"
}
},
然后加了一块可交互的作用，即鼠标在相应的区块中会显示相关数据，代码如下：
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
type: "shadow"
}
},
因为系列比原图要多，所以增加了图例，具体修改了图例内容、位置、文本排列方式、边距，代码如下：
legend: {
data: ["最高气温", "最低气温"],
y: "center",
orient: "vertical",
x: "right",
padding: 10
},
右上角放了一个工具箱，可以出现神奇的效果（比如点一下转换成柱形图），具体功能有：画辅助线、数据视图、切换图表形式、还原、保存图片，代码如下：
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
magicType: {
show: true,
type: ["line", "bar"]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
},
itemGap: 5,
itemSize: 13,
padding: 10
},
X轴比原来多写了两个属性：坐标轴撑满画布、以及不显示分割线。代码如下:
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
splitLine: {
show: false
}
}
],
Y轴相对X轴变化较多，增加了数据单位、坐标调整为-5~20之间、同样不显示分割线，而是以区域颜色填充的方式分割。代码如下：
yAxis: [
{
type: "value",
name: "°C",
min: -5,
max: 20,
splitLine: {
show: false
},
splitArea: {
show: true
},
}
],
具体对数据的操作都在在series下进行，两个数据系列采用了类似的才做方式，修改包括：定义名称、增加数据标注点（周最高气温）、增加数据标注线（周平均最高气温）、曲线平滑、普通状态下的线条颜色和覆盖区域颜色、凸显状态下的线条颜色和覆盖区域颜色、数据标记的呈现形式。代码如下：
{
name: "最高气温",
type: "line",
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{
type: "max",
name: "周最高"
},
]
},
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
},
smooth: true,
symbolSize: 3,
itemStyle: {
normal: {
areaStyle: {
type: "default",
color: "rgba(29, 214, 224, 0.29)"
}
},
emphasis: {
areaStyle: {
type: "default",
color: "rgba(29, 214, 224, 0.50)"
},
label: {
show: true
},
lineStyle: {
color: "rgba(29, 214, 224, 0.50)"
}
}
},
symbol: "arrow"
},
通过设置默认色，就可以全局控制图表系列的颜色了。代码如下：
color: ["rgb(29, 214, 224)", "rgb(247, 164, 32)"],
为了让画布和图例能够有相对独立的位置，同样是可以进行调整的。代码如下：
grid: {
x2: "20%",
borderColor: "rgba(0,0,0,0)"
}
其实只要理清楚关系，知道自己要修改什么内容，ECharts还是比较容易的，具体可以参考附录的相关链接。详细介绍了相关的控件。
想了半天，还是贴个完整的代码吧：
option = {
title: {
text: "未来一周气温变化",
textAlign: "center",
x: "center",
textStyle: {
color: "rgb(150, 150, 150)",
fontFamily: "微软雅黑"
}
},
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["最高气温", "最低气温"],
y: "center",
orient: "vertical",
x: "right",
padding: 10
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
magicType: {
show: true,
type: ["line", "bar"]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
},
itemGap: 5,
itemSize: 13,
padding: 10
},
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
splitLine: {
show: false
}
}
],
yAxis: [
{
type: "value",
name: "°C",
min: -5,
max: 20,
splitLine: {
show: false
},
splitArea: {
show: true
},
}
],
series: [
{
name: "最高气温",
type: "line",
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{
type: "max",
name: "周最高"
},
]
},
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
},
smooth: true,
symbolSize: 3,
itemStyle: {
normal: {
areaStyle: {
type: "default",
color: "rgba(29, 214, 224, 0.29)"
}
},
emphasis: {
areaStyle: {
type: "default",
color: "rgba(29, 214, 224, 0.50)"
},
label: {
show: true
},
lineStyle: {
color: "rgba(29, 214, 224, 0.50)"
}
}
},
symbol: "arrow"
},
{
name: "最低气温",
type: "line",
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{
type:"min",
name: "周最低",
}
]
},
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
},
smooth: true,
symbolSize: 2,
itemStyle: {
normal: {
areaStyle: {
type: "default",
color: "rgba(247, 164, 32, 0.29)"
}
},
emphasis: {
lineStyle: {
color: "rgba(247, 164, 32,0.5)"
},
label: {
show: true
},
areaStyle: {
color: "rgba(247, 164, 32,0.5)",
type: "default"
}
}
},
symbol: "arrow"
}
],
color: ["rgb(29, 214, 224)", "rgb(247, 164, 32)"],
grid: {
x2: "20%",
borderColor: "rgba(0,0,0,0)"
}
};
具体的就需要自己去探索了。其实写这段的意思主要是，很多时候别害怕代码类的东西，理清楚关系再好好利用，那么能做到的事情可能超乎你想象。
Case2:关于百度图说
如果实在不想写代码？其实也是有办法的，
是不是突然有种心潮澎湃被打击的感觉？其实不然，所谓条条大路通罗马，不管什么方法，达到自己的目的还是很重要的。而且，更重要的一点是，用别人写好的程序理论上再突破的可能性会比较小。
不谈利弊了，这里就推荐一个名叫“百度图说”的工具。
点下上一句的百度图说，进入页面：
然后点击：开始制作图表，进入下一个页面。（这里要登陆下）
点击创建图表就可以操作了：
图3 创建图表页
但你也会发现，里面的图表案例比起ECharts首页的实例相对少了很多，但实际上已经足够丰富了，至少可以用。
我们可以点开个柱状图，就会生成一个画布。请把鼠标放到图上：
图4 画布页面
那么重点来了，图表上方的小黑框就是修改图表的好东西。
- 拖动：图表比较多的时候可以换位置
- 数据编辑：用来编辑数据，如图：
- 参数调整：这就是让图表更美观的选项们了
- 显示代码：给心怀代码开发的小伙伴们专门设置的功能，贴到其他地方的话...你懂的
- 删除：就是删除咯
图5 数据编辑页面
改数据的时候到了，他也支持导入的功能。
图6 参数调整页面
想改哪里改哪里。
图7 显示代码页面
一定有种开挂了的感觉吧，其实就是那么奇妙，不过感觉这东西已经很久没有升级过了，原因不明，毕竟至少这边的图表和ECharts网页上的实例应该一一对应吧。
结束语：这一期多少算是对ECharts这个庞大的、国内开发的网页一次总结和拓展，希望这种网页呈现的形式会给大家带来耳目一新的感觉。
整个ECharts2.0应该都到此告一段落了，以后再开的时候应该是基于3.0甚至更高的版本了，但是，不管外形怎么改，这类东西的原理和技术要点还是相似的。共勉。
Reference
ECharts:参考手册百度图说