你好，我是彭俊，一名热爱数据分析与软件开发的学生，致力于运用科学技术提升人们的生活体验。

我是北京大学计算机专业的硕士研究生，目前在腾讯公司作为前端开发实习生参与暑期实习。

在闲暇时光，我喜欢带着相机去旅行，走过大街小巷，感受生活的气息。

如果你想和我讨论软件开发或是摄影方面的问题，欢迎随时与我联系。

使用流程

导入 ECharts

使用 ECharts 之前，需要将 ECharts 框架导入到工程项目中。ECharts 支持使用标签的方式导入 ( <script src="echarts.min.js"> )，同时也支持用户使用 npm 获取 echarts。如果你的项目正在使用 Vue、React 等工程化框架，那么推荐使用 npm 作为导入 ECharts 的方式。

创建图表实例

ECharts 图表实例的创建流程如下：

1
2
3
4

graph LR
A (创建具备宽高的 DOM) --> B (初始化 ECharts 实例) 
B --> C (设置图表配置项) 
C --> D (设置展示数据)

ECharts 提供了 setOption () 函数来更新图形，每当该函数被调用时，ECharts 会比较前后两次数据的差异，并使用合适的动画来呈现图形的变化。实际上，如果只是创建简单的图形，只需要根据需求修改对应的配置项即可。ECharts 所有的配置项可以参考 ECharts 文档 - 配置项 。

交互逻辑

自定义 Toolbox

ECharts 自带了 toolbox 帮助用户实现各种简单的交互逻辑：

事件与行为

在网络流量分析项目中，对 brush 选框交互有着独特的需求。例如，需要限定用户最多只能刷选两次，每次的刷选框需要用不同的颜色标记，同时要在刷选框上方给出区间提示等。对于这种自定义的复杂交互逻辑，需要使用 ECharts 提供的 events 和 actions 接口解决。

事件

ECharts 主要通过 on 方法添加事件处理函数，所有的 ECharts 事件列表参考 ECharts 文档 - events 。

ECharts 中的事件主要有两种，一种是鼠标事件（如鼠标单击、双击和悬浮等），一种是使用交互组件（如 datazoom 组件和 brush 组件）后触发的事件。鼠标事件可参考 ECharts 文档 - 鼠标事件 ，在此不再赘述。本文研究的重点是 brush 组件的交互事件，因此会对这部分内容进行详细的介绍。

brush 组件是选框组件，适用于用户想要选择一段时间范围的情况。brush 组件有三个重要的交互事件，分别是 brush、brushEnd 和 brushselected 事件。

默认情况下，刷选或移动选区时，会不断触发 brushSeleted 事件，这可能会导致页面性能问题。好在 ECharts 提供了防抖和节流的配置选项 throttleDelay，用户可以根据自身需要设置触发阈值。

行为

除了用户的交互操作，在程序里调用方法触发图表的行为即为 action。在 ECharts 3 中通过调用 myChart.dispatchAction ({ type: ‘’ }) 触发图表行为。和 brush 组件相关的 action 的使用方法可以参考 ECharts 文档 - action.brush 。