echarts横向多组柱状图（百分比显示）

 成品图：

代码如下：

var chartDom = document.getElementById("middle_left");
      var myChart = this.$echarts.init(chartDom);
      let yData = [
        "健康行为与生活方式",
        "生长发育与青春期保健",
        "心理健康",
        "疾病预防",
        "安全应急与避险",
        "社会适应与环境健康"
      ];
      let allData = [82, 34, 90, 14, 11, 30];
      let girlData = [93, 34, 10, 11, 13, 61];
      let boyData = [93, 34, 10, 12, 14, 68];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          icon: "square",
          left: "0",
          data: ["一年级全体", "一年级女生", "一年级男生"],
          textStyle: {
            color: "#d9d9d9" // 图例文字颜色
          }
        },
        grid: {
          left: -100,
          right: "8%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          splitNumber: 4,
          max: 100,
          min: 0,
          interval: 20,
          // boundaryGap: [0, 0.01],
          axisTick: { show: false },
          axisLabel: {
            formatter: function(value) {
              return value.toFixed(2) + "%";
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#d9d9d9"
            }
          }
          // splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: yData,
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "#d9d9d9"
            }
          },
          axisLabel: {
            margin: 130,
            textStyle: {
              align: "left"
            }
          }
        },
        series: [
          {
            name: "一年级全体",
            type: "bar",
            data: allData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#d91e1c" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#d91e1c" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            label: {
              show: true,
              offset: [10, 0],
              position: "right",
              textStyle: {
                color: "#686868",
                fontSize: 12
              },
              formatter: function(oItem) {
                console.log(allData);
                let total = 0;
                allData.map(item => {
                  total += item;
                });
                console.log(total);
                console.log(oItem);
                var nIdx = oItem.dataIndex; //获取索引求各项的百分比
                // return (oItem.value / allData[nIdx] * 100).toFixed(2) + '%';
                return oItem.value.toFixed(2) + "%";
              }
            }
          },
          {
            name: "一年级女生",
            type: "bar",
            data: girlData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#cb93ff" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#cb93ff" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            label: {
              show: true,
              offset: [10, 0],
              position: "right",
              textStyle: {
                color: "#686868",
                fontSize: 12
              },
              formatter: function(oItem) {
                console.log(allData);
                let total = 0;
                allData.map(item => {
                  total += item;
                });
                console.log(total);
                console.log(oItem);
                var nIdx = oItem.dataIndex; //获取索引求各项的百分比
                // return (oItem.value / allData[nIdx] * 100).toFixed(2) + '%';
                return oItem.value.toFixed(2) + "%";
              }
            }
          },
          {
            name: "一年级男生",
            type: "bar",
            data: boyData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#73deb3" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#73deb3" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            label: {
              show: true,
              offset: [10, 0],
              position: "right",
              textStyle: {
                color: "#686868",
                fontSize: 12
              },
              formatter: function(oItem) {
                console.log(allData);
                let total = 0;
                allData.map(item => {
                  total += item;
                });
                console.log(total);
                console.log(oItem);
                var nIdx = oItem.dataIndex; //获取索引求各项的百分比
                // return (oItem.value / allData[nIdx] * 100).toFixed(2) + '%';
                return oItem.value.toFixed(2) + "%";
              }
            }
          }
        ]
}复制