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) {
              var relVal = par[0].axisValue + '<br/>';
              for (var i = 0; i < par.length; i++) {
                var o = par[i];
                relVal += o.seriesName + '：' + (o.value == null ? '--' : o.value + '') + '座'+
                ('<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: "总值",
              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思路应该都差不多（暂时没有测试）；