echarts的事件引入（一）

这篇文章是介绍echarts的折线图添加入事件 
1
2
3
4
5
6
7
序：
公司一直在强调`结果导向`，那我就先放最终结果的链接吧。
在线访问：https://goddy.gitlab.io/line-chart-event/#/
源码地址：https://gitlab.com/Goddy/line-chart-event
这个系列主要解决了折线图引入事件的需求，需要读者有一定echarts的基础。
项目中我已经封装好了事件与折线图融合的方法，我们只需要引入js文件即可，下一个篇章我来说明下我封装的内容。
此篇主要讲解虚拟的业务情景以及在vue项目中如何使用封装的js文件。

假设情景

对比南通和石家庄分别两个区的降雨量，并将一些降雨量导致的事件体现到折线图上，点击事件可以跳到相应新闻网站。

已知数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#时间
['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项目

1
2
3
4
5
$ 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后触发）
    1
    2
    3
    4
    5
    mounted() {
      setTimeout(() => {
        drawChart(this.dataInput)
      }, 300)  #延迟触发
    }

结语

至此，你本地的样例生效了吗？

参考文档

Comentários

⬆︎TOP