如何把borderColor边框颜色设置成与进度条一样的颜色？

Question

如何把borderColor边框颜色设置成与进度条一样的颜色

<template>
  <div class="region-ranking">
    <div id="regionRanking" style="height: 220px; width: 100%"></div>
  </div>
</template>
<script>
import "echarts-gl";
export default {
  props: {
    // dataList: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
  },
  data() {
    return {
      myChart: null,
      option: null,
      color: [
        "#FC619D",
        "#FF904D",
        "#48BFE3",
        "#21BF57",
        "#56D0E3",
        "#1089E7",
        "#F8B448",
        "#F57474",
      ],
      dataList: [
        { status: "路南分局", percent: "5", value: "5", total: 100 },
        { status: "路北分局", percent: "15", value: "15", total: 100 },
        { status: "丰润区局", percent: "32", value: "32", total: 100 },
        { status: "开平分局", percent: "23", value: "23", total: 100 },
        { status: "遵化市局", percent: "18", value: "18", total: 100 }
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(
        document.getElementById("regionRanking")
      );
      // 传入数据生成 option
      this.option = this.setOption();
      this.myChart.setOption(this.option);
    },
    // 配置option
    setOption() {
      let echarts = this.$echarts;
      let dataList = this.dataList;
      let color = this.color;
      let option = {
        grid: {
          //                    top:30,
          left: 100,
          right: 80,
          top: 5
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(128, 128, 128, 0.0001)",
            },
          },
          formatter: "{b0}: {c0}%",
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 70,
              textStyle: {
                align: "left",
                fontSize: 14,
                color: "#fff",
              },
            },
            data: this.getArrByKey(dataList, "status"),
          },
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: "#fff",
              },
              formatter: function (value, index) {
                return (
                  dataList[index].percent
                );
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: this.getArrByKey(dataList, "percent"),
          },
        ],
        series: [
          {
            name: "数据内框",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: 40,
                color: (val) => {
                  if (val.dataIndex < 7) {
                    return color[val.dataIndex];
                  } else {
                    return "#1990FF";
                  }
                },
              },
            },
            barWidth: 10,
            data: this.getArrByKey(dataList, "percent"),
          },
          {
            name: "外框",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: 40,
                color: "transparent",
                borderColor: 'green'
              },
            },
            barGap: "-100%",
            z: 0,
            barWidth: 10,
            data: this.getArrByKey(dataList, "total"),
          },
        ],
      };
      return option;
    },
    // 配置数据
    getArrByKey(data, k) {
      let key = k || "value";
      let res = [];
      if (data) {
        data.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    },
  },
};
</script>
<style scoped lang="scss">
.region-ranking {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
</style>

Answer 1