ECharts堆叠柱状图动态数据label显示总和和this指向问题

1、当数据为动态渲染时，获取series的数据，然后在最后一项添加label对象

let option;
// 图标参数配置
let xData = [];
let legendData = [];
let seriesData = [];
// 只取厂家名字（因为每一项的名字都返回相同的，所以只取其中一项即可）
data[0].keyValues.forEach(item => {
  let dataItem = {
    data: [],
    name: "",
    type: "bar",
    barWidth: 10,
    stack: "厂家",
    emphasis: {
      focus: "series"
    }
  };
  dataItem.name = item.name;
  legendData.push(item.name); // 图表头部厂家数据
  seriesData.push(dataItem); // series每一个厂家
})
data.forEach(item => { // 拿到数据的每一项
  xData.push(item.name); // 横轴显示的数据
  item.keyValues.forEach((it, ins) => { // 循环每一项的keyValues
    seriesData[ins].data.push(it.val); // series对应项的对应data数据
  })
});
// 最后一项添加label对象
let lastItem = {
  show: true,
  position: 'top',
  color: 'green',
  formatter: function (params){
    return params.value
  } 
}
seriesData[seriesData.length - 1].label = lastItem

2、计算总和

option = {
 tooltip: {
    trigger: "axis",
    // trigger: "item",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow",
    },
  },
  legend: {
    data: legendData,
    // icon: "circle",
    type: "scroll",
    width: "90%",
  },
  grid: {
    top: "15%",
    left: "0%",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: xData,
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: seriesData
};
// 获取配置中的series数组
var series = option["series"];
var fun = function (params) {
  var datavalue = 0;
  for (var i = 0; i < series.length; i++) {
    datavalue += series[i].data[params.dataIndex]
  }
  return datavalue;
}
series[series.length - 1]["label"]["formatter"] = fun;
this.$nextTick(() => {
  this.myChart.setOption(option);
});

3、切换图例选中状态后的事件(官网：https://echarts.apache.org/zh/api.html#%2Fsearch%2Flegendselectchanged) 结合events（官网：https://echarts.apache.org/zh/api.html#events）

this.myChart.on("legendselectchanged", function(obj) {
console.log(obj);
  let selObj = obj.selected;
  let selArr = [];
  for (var key in selObj) {
    if (selObj[key]) {
      for (let i = 0; i < series.length; i++) {
        var changename = series[i]["name"];
        if (changename == key) {
          selArr.push(i);
        }
      }
    }
  }
  var fun =function (params) {
    var datavalue = 0;
    for (let i = 0; i < selArr.length; i++) {
      for (let j = 0; j < series.length; j++) {
        if (selArr[i] == j) {
          datavalue += series[j].data[params.dataIndex]
        }
      }
    }
    return datavalue
  }
  for (let i = 0; i < series.length; i++) {
    series[i]["label"]["show"] = false;
  }
  for (let i = series.length - 1; i >= 0; i--) {
    var name = series[i]["name"];
    if (obj["selected"][name]) {
      series[i]["label"]["formatter"] = fun
      series[i]["label"]["show"] = true
      break;
    }
  }
  this.myChart.setOption(option);
})

4、点击图例时，报错了：Uncaught TypeError: Cannot read property ‘setOption’ of undefined （this指向问题，改为箭头函数即可）

5、还有一个细节报错，需要在series的每一项添加label属性

let dataItem = {
 data: [],
 name: "",
 type: "bar",
 barWidth: 10,
 stack: "厂家",
 emphasis: {
   focus: "series"
 },
 label: {
  show: false,
}

6、 完整代码如下：

getOption(data) {
  // var myChart = this.$echarts.init(document.getElementById("echartBox"));
  let option;
  // 图标参数配置
  let xData = [];
  let legendData = [];
  let seriesData = [];
  // 只取厂家名字（因为每一项的名字都返回相同的，所以只取其中一项即可）
  data[0].keyValues.forEach(item => {
    let dataItem = {
      data: [],
      name: "",
      type: "bar",
      barWidth: 10,
      stack: "厂家",
      emphasis: {
        focus: "series"
      },
      label: {
        show: false,
      }
    };
    dataItem.name = item.name;
    legendData.push(item.name); // 图表头部厂家数据
    seriesData.push(dataItem); // series每一个厂家
  })
  data.forEach(item => { // 拿到数据的每一项
    xData.push(item.name); // 横轴显示的数据
    item.keyValues.forEach((it, ins) => { // 循环每一项的keyValues
      seriesData[ins].data.push(it.val); // series对应项的对应data数据
    })
  });
  let lastItem = {
    show: true,
    position: 'top',
    color: 'green',
    formatter: function (params){
      return params.value
    } 
  }
  seriesData[seriesData.length - 1].label = lastItem
  option = {
    tooltip: {
      trigger: "axis",
      // trigger: "item",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow",
      },
    },
    legend: {
      data: legendData,
      // icon: "circle",
      type: "scroll",
      width: "90%",
    },
    grid: {
      top: "15%",
      left: "0%",
      right: "0%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: seriesData
  };
  // 获取配置中的series数组
  var series = option["series"];
  // 第一次使用的
  var fun = function (params) {
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      datavalue += series[i].data[params.dataIndex]
    }
    // 返回总数
    return datavalue;
  }
  // 赋值最后一项的formatter
  series[series.length - 1]["label"]["formatter"] = fun;
  // 判断，预防报错
  if(!this.myChart) {
    return
  } else {
    this.$nextTick(() => {
      this.myChart.setOption(option);
    });
  }
  if(!this.myChart) {
    return
  } else {
    // 切换图例选中状态后的事件 https://echarts.apache.org/zh/api.html#%2Fsearch%2Flegendselectchanged
    this.myChart.on("legendselectchanged", obj => {
      console.log(obj);
      // 获取点击的对象
      let selObj = obj.selected;
      let selArr = [];
      for (var key in selObj) {
        if (selObj[key]) {
          for (let i = 0; i < series.length; i++) {
            var changename = series[i]["name"];
            if (changename == key) {
              selArr.push(i);
            }
          }
        }
      }
      var fun =function (params) {
        var datavalue = 0;
        // 与name数组对比，相等则相加
        for (let i = 0; i < selArr.length; i++) {
          for (let j = 0; j < series.length; j++) {
            if (selArr[i] == j) {
              datavalue += series[j].data[params.dataIndex]
            }
          }
        }
        return datavalue
      }
      for (let i = 0; i < series.length; i++) {
        series[i]["label"]["show"] = false;
      }
      for (let i = series.length - 1; i >= 0; i--) {
        var name = series[i]["name"];
        if (obj["selected"][name]) {
          series[i]["label"]["formatter"] = fun
          series[i]["label"]["show"] = true
          break;
        }
      }
      this.$nextTick(() => {
        this.myChart.setOption(option);
      });
    })
  }
},

声明：本文转载 https://www.cnblogs.com/huaxiaguyuan/p/11097474.html

自律，不分年龄！