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 timers计时器简单应用说明
Oct 28 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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 session有效期问题
2009/04/26 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP重定向的3种方式
2013/03/07 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php中关于换行的实例写法
2019/09/26 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JavaScript闭包实例讲解
2014/04/22 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
AngularJS快速入门
2015/04/02 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
岗位职责说明书模板
2014/07/30 职场文书
先进事迹材料范文
2014/12/29 职场文书
大学生读书笔记范文
2015/07/01 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers