今天给大家介绍 echarts 中一个小例子『拖拽改变图表』的实现。这个例子是在原生 echarts 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 echarts 提供的 API 实现『定制化的』『富有交互的』功能。
URL:http://echarts.baidu.com/demo.html#line-draggable
这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以发挥想象做更多的事情(例如在图中可视化得编辑)。所以一切从这个简单的例子开始。
echarts 本身没有提供封装好的『拖拽改变图表』功能,因为认为这个功能并不足够有通用性。那么它就留给开发者用 API 实现,这也有助于开发者按自己的需要个性定制。
【一】
在这个例子中,基础的图表是一个折线图(line chart)。参见如下配置:
既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。
上面的代码中,使用 convertToPixel 这个 API,进行了从 data 到『像素坐标』的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。myChart.convertToPixel('grid', dataItem) 这句话中,第一个参数 'grid' 表示 dataItem 在 grid 这个组件中(即直角坐标系)中进行转换。所谓『像素坐标』,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。
注意这件事需要在第一次 setOption 后再进行,也就是 grid 初始化后才能调用 myChart.convertToPixel('grid', dataItem)。
有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:
上面的代码中,使用了 convertFromPixel 这个 API。它是 convertToPixel 的逆向过程。myChart.convertFromPixel('grid', this.position) 表示把当前像素坐标转换成 grid 组件中直角坐标系的 dataItem 值。
最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:
(二)
到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 tooltip 组件来实时显示这个值。但是,tooltip 有其默认的『显示』『隐藏』触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。
在最前面的 option 中添加 tooltip 的定义:
添加 tooltip 的自定义的『显示』『隐藏』策略:
这里使用了 dispatchAction 来显示隐藏 tooltip。用到了 showTip 、 hideTip 两个 action。
(三)
总结一下,全部的代码如下:
有了这些基础,就可以定制更多的功能了,可以制作一个直角坐标系上的绘图板等等,可以发挥想象力。