echartsの折れ線グラフはラベルタグのドラッグ＆ドロップ機能を実現します

echartsの折れ線グラフはラベルタグのドラッグ＆ドロップ機能を実現します

最近、フロントエンドページにラベルタグのドラッグアンドドロップ機能を実装する必要がありますが、その基本原理は、ある点の相対位置を計算して特定することであり、その機能は次のとおりです。

コードは以下のように表示されます

html部分

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

js部分

<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>

スタイル

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

役に立ったと思ったら、忘れずに「いいね！」してください。皆様の励ましがこれからも更新していく原動力です、一緒に頑張って、一緒に強くなっていきましょう

終わり