VUE echarts 横向条形图X轴按总数据的百分比显示

要求所有数据的总和作为100% 显示图表数据

比如第4条数据值是67，他们总和是67+3+4+4   按总数计算他所占比就是86%  （这意思）

∵接口数据返回就是 {名:值}{名:值}的形式

∴代码

initChartOne() {
      var myChart = echarts.init(document.querySelector(".line-chart6"));
      var bardate = [{
            //this.allNum就是4个值的总和 计算百分比
            valueFat: this.duped,
            value:(this.allNum===0 ? 0 : this.duped / this.allNum * 100).toFixed(0) ,
            itemStyle: {
              color: '#ff0000'
            }
        }, {
          valueFat: this.highRisk,
          value: (this.allNum===0 ? 0 : this.highRisk / this.allNum * 100).toFixed(0),
          itemStyle: {
            color: '#ff8800'
          }
        }, {
          valueFat: this.mediumRisk,
          value: (this.allNum===0 ? 0 : this.mediumRisk / this.allNum * 100).toFixed(0),
          itemStyle: {
            color: '#ffee00'
          }
        }, {
          valueFat: this.lowRisk,
          value: (this.allNum===0 ? 0 : this.lowRisk / this.allNum * 100).toFixed(0),
          itemStyle: {
            color: '#00aeff'
          }
        }]
        var date = bardate.reverse()
      var option = {
        grid: {
          left: "4%",
          right: "20%",
          bottom: "20%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          formatter: '{b}:{c}%',
          show: true, //显示提示框
        },
        xAxis: {
          type: "value",
          show:true,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#0655ff8a",
            },
          },
          axisTick: {
            show: false,
          },
          max:100,//X轴最大显示值
          min:0,
          axisLabel: {
            color: "#fff",
            formatter:`{value}`+'%'
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
          },
          axisLine:{
            show:true,
            lineStyle:{
                color:"#0655ff8a",
            }
          },
          axisTick: {
            show: false,
          },
          data: [
            "低",
            "中",
            "高",
            "当",
          ],
        },
        series: [
          {
            barWidth: '30%',
            data: date,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#253E7D",
              barBorderRadius: [0,50,50,0],
            },
            label: {
              normal: {
                show: true, // 开启显示
                position: ['390','0'], // 让数值在右侧right显示
                fontSize: 12,
                formatter:function (params) {
                  return params.data.valueFat
                }
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#39ACE2",
                    },
                    {
                      offset: 1,
                      color: "#14FCFC",
                    },
                  ],
                  false
                ),
                barBorderRadius: [0,50,50,0],
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },