前言：
本文章主要根據(jù)eacharts官網(wǎng)實(shí)例進(jìn)行改裝，實(shí)現(xiàn)單個(gè)圓點(diǎn)，多條曲線實(shí)現(xiàn)當(dāng)前某條曲線進(jìn)行拖拽數(shù)據(jù)進(jìn)行變化
話不多少上代碼，（希望此篇文章 可以幫助小伙伴們完成 圖表的拖拽功能?。。。。。。?/p>

此處代碼為封裝子組件 ，直接在父組件引用即可

<template>
  <div>
    <div id="linEacharts" :style="{width:width,height:height}"></div>
  </div>
</template>

<script>
import { DataSet } from '@antv/data-set'
import $echarts from 'echarts'
export default {
  name: 'LinEacharts',
  props: {
    data: { //傳輸數(shù)據(jù)
      type: Array,
      default: () => [
        { uuid: 20921, typicalVal: 1, gridPlanUuid: null, type: '00:00:00', forecastVal: 11.4 },
        { uuid: 21498, typicalVal: 1, gridPlanUuid: null, type: '00:05:00', forecastVal: 2.85 },
        { uuid: 21499, typicalVal: 2, gridPlanUuid: null, type: '00:10:00', forecastVal: 2.85 },
        { uuid: 21500, typicalVal: 3, gridPlanUuid: null, type: '00:15:00', forecastVal: 2.85 },
        { uuid: 21501, typicalVal: 4, gridPlanUuid: null, type: '00:20:00', forecastVal: 2.85 },
        { uuid: 21502, typicalVal: 5, gridPlanUuid: null, type: '00:25:00', forecastVal: 2.85 },
        { uuid: 21503, typicalVal: 6, gridPlanUuid: null, type: '00:30:00', forecastVal: 2.85 },
        { uuid: 21504, typicalVal: 7, gridPlanUuid: null, type: '00:35:00', forecastVal: 2.85 },
        { uuid: 21505, typicalVal: 8, gridPlanUuid: null, type: '00:40:00', forecastVal: 2.85 },
        { uuid: 21506, typicalVal: 9, gridPlanUuid: null, type: '00:45:00', forecastVal: 2.85 },
        { uuid: 21507, typicalVal: 5, gridPlanUuid: null, type: '00:50:00', forecastVal: 2.85 },
        { uuid: 21508, typicalVal: 6, gridPlanUuid: null, type: '00:55:00', forecastVal: 2.85 },
        { uuid: 21509, typicalVal: 5, gridPlanUuid: null, type: '01:00:00', forecastVal: 2.85 },
        { uuid: 21510, typicalVal: 5, gridPlanUuid: null, type: '01:05:00', forecastVal: 2.85 },
        { uuid: 21511, typicalVal: 4, gridPlanUuid: null, type: '01:10:00', forecastVal: 2.85 },
        { uuid: 21512, typicalVal: 3, gridPlanUuid: null, type: '01:15:00', forecastVal: 2.85 },
      ],
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '450px',
    },
    number: {
      type: Number,
      default: 0,
    },
    padding: {
      type: Object,
      default: () => {
        return { top: 40, right: 50, bottom: 0, left: 50 }
      }, // 上右下左
    },
    fields: {
      // y軸  折線顯示的字段
      type: Array,
      default: () => ['forecastVal', 'typicalVal'],
    },
    xAxisName: {
      type: String, //X軸字段名
      default: 'type',
    },
    // 別名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性別'}]
    aliases: {
      type: Array,
      default: () => [
        { field: 'forecastVal', alias: '預(yù)測(cè)' },
        { field: 'typicalVal', alias: '典型' },
      ],
    },
    // 伸縮條
    dataZoom: {
      type: Array,
      default: () => [
        {
          show: false,
          realtime: true,
          // start: 30,
          // end: 70,
          // xAxisIndex: [0, 1]
        },
      ], // 上右下左
    },
  },
  data() {
    return {
      myChart: null,
      time: [],
      titleList: [],
      seriesValue: [],
      chartVaule: [],
    }
  },
  watch: {
    data: function (n, o) { //監(jiān)聽(tīng) 數(shù)據(jù)變化是 更新圖表
      this.init()
    },
    number: function (m, n) { //number控制那條折線為主線
      this.init()
    },
    deep: true,
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.myChart.clear()
  },
  methods: {
    init() { //實(shí)例
      this.myChart = $echarts.init(document.getElementById('linEacharts'))
      this.initCharts()
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize()
        }
      })
    },
    initCharts(list, index) {
      if (list) { //父組件調(diào)子組件傳過(guò)來(lái)的值 
        this.data = list
      } 
      
      this.seriesValue = []
      this.titleList = []
      //此循環(huán) 主要是來(lái)將對(duì)應(yīng)的字段數(shù)據(jù)進(jìn)行替換
      this.fields.map((item, index) => {
        console.log(item)
        this.time = []
        for (let i = 0; i < this.aliases.length; i++) {
          if (item == this.aliases[i].field) {
            this.chartVaule = []
            this.data.map((dataItem) => {
              this.chartVaule.push(dataItem[item]) //預(yù)測(cè)值
              this.time.push(dataItem[this.xAxisName])
            })
            this.seriesValue.push({
              name: this.aliases[i].alias,
              data: this.chartVaule,
              seriesIndex: index,
              type: 'line',
              smooth: true,
              symbolSize: 5,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(235, 81, 118, 0.3)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(235, 81, 118,0)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            })
            this.titleList.push(this.aliases[i].alias)
          }
        }
      })
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: this.time,
            axisLine: { onZero: false },
          },
          yAxis: {
            type: 'value',
          },
          legend: {
            data: [...new Set(this.titleList)],
          },
          dataZoom: this.dataZoom,
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: this.padding.top,
            left: this.padding.left,
            right: this.padding.right,
            bottom: this.padding.bottom,
            containLabel: true,
          },
          series: this.seriesValue,
        },
        true
      )
      this.DragShow(this.seriesValue[this.number]['data'])
    },
   // 實(shí)現(xiàn)拖拽
    DragShow(yAxisData) {
      const that = this
      // 拖拽
      setTimeout(function () {
        that.myChart.setOption({
          graphic: $echarts.util.map(yAxisData, function (item, dataIndex) {
            let position = that.myChart.convertToPixel({ seriesIndex: that.number }, [dataIndex, item])
            return {
              id: dataIndex,
              type: 'circle',
              position: position,
              shape: {
                r: 5,
              },
              invisible: true,
              draggable: true,
              ondrag: $echarts.util.curry(onPointDragging, dataIndex),
              onmousemove: $echarts.util.curry(showTooltip, dataIndex), 
              onmouseout: $echarts.util.curry(hideTooltip, dataIndex),
              ondragend: $echarts.util.curry(onPointDragEnd, dataIndex),
              z: 100,
            }
          }),
        })
      }, 0)
      window.addEventListener('resize', updatePosition)
      that.myChart.on('dataZoom', updatePosition)

      function updatePosition() {
        that.myChart.setOption({
          graphic: $echarts.util.map(yAxisData, function (item, dataIndex) {
            return {
              position: that.myChart.convertToPixel({ seriesIndex: that.number }, [dataIndex, item]),
            }
          }),
        })
      }

      function showTooltip(dataIndex) {
        that.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: that.number,
          dataIndex: dataIndex,
        })
      }

      function hideTooltip(dataIndex) {
        that.myChart.dispatchAction({
          type: 'hideTip',
        })
      }
     //拖拽開(kāi)始進(jìn)行改變 當(dāng)前圓點(diǎn)的位置  
      function onPointDragging(dataIndex, dx, dy) {
        yAxisData[dataIndex] = that.myChart.convertFromPixel({ seriesIndex: that.number }, this.position)[1]
        that.myChart.setOption({
          series: that.seriesValue,
        })
      }
     //拖拽結(jié)束 將當(dāng)前圓點(diǎn)位置 對(duì)應(yīng)的數(shù)據(jù)進(jìn)行賦值
      function onPointDragEnd(dataIndex, dx, dy) {
        that.myChart.setOption({
          graphic: $echarts.util.map(yAxisData, function (item, dataIndex) {
            return {
              id: dataIndex,
              position: that.myChart.convertToPixel({ seriesIndex: that.number }, [dataIndex, item]),
            }
          }),
        })
        // 賦值結(jié)束 傳輸給父組件 進(jìn)行數(shù)據(jù)更新
        that.$emit('setData', {
          setNumber: that.number,
          seriesData: that.seriesValue,
        })
      }
    },
  },
}
</script>

<style>
</style>

父組件引入子組件調(diào)用

     <LineEacharts
         //實(shí)現(xiàn)混動(dòng)條
            :dataZoom="[{ 
          show: true,
          realtime: true,
        }]"
            @setData="getData" // 子傳父過(guò)來(lái)的數(shù)據(jù)    
            :number="number"  //傳入當(dāng)前需要拖拽的下標(biāo)
            ref="LineEacharts"
            :data="chartsList" //傳入的數(shù)據(jù)
            :padding="{top:'10%',right:'4%',bottom:'4%',left:'4%'}"  //設(shè)置圖表的padding 值
            :xAxisName="'type'"  //X軸的字段
            :fields="['forecastVal','typicalVal']" //傳入Y軸的折線數(shù)量以及字段名稱
            :aliases="[{field:'forecastVal',alias:'預(yù)測(cè)'}, {field:'typicalVal',alias:'典型'}]" //需要替換的字段名字
          ></LineEacharts>

運(yùn)用子傳父 方法名字來(lái)接收數(shù)據(jù)

  getData(value) {
console.log(value) //子傳父過(guò)來(lái)的數(shù)據(jù) 
    },

以上是所有代碼，如果需要根據(jù)實(shí)際狀況進(jìn)行修改即可運(yùn)用，可能會(huì)存在 改變時(shí)不時(shí)太順暢有卡頓現(xiàn)象，這點(diǎn)正在進(jìn)一步優(yōu)化，隨時(shí)更新 ！有好的建議希望留言?。。。。?/p>