html5 可调整节点的线,vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）...

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

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

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

代码如下：

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'