vue 关于echart实现label拖拽的实现

关于echart实现label拖拽的实现

echart相关的事件

ECharts 支持常规的鼠标事件类型，包括 ‘click’、 ‘dblclick’、 ‘mousedown’、 ‘mousemove’、 ‘mouseup’、 ‘mouseover’、 ‘mouseout’、 ‘globalout’、 ‘contextmenu’ 事件。我们在拖拽中只需要使用click事件就可以了，因为 ‘mousedown’、 ‘mousemove’、 'mouseup’只能监控到我们当前的一个的图形元素。

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

我们会用到click事件，显示当前点击的label，mousedown事件监听当前的需要拖拽的元素对象。
echart事件相对应的写法

chart.on('click', 'series', function() {});
chart.on('click', 'series.line', function() {});
chart.on('click',{ seriesType: "bar" }, function() {});

生成echart（以bar为例书写拖拽，线、散点等等都可以使用）

html

  <div id="echart" ref="echart"></div>

css

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

JavaScript

import * as echarts from "echarts";
export default {
  data() {
    return {
      myEchart: null,//echarts实例
      option: {},
      echartsParams: null,
    };
  },
  mounted() {
    this.createEchart();
  },
   methods: {
    createEchart() {
      this.myChart = echarts.init(this.$refs.echart);
      this.option = {
        xAxis: {
          type: "value",
          name: "XXXX",
          nameTextStyle: {
            fontSize: 14,
          },
          // 刻度线
          axisTick: {
            show: false,
          },
          // 轴线
          axisLine: {},
        },
        yAxis: {
          // 网格线
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          type: "category",
          name: "YYYY",
          nameTextStyle: {
            fontSize: 14,
          },
          data: [0, 20, 40, 60, 80, 100],
        },
        series: [
          // // 构造树状图
          ...this.getSeriesColumnar({
            footage: [10, 20, 30, 40, 50, 60],
          }),
        ],
      };
      this.option && this.myChart.setOption(this.option);
    },
    getSeriesColumnar(obj) {
      let color = ["#FFB95E", "#CAAFD6"];
      let lineBarSeries = [];
      obj.footage.map((v, i) => {
        let colorObj = {};
        let item = {};
        if (i % 2 != 0) {
          colorObj = {
            itemStyle: {
              color: color[0],
            },
          };
        } else {
          colorObj = {
            itemStyle: {
              color: color[1],
            },
          };
        }
        item = {
          data: [v],
          type: "bar",
          barWidth: 25,
          stack: "total",
          label: {
            show: true,
            formatter: "XXXXYYYY",
            position: "inside",
            fontSize: 0, //取消label的显示，通过点击显示
            width: 150, //label的宽
            offset: [0, 0], //不显示时的位置
          },
          labelLine: {//label 线
            show: true,
            lineStyle: {
              color: "#707070",
              with: 2,
              type: "solid",
              opacity: 0,
            },
          },
        };
        lineBarSeries.push({ ...item, ...colorObj });
      });
      return lineBarSeries;
    },
  },
}

效果：

完整方法实现

JavaScript

import * as echarts from "echarts";
export default {
  data() {
    return {
      myEchart: null,
      option: {},
      echartsParams: null,
      showIndex:0,//显示计数
    };
  },
  mounted() {
    this.createEchart();
  },
  methods: {
    createEchart() {
      this.myChart = echarts.init(this.$refs.echart);
      this.option = {
        xAxis: {
          type: "value",
          name: "XXXX",
          nameTextStyle: {
            fontSize: 14,
          },
          // 刻度线
          axisTick: {
            show: false,
          },
          // 轴线
          axisLine: {},
        },
        yAxis: {
          // 网格线
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          type: "category",
          name: "YYYY",
          nameTextStyle: {
            fontSize: 14,
          },
          data: [0, 20, 40, 60, 80, 100],
        },
        series: [
          // // 构造树状图
          ...this.getSeriesColumnar({
            footage: [10, 20, 30, 40, 50, 60],
          }),
        ],
      };
      this.option && this.myChart.setOption(this.option);
      let that = this;
      //点击显示隐藏label
      this.myChart.on("click", { seriesType: "bar" }, function (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", { seriesType: "bar" }, function (params) {
        that.echartsParams = params;
        //添加up事件
        document
          .getElementById("echart")
          .addEventListener("mouseup", that.mouseUpEchart);
      });
    },
    mouseUpEchart(e) {
      let that = this;
      //计算当前鼠标拖动后的位置
      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,
      ];
      //重新set图例
      that.myChart.setOption(that.option);
      //注销事件
      document
        .getElementById("echart")
        .removeEventListener("mouseup", that.mouseUpEchart);
    },
    getSeriesColumnar(obj) {
      let color = ["#FFB95E", "#CAAFD6"];
      let lineBarSeries = [];
      obj.footage.map((v, i) => {
        let colorObj = {};
        let item = {};
        if (i % 2 != 0) {
          colorObj = {
            itemStyle: {
              color: color[0],
            },
          };
        } else {
          colorObj = {
            itemStyle: {
              color: color[1],
            },
          };
        }
        item = {
          data: [v],
          type: "bar",
          barWidth: 25,
          stack: "total",
          label: {
            show: true,
            formatter: "XXXXYYYY",
            position: "inside",
            fontSize: 0,
            width: 150,
            offset: [0, 0],
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: "#707070",
              with: 2,
              type: "solid",
              opacity: 0,
            },
          },
        };
        lineBarSeries.push({ ...item, ...colorObj });
      });
      return lineBarSeries;
    },
  },
};

演示效果