癮心戒

<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);
          });
      },