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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
js实现秒表计时器
Dec 16 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
JavaScript实现切换多张图片
Jan 27 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
详解PHP中的PDO类
2015/07/06 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
jQuery事件详解
2017/02/23 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python连接mysql实例分享
2016/10/09 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
怎样声明子类
2013/07/02 面试题
工程师自我评价怎么写
2013/09/19 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
公证委托书大全
2014/04/04 职场文书
校车安全责任书
2014/08/25 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
初三英语教学计划
2015/01/23 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
投诉信回复范文
2015/07/03 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis