ECharts 的拖拽小扩展

Stella981
• 阅读 1113

今天给大家介绍 echarts 中一个小例子『拖拽改变图表』的实现。这个例子是在原生 echarts 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 echarts 提供的 API 实现『定制化的』『富有交互的』功能。

ECharts 的拖拽小扩展

URL:http://echarts.baidu.com/demo.html#line-draggable

这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以发挥想象做更多的事情(例如在图中可视化得编辑)。所以一切从这个简单的例子开始。

echarts 本身没有提供封装好的『拖拽改变图表』功能,因为认为这个功能并不足够有通用性。那么它就留给开发者用 API 实现,这也有助于开发者按自己的需要个性定制。

【一】

在这个例子中,基础的图表是一个折线图(line chart)。参见如下配置:

ECharts 的拖拽小扩展

既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。

ECharts 的拖拽小扩展

上面的代码中,使用  convertToPixel  这个 API,进行了从 data 到『像素坐标』的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。myChart.convertToPixel('grid', dataItem) 这句话中,第一个参数 'grid' 表示 dataItem 在 grid 这个组件中(即直角坐标系)中进行转换。所谓『像素坐标』,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。

注意这件事需要在第一次 setOption 后再进行,也就是 grid 初始化后才能调用 myChart.convertToPixel('grid', dataItem)。

有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:

ECharts 的拖拽小扩展

上面的代码中,使用了  convertFromPixel  这个 API。它是  convertToPixel  的逆向过程。myChart.convertFromPixel('grid', this.position) 表示把当前像素坐标转换成 grid 组件中直角坐标系的 dataItem 值。

最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:

ECharts 的拖拽小扩展

(二)

到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 tooltip 组件来实时显示这个值。但是,tooltip 有其默认的『显示』『隐藏』触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。

在最前面的 option 中添加 tooltip 的定义:

ECharts 的拖拽小扩展

添加 tooltip 的自定义的『显示』『隐藏』策略:

ECharts 的拖拽小扩展

这里使用了  dispatchAction  来显示隐藏 tooltip。用到了  showTip 、 hideTip  两个 action。

(三)

总结一下,全部的代码如下:

   

   

有了这些基础,就可以定制更多的功能了,可以制作一个直角坐标系上的绘图板等等,可以发挥想象力。

点赞
收藏
评论区
推荐文章
达里尔 达里尔
2年前
在Vue项目里遇到多次渲染echart组件只显示一个的问题
症状vue项目echarts中出现“Thereisachartinstancealreadyinitializedonthedom.”的警告Vue页面多次渲染echarts封装的组件但只出现一个(如果这个为主要症状)原因:1.有可能是id冲突,如果你注册了N个组件,但是由于是复制粘贴过来的,导致你所有的组件文件echarts容器
马丁路德 马丁路德
3年前
微信小程序---使用Echarts和分包
微信小程序中使用Echarts和分包假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wxcharts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echa
Aidan075 Aidan075
3年前
ECharts团队出品的可视化神器,值得一试
大家好,我是小五🚀如果你对可视化感兴趣的话,一定了解过ECharts或者pyecharts。不过使用它们还是需要有一定编程基础,今天给大家安利一个:同为ECharts团队出品,但是0编程的可视化神器。简介百度图说是一款在线可视化工具软件,可以实现零编程玩转图表。它的图表样式一共8类22种,对比之前介绍的还是少了一些。官网地址:https://tushuo.b
Stella981 Stella981
3年前
PHP+echarts 简单人物关系图
开发语言:PHP需求:人物关系图插件echarts 说明:实现功能 复杂功能请自行根据业务逻辑 echarts链接地址如下:http://echarts.baidu.com/echarts2/doc/example/force.html粗略截图:!(https://static.oschina.net/uploads/spac
Stella981 Stella981
3年前
ECharts使用:this.dom.getContext is not a function
echarts画图报错this.dom.getContextisnotafunction;原因:因为在初始化echarts的时候,echarts.js规定只能使用dom原生方法获取标签,即document.getElementById('main');错误写法:varmyCommentLineChartecharts
Stella981 Stella981
3年前
Echarts:实现拖拽效果
1<!DOCTYPEhtml2<html3<head4<metacharset"utf8"5<scriptsrc"./echarts.js"</script6</head7<body8<div
Stella981 Stella981
3年前
Ionic2 集成ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表。当时答应说写个blog,简单写下步骤。在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过。下面以百度的ECharts图表为例,演示一下使用第三方库的用法。1、安装ECHARTS首先需要使用np
Wesley13 Wesley13
3年前
dhm
<centerdhmecharts</center    echarts3图表封装,前台ajax通过自定义div属性实现传值,后台通过各种数据适配器自动组装达到图表封装,以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。项目地址:https:
Python进阶者 Python进阶者
2年前
Pyecharts绘图API总结
一、初识Pyecharts大家好,我是Python进阶者。pyecharts简介pyecharts是一个用于生成Echarts图表的类库,Echarts是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而Python是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts
Python进阶者 Python进阶者
11个月前
echarts图表,在notebook里为什么显示不出呢?
大家好,我是皮皮。一、前言前几天在Python最强王者交流群【吴超建】问了一个echarts图像可视化的问题,一起来看看吧。echarts图表,在notebook里为什么显示不出呢?二、实现过程这里【巭孬🕷】给了一个思路:https://pyechart