公司项目中负责的主要部分是图表展示，初次大规模使用echarts，边写边摸索，以下为一个阶段性的总结，当然ECharts中还有一些好玩的实用的（例如自定义图表）还没涉及到，以后慢慢补充。这篇是总结常见图表：柱状图，折线图，饼图，多Y轴图，气泡图，地图，日历图，折线标注图······
1.引入echarts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->## 标题文字 ##
<script src="echarts.min.js"></script>
</head>
</html>众所周知，echarts的实现方式为canvas，因此要求初始化时容器宽高必须有，否则会直接导致错误。
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>2.常用配置项
上面标出来的是echarts的配置项里使用最频繁的，其他配置在业务需要时才加入，大多可以现学现用。下面分享使用过程中遇见的需要“费点心思”的配置项———— 提示框
提示框组件可以设置在多种地方：
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip
当然tooltip下面还有很多的配置，这里只讲formatter（其余配置都很简单，看看就会了），默认的图例内容格式是formatter: '{b0}: {c0}<br />{b1}: {c1}'，在数据结构简单的时候是够用的，但到了地图和二维图表中，这种格式的数据可读性就比较差了，例如：
数据结构这样的：
效果图是这样：
是不是一！头！雾！水！这个时候就需要根据数据结构改变提示框中的内容结构了。这里需要用到formatter的另一种格式，回调函数:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string，第一个参数 params 是 formatter 需要的数据集。
在我没有细究这个formatter的参数之前，代码是这样的：
formatter: (redata) => {
let tip = '';
const key = data.keys[0];
const bucket = data.buckets.find(x => String(x[key]) === String(redata[0].name));
if (bucket) {
bucket.buckets.forEach(x => {
tip += `<br />${x[data.keys[1]]}<br />` + Object.entries(x.values)
.filter(([key, value]) => value !== 0)
.map(([key, value]) => `${key}: ${value}`)
.join('<br />');
});
}
return `${redata[0].name}${tip}`;
}效果图是这样的：
现在数据的结构清晰了，但是看起来就是个“毛坯”，柱形图对应的彩色小圆圈不见了，还有一个缺陷是点击图例切换开关时，提示框中的文本不能响应式的改变，永远展示所有的数据。没办法只能继续研究api。 最终，在充分利用formatter的第一个参数（params）后，画风是这样的：
formatter: (params) => {
return `${params[0].name}<br />`
+ params.map(item =>
`<span class="eTooltipCircle" style="backgroundcolor:${item.color}"</span>${item.seriesName}: ${item.value}`
).join('<br />');
}
可爱的小圆点出现了！而且根据需要选择性展示。
以下，知识点，敲黑板了啊。formatter的第一个参数（params）：
{
// 当前点击的图形元素所属的组件名称，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data，dataType 无意义。
dataType: string,
// 传入的数据值
value: number|Array
// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string
}其实这些参数大都是我们在配置option.series时“塞”进去的，在数据结构为一维时，可以直接拿到字段名和值。在二维图表会出现“意想不到”的情况，参数长这样
有value值，没有对应的字段名，但有seriesIndex=0,dataIndex=0,这个时候找到option.series，seriesIndex为0的值找到对应序号的series，中的第dataIndex个数据，就正是我们所需要的
3.事件
在 ECharts 中主要通过 on 方法添加事件处理函数。ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 dispatchAction 后触发的事件。
示例：
myChart.on('click', function (params) {
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});
params各有不同，以legendselectchanged（切换图例开关，也是我使用的echarts的第一个事件）为例：
{
type: 'legendselectchanged',
// 切换的图例名称
name: string
// 所有图例的选中状态表
selected: Object
}如何区分鼠标点击到了哪里：
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// 点击到了 markPoint 上
if (params.seriesIndex === 5) {
// 点击到了 index 为 5 的 series 的 markPoint 上。
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// 点击到了 graph 的 edge（边）上。
}
else {
// 点击到了 graph 的 node（节点）上。
}
}
}
});4.自定义主题
在echarts的官网上，工具中选择主题构建工具，根据需要可以修改配色方案
echarts.registerTheme('macarons', {
"color": [
....
],....
});修改完毕之后下载主题的js文件，放到自定义的文件中，在echarts.init时引入即可。
5.总结
基本上跟着用例写，都不会有太大问题，但如果想要做一些改动或者创新，就需要细细研读API了，另外现在社区里大家写得例子很多也都很有意思，可以看看。
echarts中的3d、自定义图表、动画······还没应用，用到之后会继续更新的，待续······
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
