echarts之含百分比的横向柱状图

需求：

鼠标移入：

1、容器：

<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>

2、在methods中

methods:{
	  bar() {
      function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
          if (arr[i] == dst) {
            return i;
          }
        }
        return false;
      }
      var getname = [
        "环境艺术设计",
        "工程造价",
        "汽车电子技术",
        "工程监理",
        "机械制造",
        "计算机应用技术",
        "数控技术",
        "计算机网络技术",
      ]; 
      var getvalue = [20, 182, 191, 234, 290, 330, 310, 234]; 
      // 计算百分比
      function jisuan(arr) {
        // 总和
        var sum = arr.reduce(function (prev, cur, index, array) {
          return prev + cur;
        });
        // 百分比
        let arrPercent = [];
        for (let i = 0, len = arr.length; i < len; i++) {
          arrPercent.push(((arr[i] / sum) * 100).toFixed(2));
        }
        return arrPercent;
      }
      let arr = jisuan(getvalue);
      let option = {
        // backgroundColor: "#000",
        grid: {
          top: "2%", //上边距
          bottom: "2%", //下边距
          right: "2%", //右边距
          left: "2%", //左边距
          containLabel: true, //包含标签
        },

        tooltip: {
          trigger: "axis",
          textStyle: {
            fontWeight: "bolder",
            fontSize: 20,
            fontFamily: "SourceHanSansCN",
          },
          formatter: function (params) {
            return (
              '<span style="color: #fff;">' +
              params[0].name +
              "件数：" +
              params[0].value
                .toString()
                .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
              "件</span>"
            );
          },
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            show: false,
          },
        ],
        yAxis: [
          {
            // inverse: true, //让y轴标签正过来
            data: getname,
            axisLabel: {
              color: "#A0B2D3",
              textStyle: {
                fontWeight: "bolder",
                fontSize: 16,
              },
              interval: 0, //可以设置成 0 强制显示所有标签。
              formatter: function (value, index) {
                // index = contains(getname, value) + 1;
                return [
                  "{a|" + value + "}  " + "{b|" + arr[index] + "%" + "}",
                ].join("");
              },
              rich: {
                b: {
                  width: 60,
                  align: "right",
                  fontFamily: "BoldCondensed",
                  fontWeight: "bolder",
                  fontSize: 16,
                },
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            // inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              // align: "right",
              textStyle: {
                color: "#A0B2D3",
                fontFamily: "BoldCondensed",
                fontWeight: "bolder",
                fontSize: 16,
              },
              interval: 0, //可以设置成 0 强制显示所有标签。
              formatter: function (value, index) {
                return ["{a|" + value + "}  " + "{b|" + "(件)" + "}"].join("");
              },
              rich: {
                a: {
                  width: 30,
                  align: "left",
                  fontFamily: "BoldCondensed",
                  fontWeight: "bolder",
                  fontSize: 16,
                },
              },
            },
            data: getvalue,
          },
        ],
        animation: false,
        series: [
          {
            type: "bar",
            data: getvalue,
            // barWidth: 12,
            itemStyle: {
              normal: {
                color: ["#4F9EFD"],
              },
            },
            // 背景颜色
            showBackground: true,
            backgroundStyle: {
              color: ["#040F1C"],
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("bar"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}

3、在mounted中调用

 mounted() {
    this.bar();
  },

以上