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 相关文章推荐
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
简单学习vue指令directive
Nov 03 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
详解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
thinkphp备份数据库的方法分享
2015/01/04 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
js转html实体的方法
2016/09/27 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python中的闭包函数
2018/02/09 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python 线程池用法简单示例
2019/10/02 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
学年自我鉴定范文
2013/10/01 职场文书
国培计划培训感言
2014/03/11 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
如何书写授权委托书?
2019/06/25 职场文书
创业计划书之甜品店
2019/09/18 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书