Echarts在线免费图表

 
                 const datas = [
        { name: "路基报表", value: "58", value1: "158111", value2: "82311" },
        { name: "填方", value: "76", value1: "16522", value2: "9873" },
        { name: "挖方", value: "98", value1: "5823", value2: "5500" },
        { name: "路基防护", value: "77", value1: "3244", value2: "2355" },
        { name: "路基封顶", value: "85", value1: "15344", value2: "12009" },
      ];
      const xData = datas.map((item) => item.name);
      const yData = datas.map((item) => item.value);
      const zData = datas.map((item) => item.value2);
      const pData = datas.map((item) => item.value1);
      const max = 100;
      const maxData = [max, max, max, max, max, max, max, max, max, max]; //控制左边名字显示的数量
option = {
    grid: {
          left: "20%",
          right: "15%",
          bottom: "10%",
          top: "4%",
          containLabel: false,
        },

        xAxis: [
          {
            show: false,
          },
          {
            show: false,
          },
        ],
        yAxis: [
          {
            show: true,
            data: yData,
            offset: 0,
            position: "right",
            axisLabel: {
              lineHeight: 0,
              verticalAlign: "bottom",
              fontSize: 14,
              color: "#e6a635",
              formatter: "{value}%",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "进度",
            show: true,
            type: "bar",
            barGap: "-100%",
            xAxisIndex: 1,
            barWidth: 10,
            itemStyle: {
              borderRadius: 4,
              color: (params) => {
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#b1ecdb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#68d2b0", // 0% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                };
              },
            },
            label: {
              show: false,
            
            },
            labelLine: {
              show: false,
            },
            z: 2,
            data: yData,
            animationDelay: 1000,
            animationDuration: 1000,
          },
         
          {
            name: "类型",
            z: 1,
            show: true,
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 4,
              color: "#dfdde0",
            },
            label: {
              show: true,
              verticalAlign: "middle",
              position: "left",
              fontSize: 14,
              color: "#000",
              formatter: function(data) {
                return xData[data.dataIndex];
              },
            },
            data: maxData,
          },
        ],
};