The echarts line chart realizes the drag and drop function of the label tag

The echarts line chart realizes the drag and drop function of the label tag

Recently, it is necessary to implement a drag-and-drop function for label tags in a front-end page. The basic principle is to calculate and locate the relative position of a certain point. The functions are as follows:

code show as below

html part

html部分
<template>
  <div style="height: 100%;overflow: auto">
    <div id="myCharts" ref="myCharts" ></div>
  </div>
</template>

js part

<script>
import * as echarts from "echarts";
export default {
    
    
  data() {
    
    
    return {
    
    
      myEchart: null,
      option: {
    
    },
      echartsParams: null,
      showIndex:0,//显示计数
    };
  },
  mounted() {
    
    
    this.createEchart();
  },
  methods: {
    
    
    createEchart() {
    
    
      let data = [[10, 20],[30, 40], [50, 60], [60, 70], [60, 60], [56, 66]];
      this.myChart = echarts.init(this.$refs.myCharts);
      this.option = {
    
    
        xAxis: {
    
    
          type: 'value',
        },
        yAxis: {
    
    
          type: 'value'
        },
        series: [
          {
    
    type: "line",
          data:data,

          label: {
    
    
              show: true,
              // formatter: "XYZ",
              position: "inside",
              fontSize: 0,
              width: 150,
              offset: [0, 0],
              formatter: (params) => {
    
    
                console.log(params)
                if (data.length - 1 == params.dataIndex) {
    
    
                  return '这是一个可移动的公式'
                } else {
    
    
                  return ""
                }
              },
            },
            labelLine: {
    
    
              show: false,
              lineStyle: {
    
    
                color: "#707070",
                with: 2,
                type: "solid",
                opacity: 0,
              },
            },
          },
        ],
      };
      this.option && this.myChart.setOption(this.option);
      let that = this;
      //点击显示隐藏label
      // this.myChart.on("click", {seriesType: "line"}, function (params) {
    
    
      this.myChart.on("click", {
    
    seriesType: "line"}, function (params) {
    
    
        console.log(123)
        console.log(params)
        if (
            that.option.series[params.seriesIndex].labelLine.lineStyle.opacity ==
            false
        ) {
    
    
          that.option.series[params.seriesIndex].label.fontSize = 12;
          that.showIndex += 1;
          that.option.series[params.seriesIndex].label.offset = [0, 70]; //初始化位置
        } else {
    
    
          that.option.series[params.seriesIndex].label.fontSize = 0;
          that.option.series[params.seriesIndex].label.offset = [0, 0];
          that.showIndex -= 1;
        }
        that.option.series[params.seriesIndex].labelLine.lineStyle.opacity =
            !that.option.series[params.seriesIndex].labelLine.lineStyle.opacity;
        that.myChart.setOption(that.option);
      });
      //点击某个bar记录当前bar的params
      this.myChart.on("mousedown", 'series.line', function (params) {
    
    
        that.echartsParams = params;
        //添加up事件
        document
            .getElementById("myCharts")
            .addEventListener("mouseup", that.mouseUpEchart);
      });
    },
    mouseUpEchart(e) {
    
    
      let that = this;
      console.log("开始")
      console.log(e)
      console.log(that.echartsParams.event)
      console.log(that.option.series[that.echartsParams.seriesIndex].label.offset)
      //计算当前鼠标拖动后的位置
      const initX =
          that.echartsParams.event.offsetX -
          that.option.series[that.echartsParams.seriesIndex].label.offset[0];
      const initY =
          that.echartsParams.event.offsetY -
          that.option.series[that.echartsParams.seriesIndex].label.offset[1];
      that.option.series[that.echartsParams.seriesIndex].label.offset = [
        e.offsetX - initX,
        e.offsetY - initY,
      ];
      console.log(that.option.series[that.echartsParams.seriesIndex].label.offset)
      //重新set图例
      that.myChart.setOption(that.option);
      //注销事件
      document
          .getElementById("myCharts")
          .removeEventListener("mouseup", that.mouseUpEchart);
    },
  },
};
</script>

style

#myCharts {
    
    
  width: 1000px;
  height: 500px;
  margin: auto;
}

If you find it useful, remember to like it! Your encouragement is the motivation for me to continue to update, work hard together, become stronger together, come on

end