[游戏开发]echarts柱状图改进度图常用配置

这是改造后的效果:

?具体代码：

 init3() {
      var chartDom = document.getElementById("mountNode3");
      var myChart = echarts.init(chartDom);
      const myColor = ["#1089E9", "#1089E9", "#1089E9", "#1089E9", "#1089E9"];

      var option;
      option = {
        grid: {
          top: "30%",
          left: "22%",
          bottom: "10%",
        },
        xAxis: {
          // 不显示x轴相关信息
          show: false,
        },
        yAxis: [
          {
            type: "category",
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              color: "#fff",
            },
            data: ["食堂", "科研楼", "教学楼", "宿舍楼", "专家楼"],
          },
          {
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            show: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              // color: "#fff",
              show: false,
            },
            data: [500, 500, 500, 500, 500],
          },
        ],
        series: [
          {
            // 第一组柱子（条状）
            name: "条",
            type: "bar",
            // 柱子之间的距离
            barCategoryGap: 10,
            // 柱子的宽度
            barWidth: 10,
            // 层级 相当于z-index
            yAxisIndex: 0,
            // 柱子更改样式
            itemStyle: {
              barBorderRadius: 20,

              // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              color: function (params) {
                var index = params.dataIndex;
                var colorList = [
                  // 渐变颜色的色值和透明度
                  // 透明度从0
                  [
                    "#01c8ff",
                    "#01c8ff",
                    "#01c8ff",
                    "#01c8ff",
                    "#01c8ff",
                    "#01c8ff",
                    "#01c8ff",
                  ],
                  [
                    "#1c74d1",
                    "#1c74d1",
                    "#1c74d1",
                    "#1c74d1",
                    "#1c74d1",
                    "#1c74d1",
                  ], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
                ];
                return {
                  colorStops: [
                    {
                      offset: 0.3, // 颜色的开始位置
                      color: colorList[0][index], // 0% 处的颜色
                    },
                    {
                      offset: 0.6, // 颜色的结束位置
                      color: colorList[1][index], // 100% 处的颜色
                    },
                  ],
                };
              },
            },
            data: [300, 129, 120, 121, 100],
            // 显示柱子内的百分比文字
            // label: {
            //   show: true,
            //   position: "inside",
            //   // {c} 会自动解析为数据（data内的数据）
            //   formatter: "{c}人",
            // },
          },
          {
            // 第二组柱子（框状 border）
            name: "框",
            type: "bar",
            // 柱子之间的距离
            barCategoryGap: 10,
            // 柱子的宽度
            barWidth: 12,
            // 层级 相当于z-index
            yAxisIndex: 1,
            // 柱子修改样式
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 1,
              barBorderRadius: 15,
            },
            data: [500, 500, 500, 500, 500],
          },
        ],
      };
      option && myChart.setOption(option);
    },