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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
mysql limit查询优化分析
2008/11/12 PHP
php 归并排序 数组交集
2011/05/10 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
js的写法基础分析
2011/01/17 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Python 列表list使用介绍
2014/11/30 Python
python实现多进程代码示例
2018/10/31 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python 发送json数据操作实例分析
2019/10/15 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
django实现日志按日期分割
2020/05/21 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
几个SQL的面试题
2014/03/08 面试题
项目合作计划书
2014/01/09 职场文书
电视购物广告词
2014/03/19 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
个人自我鉴定总结
2014/03/25 职场文书
初中学校军训方案
2014/05/09 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书