vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)


Posted in Javascript onApril 12, 2019

本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来。文档中还有很多不够完善的地方,欢迎讨论哈!

需求:制作一个折线图用于显示当前24小时的数据,并且可以通过拖动折现图设置数据

效果图如下:初步看和一般的折线图没什么区别,但是实际如图示,节点是可以上下拖动的

vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)

代码如下:

<template>
 <div ref="dom" class="charts chart-bar"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from '_c/charts/theme.json' // 这是我自己写的主题文件,可以不用管
import { on, off } from '@/libs/tools' // 这是其他一些方法函数,可以不管
echarts.registerTheme('tdTheme', tdTheme)
export default {
 name: 'ChartLine',
 props: {
 text: String,
 subtext: String,
 yName: String
 },
 data () {
 return {
  dom: null,
  symbolSize: 5,

// 通过拖动是可以实时改变这里的值的
  data: [[0, 10], [1, 10], [2, 20], [3, 30], [4, 36], [5, 20], [6, 25], [7, 20], [8, 21], [9, 22],
  [10, 23], [11, 25], [12, 10], [13, 11], [14, 19], [15, 20], [16, 12], [17, 13], [18, 12], [19, 9],
  [20, 21], [21, 18], [22, 10], [23, 12]]
 }
 },
 methods: {
 resize () {
  this.dom.resize()
 }
 },
 mounted () {
 this.dom = echarts.init(this.$refs.dom, 'tdTheme')
 this.dom.setOption({
  title: {
  text: this.text,
  subtext: this.subtext,
  x: 'center'
  },
  grid: {
  left: 50,
  top: 40
  },
  tooltip: {
  trigger: 'axis'
  },
  xAxis: {
  min: 0,
  max: 23,
  type: 'value',
  axisLabel: {
   formatter (value) {
   return value + ':00' // 格式时间显示方式
   }
  },
  axisLine: { onZero: false }
  },
  yAxis: {
  min: 4,
  max: 36,
  type: 'value',
  name: this.yName,
  axisLine: { onZero: false }
  },
  series: [
  {
   id: 'a',
   type: 'line',
   smooth: true,
   symbolSize: this.symbolSize, // 为了方便拖拽,把 symbolSize 尺寸设大了。
   data: this.data
  }
  ]
 })
 this.dom.setOption({
  graphic: echarts.util.map(this.data, (dataItem, dataIndex) => {
  const that = this // 因为ondrag函数必须在回调内使用this.position获取实时坐标,此处必须用that替换this
  return {
   // 'circle' 表示这个 graphic element 的类型是圆点。
   type: 'circle',
   shape: {
   // 圆点的半径。
   r: this.symbolSize / 2
   },
   // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
   // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置
   position: this.dom.convertToPixel('grid', dataItem),
   // 这个属性让圆点不可见(但是不影响他响应鼠标事件)。
   invisible: true,
   // 这个属性让圆点可以被拖拽。
   draggable: true,
   // 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。
   z: 100,
   ondrag: echarts.util.curry(function (dataIndex) { // 此处必须用匿名函数,不能用箭头函数,否则拿不到拖动的坐标
   let origin = that.dom.convertToPixel('grid', that.data[dataIndex]) // 得到每个圆点原始位置
   // let maxY = that.dom.convertToPixel('grid', [40, 36]) // 最高温度为36摄氏度,暂未做封装
   // 超过最高温度36将不能拖动,写死的最低点高度为240,最高点为40
   if (this.position[1] > 240) {
    this.position[1] = 240
   } else if (this.position[1] < 40) {
    this.position[1] = 40
   }
   this.position[0] = origin[0] // 控制每个点位只能在y轴方向移动
   // this.position[1] = origin[1] // 控制每个点位只能在x轴方向移动
   // 实时获取拖动的点位信息并根据此信息重新画图
   that.data[dataIndex] = that.dom.convertFromPixel('grid', this.position)
   that.dom.setOption({
    series: [{
    id: 'a',
    data: that.data
    }]
   })
   }, dataIndex)
  }
  })
 })
 on(window, 'resize', this.dom.setOption({
  graphic: echarts.util.map(this.data, (item, dataIndex) => {
  return {
   position: this.dom.convertToPixel('grid', item)
  }
  })
 }))
 },
 beforeDestroy () {
 off(window, 'resize', this.resize)
 }
}
</script>

总结

以上所述是小编给大家介绍的vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
vue组件间通信解析
Mar 01 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 #Javascript
JS实现li标签的删除
Apr 12 #Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
You might like
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
python复制文件的方法实例详解
2015/05/22 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
乡镇三项教育实施方案
2014/03/30 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
团组织推荐意见
2015/06/05 职场文书
爱国主题班会教案
2015/08/14 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android