vue+eacharts 折线圆点拖拽

前言：
本文章主要根据eacharts官网实例进行改装，实现单个圆点，多条曲线实现当前某条曲线进行拖拽数据进行变化
话不多少上代码，（希望此篇文章可以帮助小伙伴们完成图表的拖拽功能！！！！！！）

此处代码为封装子组件，直接在父组件引用即可

<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: { //传输数据
      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: '预测' },
        { 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) { //监听 数据变化是 更新图表
      this.init()
    },
    number: function (m, n) { //number控制那条折线为主线
      this.init()
    },
    deep: true,
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.myChart.clear()
  },
  methods: {
    init() { //实例
      this.myChart = $echarts.init(document.getElementById('linEacharts'))
      this.initCharts()
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize()
        }
      })
    },
    initCharts(list, index) {
      if (list) { //父组件调子组件传过来的值 
        this.data = list
      } 
      
      this.seriesValue = []
      this.titleList = []
      //此循环 主要是来将对应的字段数据进行替换
      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]) //预测值
              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'])
    },
   // 实现拖拽
    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',
        })
      }
     //拖拽开始进行改变 当前圆点的位置  
      function onPointDragging(dataIndex, dx, dy) {
        yAxisData[dataIndex] = that.myChart.convertFromPixel({ seriesIndex: that.number }, this.position)[1]
        that.myChart.setOption({
          series: that.seriesValue,
        })
      }
     //拖拽结束 将当前圆点位置 对应的数据进行赋值
      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]),
            }
          }),
        })
        // 赋值结束 传输给父组件 进行数据更新
        that.$emit('setData', {
          setNumber: that.number,
          seriesData: that.seriesValue,
        })
      }
    },
  },
}
</script>

<style>
</style>

父组件引入子组件调用

     <LineEacharts
         //实现混动条
            :dataZoom="[{ 
          show: true,
          realtime: true,
        }]"
            @setData="getData" // 子传父过来的数据    
            :number="number"  //传入当前需要拖拽的下标
            ref="LineEacharts"
            :data="chartsList" //传入的数据
            :padding="{top:'10%',right:'4%',bottom:'4%',left:'4%'}"  //设置图表的padding 值
            :xAxisName="'type'"  //X轴的字段
            :fields="['forecastVal','typicalVal']" //传入Y轴的折线数量以及字段名称
            :aliases="[{field:'forecastVal',alias:'预测'}, {field:'typicalVal',alias:'典型'}]" //需要替换的字段名字
          ></LineEacharts>

运用子传父方法名字来接收数据

  getData(value) {
console.log(value) //子传父过来的数据 
    },

以上是所有代码，如果需要根据实际状况进行修改即可运用，可能会存在改变时不时太顺畅有卡顿现象，这点正在进一步优化，随时更新！有好的建议希望留言！！！！！

vue+eacharts 折线圆点 拖拽

vue+eacharts 折线圆点拖拽