序：
公司一直在强调`结果导向`，那我就先放最终结果的链接吧。
在线访问：https://goddy.gitlab.io/line-chart-event/#/
源码地址：https://gitlab.com/Goddy/line-chart-event
这个系列主要解决了折线图引入事件的需求，需要读者有一定echarts的基础。
项目中我已经封装好了事件与折线图融合的方法，我们只需要引入js文件即可，下一个篇章我来说明下我封装的内容。
此篇主要讲解虚拟的业务情景以及在vue项目中如何使用封装的js文件。
假设情景
对比南通和石家庄分别两个区的降雨量，并将一些降雨量导致的事件体现到折线图上，点击事件可以跳到相应新闻网站。
已知数据
#时间
['2017-12-21', '2017-12-22', '2017-12-23', '2017-12-24', '2017-12-25', '2017-12-26', '2017-12-27', '2017-12-28', '2017-12-29', '2017-12-30', '2017-12-31', '2018-01-01', '2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05', '2018-01-06', '2018-01-07']
#南通A、B地区降雨量
[1,2,3,4,5,6,7,5,3,9,12,4,2,4,6,3]
[7,6,5,4,3,2,1,8,2,14,3,2,14,5,20]
#石家庄A、B地区降雨量（单引号为未知）
[1,2,3,4,5,6,7,7,2,2,4,6,7,3,2,1]
[7,6,5,'',4,3,2,1,4,8,8,2,3,2]
#南通事件（单个例子）
{
title: '事件(2)', #标题
date: '2017-12-26', #日期
content: '内容(1226)', #内容
url: 'http://echarts.baidu.com/demo.html#grid-multiple' #事件网址
}
#石家庄事件（同上）
核心思路
因为x轴数据即时间是连续不间断的，那么我们就可以根据x轴的两端的时间及它们的位置找到事件发生的时间对应x轴的位置。
引入流程
1. 创建vue项目
$ vue init webpack my-project
$ cd my-project
$ cnpm install
$ npm run dev
$ cnpm install echarts --save
2. 引入封装的js文件
- 下载需要引入的echartsEvent.js文档
- 用一款你熟悉的编译器打开my-project
- 打开目录
src/components/HelloWorld.vue - 添加一个div
- 🆔设置为
echarts，用于识别 - 给此div添加css
#echarts {width: 1000px;margin:20px auto;}
- 🆔设置为
- 从js文件引入drawChart方法
import {drawChart} from '@/assets/js/echartsEvent' - 重点来了，数据配置
-
数据概览
-
折线图数据
- 事件数据 （不做展示，可戳链接查看）
-
数据概览
- 添加drawChart的触发方法（编译好HTML后触发）
mounted() {
setTimeout(() => {
drawChart(this.dataInput)
}, 300) #延迟触发
}
结语
至此，你本地的样例生效了吗？
