Echart--折线图手柄触发事件

1 环境: vue-cli(2.0)+ vue-echarts  (git地址:https://github.com/ecomfe/vue-echarts)

2 场景:最近项目用echarts来展示图标,其中有一个需求,需要拖动手柄,等松开手柄时,要根据手柄所在的位置(获取手柄在的x轴信息),重新发送请求,来渲染数据。

 echarts的手柄实例地址:?c=line-tooltip-touch

3图:

Echart--折线图手柄触发事件

4遇到的bug:

    4.1 手柄上的label信息,有时会刷新不出来。即上图中的2016-10-07消失。

    4.2 echarts的点击事件对折线图并不友好,必须点在折线图的点坐标上才会触发事件。so,要实现点击图中任意位置来即可实现触发自己的事件。

    4.3 echarts提供了可以拖动的手柄,但是并没有松开手柄后触发的事,这个没有满足我们产品的需求。当然有可能是我没有找到,若有请告知,谢谢。

5解决以上的bug:

  页面的展示如下:

<template> <div> <div @touchend='touchs' @mouseup='touchs'> <v-chart auto-resize :options='lineOption' :initOptions='initOptions' ref='line' /> </div> </div> </template> <script> //初始化折线的数据 import lineoption from '@/assets/js/handleline.js' export default{ data(){ return{ lineOption:lineoption, initOptions:{ renderer: 'svg' || 'canvas' }, date:'',//发送Ajax时所需的参数 reFlag:'',//避免重复发送请求时的中间变量 } }, } </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxxgw.html