Echart折线图手柄触发事件示例详解

介绍一个关于ECharts折线图手柄触发事件的实用指南

今天我将为大家介绍关于如何使用ECharts折线图的手柄触发事件。对于在长沙进行网络推广的朋友们，或者是热衷于狼蚁网站SEO优化的你，相信这篇文章将为你带来极大的学习价值。

让我们来了解一下ECharts这个基于HTML5的图形库。其创建过程非常简单，只需引用相应的Javascript文件即可。我之所以选择ECharts，主要是出于三个原因。其一，它是百度推出的项目，持续得到更新与维护，目前版本为ECharts 3；其二，该项目的文档非常详尽，每个细节都有清晰的解释，而且都是中文，易于理解；其三，ECharts支持的图形种类丰富，可以方便地切换不同的图形。

接下来，让我们进入实战环节。

一、环境配置

我们使用的是vue-cli（版本2.0）以及vue-echarts（来自github的efe/vue-echarts分支）。

二、应用场景

在我们的项目中，使用ECharts来展示图表。其中有一个特殊需求，那就是需要实现折线图的手柄拖动功能。当松开手柄时，需要根据手柄所在位置的x轴信息发送请求，以更新图表数据。

关于ECharts手柄的实例，你可以参考地址：

三、具体实现

在实际操作过程中，我们可能会遇到一些bug。

1. 手柄上的标签信息有时会刷新不出来。比如上述例子中的“2016-10-07”可能会消失。

2. ECharts的点击事件对折线图并不友好，只有点击在折线图的点上才会触发事件。我们需要实现点击图中任意位置即可触发自定义事件的功能。

3. ECharts虽然提供了可以拖动的手柄，但并没有提供松开手柄后触发的事件，这无法满足我们的需求。如果ECharts提供了这样的功能，请告知我，非常感谢。

页面展示

```html

```

脚本部分

```javascript