Echart线图句柄触发事件示例的详细说明

前言

这是我打算在这个项目中使用的图形库，也是一个基于HTML5的图形库。图形创建也比较简单，直接参考Javascript即可。使用这个库有三个主要原因。一是这个库是百度项目，一直在更新。最新的是EChart 3；二是这个库的项目文档比较详细，每个点都解释的很清楚，而且是中文，比较容易理解；第三点是这个库支持丰富的图形，可以直接切换图形，使用起来非常方便。

下面就不多说了，我们来看看详细的介绍

1环境：

vue-CLI(2.0)vue-echart(git地址：https://github.com/ecomfe/vue-echarts(本地下载))

2场景：

最近，该项目使用echarts来显示图标。其中一个要求是需要拖动句柄。释放句柄时，应该根据句柄的位置重新发送请求(获取句柄的X轴信息)来渲染数据。

echarts的句柄实例地址：http://echarts.baidu.com/examples/editor.html? c=线-工具提示-触摸

图3:

遇到4个错误：

4.1手柄上的标签信息有时无法刷新。即上图2016-10-07消失。

4.2 e Charts的点击事件对折线图不友好，只有点击折线图的点坐标才会触发事件。因此，单击图表中的任意位置来触发您自己的事件。

4.3 echarts提供了一个可以拖动的手柄，但是松开手柄后没有触发，不符合我们产品的要求。当然，也有可能是我没找到。请让我知道，谢谢。

5解决上面的bug:

该页面如下所示：

template div div id=' line ' @ touch end=' touch ' @ mouse up=' touch ' v-chart auto-resize class=' zhe xian ' : options=' line options ' : initoptions=' init options ' ref=' line '/div/div/template script//从' @/assets/js/handleline.js '导出默认{ data(){ return { line option 3: line option，init options 33: { render 333333

为了解决第一个bug，label有时会消失，因为我未来的代码将使用formatter，并且我将第一次使用formatter。我写了这个。

这个。line option . xaxis . axis point . label . formatter=function(param){//param是x轴let value=_ this的信息。$ echart . format . format time(' yyyy-mm-DD '，params . value)；_ this.date=值；Console.log('实时获取的X轴事件' _this.date)返回值；}、axisPoint对象的其他数据都是用handleline.js写的setOption是重置AxisPoint的其他数据。

mounted(){//let _ this=this；this . LineOption . Xaxis . axis Point={ value : ' 2016-10-7 '，snap: true，linestyle : { color : ' # 004 e52 '，opacity: 0.5，width: 2 }，label: { show: true，formatter : function(params){ let value=_ this。$ echart . format . format time(' yyyy-MM-DD '，params . value)；_ this.date=值；Console.log('实时获取的X轴事件' _this.date)返回值；}，backgroundcolor:' # 004E52'}，handle: { show: true，color3360' # 004E52'}，要解决第三个bug，结合formatter和vue的touchend事件，单独使用formatter是没有用的，因为当手指离开的时候，formatter的param数据会.效果不好。因此结合touchend事件，并在手指离开时获得最终日期。

methods : { touch(){//手指离开句柄事件，因为当句柄滑动时，格式化程序将被触发，然后this.date将改变。它不会改变这个的值。日期当你的手指触发其他地方，所以。为了避免手指离开时重复发送请求，需要一个中间变量。只有当两个值不相等时，你才会做你想做的事情。如果(这个。reflag==this。date) {return}这个。reflag=this。date//重新发送请求并呈现数据。此时，已经得到了X轴的时间。console . log(this . date)//this . getpiedata()}，}来解决第二个bug，这个bug是在网上找到的。单击折线图中的任意位置，获取X轴信息并发送请求。同时，让lineOption中的tooltip : { trigger on : ' click ' }出现，否则该点击将无效。

SendTime() {//调用varchart=this。$ echart.init(这。$ refs.line. $ El) chart.getzr()。on ('click '，params={ var pointInPixel=[params.offsetX，params . offsety]if(chart . contain pixel(' grid '，pointInPixel)){ let xIndex=chart . convert from pixel({ seresindex : 0 0 }，[params . offsetx，params . offsety])[0]；让a=这个。$ echart . format . format time(' yyyy-MM-DD '，xIndex)；/*编写事件处理代码的位置*///xIndex是一个重要的信息，所以最好在使用console.log(xIndex)之前打印出具体的内容；//this . date=this . line data[xinDex 1][0]；//用手指点击后，使这两个值相等，避免触发touchend事件，this . reflag=this . date=a；//重新发送请求//this.getPieData()} })}，总结

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。