Vcharts 条形堆积图右侧展示总数值

需要实现效果：

思路：Vcharts图表属性extend只能写现有的数据样式，那么我是不是可以在data位置给extend的series自定义追加类型，获取接口数据的长度通过长度给自定义的类型，追加对应长度的data数组，在设置新增的类型样式；

<ve-bar :data="ranKingBarData" :extend="ranKingBarExtend" :legend-visible="false" height="100%"width="100%""></ve-bar>




ranKingBarData: {}, //条形图数据
        ranKingBarExtend: { //条形图extend
          legend: {
            right: '2%',
            bottom: '15%',
            orient: "vertical", //图例垂直展示
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            top: '5%',
            bottom: '2%',
            left: '4%',
            right: '9%'
          },
          tooltip: {
            trigger: 'axis',
　　　　　　　formatter: function(par) {

　　　　　　　　　　console.log(par)
　　　　　　　　　　var relVal = par[0].axisValue + '<br/>';
　　　　　　　　　　for (var i = 0; i < par.length; i++) {
　　　　　　　　　　　　var o = par[i];
　　　　　　　　　　　　if(o.seriesName != "") { //判断name==空的时候悬浮不展示（这个判断的意思就是，我新增自定义label右侧的数据类型不展示出来，只展示原有的数据）
　　　　　　　　　　　　　　relVal += '<span style="width:.85rem; height:.85rem;float:left;border-radius:100%!important; margin:.3125rem .3125rem 0 0;background-color:' +
　　　　　　　　　　　　　　o.color +
　　　　　　　　　　　　　　';">&nbsp;&nbsp;</span>' + o.seriesName + '：' + (o.value == null || o.value == undefined? '--' : o.value + '') + ' MW'+ '<br/>';
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　　　return relVal;
　　　　　　　　},

            textStyle: {
              align: 'left'
            },
            confine: true
          },
          xAxis: {
            name:'MW',
            // nameTextStyle: {
            //   color: '#FFFFFF',
            //   padding: [0, 0, -10, 0],
            // fontSize: 12
            // },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#A2A2A2',
                fontSize: 12
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              // interval: 0,
              formatter: function(value, index) {
                return value.toString() + '';
              },
              textStyle: {
                fontSize: 12
              }
            }
          },
          yAxis: {
            nameTextStyle: {
              color: '#FFFFFF',
              padding: [0, 0, -10, 0],
            fontSize: 12
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#A2A2A2'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12
              }
            }
          },
          stack:{},
          series: {
            type: 'bar',
            stack: "1",
            barMaxWidth: '40%'
          },
          'xAxis.1.show': false
        },

//获取条形图数据函数

 getRanKingBarData(url) {
        this.axios({
            method: "post",
            url: '/sgeri/Cn/Xnycndspm',
            data: {
              "dt":"2024-02-20"
            }
          })
          .then(res => {
            console.log(res)
            // 接口获取条形堆积图数组 --数据结构为正常的vcharts官网结构，在这里就不一一细写
            this.ranKingBarData = res.data;
            // 条形堆积图 在最右侧展示总数值
            var dataArray = []; //图表label总值数组
            let arra = []; //新增series的data数组
            let that = this;
            // 遍历接口获取的条形图数据
            that.ranKingBarData.rows.forEach((e,index)=>{ 
              // 重构数组 -接口获取的条形图数据对应新声明的变量数组下标，字面量为0
              arra[index] = 0;
            })
            // 给条形图的extend属性显示总值，追加series（举例：原数据为2条，那么下方就是2，因为是从0开始）
            this.ranKingBarExtend['series.2'] = ({
              type: 'bar',
              name: "", //name最好是为空，否则如果图例展示，图例上就会有新增的这个name名字，为空的话就没有
              stack: "1",
              barMaxWidth: '40%',
              data: arra,
              label: {
                  show: true,
                  position: 'right',
                  color: '#fff',
                  fontSize: 12,
                  formatter: function(par){
                    // 循环遍历接口数组，累加获取总值
                      that.ranKingBarData.rows.forEach((e,index)=>{
                      if(e.地市 == par.name) { //通过label判断图表对应数组的数据，然后相加，得出总值结果
                        let data = (e.上月累计==null?0:e.上月累计) + (e.本月新增==null?0:e.本月新增);
                        let isTotal = (parseInt(data * 100) / 100).toFixed(0);
                        dataArray.push(data)
                      }
                    }) 
                    return dataArray[par.dataIndex] + " MW"
                  }
              },
              itemStyle: {
                color: 'transparent'
              }
            })
            console.log(this.ranKingBarExtend)
          })
          .catch(err => {
            console.log(err);
          });
      },

此代码在Vcharts是可以实现，echarts思路应该都差不多（暂时没有测试）；