文档章节

ECharts 的拖拽小扩展

ECharts
 ECharts
发布于 2017/03/16 10:24
字数 986
阅读 448
收藏 0

今天给大家介绍 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。

 

(三)

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

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

 

var symbolSize = 20;

var data = [

  [15, 0],

  [-50, 10],

  [-56.5, 20],

  [-46.5, 30],

  [-22.1, 40]

];

 

var myChart = echarts.init(

  document.getElementById('main')

);

 

myChart.setOption({

  tooltip: {

    triggerOn: 'none',

    formatter: function (params) {

      return 'X: '

      + params.data[0].toFixed(2)

      + '<br>Y: '

      + params.data[1].toFixed(2);

    }

  },

  xAxis: {

    min: -100,

    max: 80,

    type: 'value',

    axisLine: {onZero: false}

  },

  yAxis: {

    min: -30,

    max: 60,

    type: 'value',

    axisLine: {onZero: false}

  },

  series: [{

    id: 'a',

    type: 'line',

    smooth: true,

    symbolSize: symbolSize,

    data: data

  }]

});

 

myChart.setOption({

  graphic: echarts.util.map(

    data, eachDataItem

  )

});

 

function eachDataItem(item, dataIndex) {

  return {

    type: 'circle',

    position: myChart.convertToPixel(

      'grid', item

    ),

    shape: {

      r: symbolSize / 2

    },

    invisible: true,

    draggable: true,

    ondrag: echarts.util.curry(

      onPointDragging, dataIndex

    ),

    onmousemove: echarts.util.curry(

      showTooltip, dataIndex

    ),

    onmouseout: echarts.util.curry(

      hideTooltip, dataIndex

    ),

    z: 100

  };

}

 

window.addEventListener('resize', function () {

  myChart.setOption({

    graphic: echarts.util.map(data, eachUpdate)

  });

});

 

function eachUpdate(item, dataIndex) {

  return {

    position: myChart.convertToPixel(

      'grid', item

    )

  };

}

 

function showTooltip(dataIndex) {

  myChart.dispatchAction({

    type: 'showTip',

    seriesIndex: 0,

    dataIndex: dataIndex

  });

}

 

function hideTooltip(dataIndex) {

  myChart.dispatchAction({

    type: 'hideTip'

  });

}

 

function onPointDragging(dataIndex, dx, dy) {

  data[dataIndex] = myChart.convertFromPixel(

    'grid', this.position

  );

  myChart.setOption({

    series: [{

      id: 'a',

      data: data

    }]

  });

}

 

</script>

</body>

</html>

 

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

 

 

© 著作权归作者所有

ECharts
粉丝 126
博文 6
码字总数 11546
作品 1
海淀
程序员
私信 提问
ECharts:国内数据可视化领域的新秀

不久前,专业大数据可视化公司Tableau在纽交所成功上市,当日收盘涨幅64%,至50.75美元,共募集资金2.542亿美元,成为今年美国最大一笔科技业IPO。Tableau Software正是一家做大数据的公司,...

Kener-林峰
2013/08/06
98
0
ECharts 1.3.5 更新(地图大跃进,滚轮缩放,世界地图等)

【ECharts 1.3.5】发布 #ECharts地图大跃进# 升级支持滚轮缩放和拖拽漫游、内置世界地图、标准GeoJson动态扩展新地图类型、子区域模式实现从内置地图中扩展出全球176个国家地区和全国600多个...

Kener-林峰
2013/12/20
8.6K
22
echarts跨图拖拽事件

@Kener-林峰 你好,想跟你请教个问题:echarts有没有拖拽事件,我想实现拖拽地图上的某个区域,到页面中另一个图中,然后在另一个图中做额外一些信息的处理 ,谢谢!或者类似于eCharts拖拽重...

qiang0904
2014/11/27
1K
0
JavaScript 图表库 - ECharts

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 ECharts 提供大量常用的数据可视化图表,底层基于ZRend...

ECharts
2013/07/10
374.3K
152
echarts动态添加地图标注

想在echarts的扩展地图的页面上,通过鼠标点击或者拖拽的方式去加标注点,例如,在这张图片中通过鼠标点击或者在工具栏中拖拽去添加像绿色的11的这样的标注点。

右眼所见
2017/02/23
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
昨天
6
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部