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

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

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

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

代码如下：

<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], [