eharts横向柱状图每个类别三个柱状图属性带百分比，柱状图颜色设置为边框+背景色，值通过父传子props传值

父组件

 <Status:statusAndFlow="this.statusAndFlow"/>
   //SCRIPT
<script>
import * as API_TaskOverview from "@/api/TaskOverview";
export default {
  components: {
    Status,
  },
 data() {
	return {
		statusAndFlow: [], // 任务流程
	 };
}
  },
  methods：{
 // 请求接口
   async getTaskOverview(val1, val2) {
     let { success, entity } = await  	API_Task.getTask(query);
       if (success) {
         this.statusAndFlow = entity.statusAndFlow;
       }
   }
  }
  
  </script>

**

## 子组件

**
<template>
 <div
        id="effecEcharts"
        ref="Echartscolumn"
        style="display: flex; height: 100%; width: 100%"
      ></div>
      </template>
      <script>
import * as echarts from "echarts";
export default {
  props: {
    statusAndFlow: {
      type: Array,
    },
  },
  data() {
    return {
      statusAndFlowData: [],
    };
  },
  watch: {
    statusAndFlow: {
      handler(val) {
        this.statusAndFlowData = val;
        val.map((item) => console.log(item.minorMajor, "111"));
        console.log(val, "state");
        this.getStatus();
      },
    },
  },
  mounted() {},
  methods: {
    getStatus() {
      // 初始化 echarts 实例
      let myChart = echarts.init(document.getElementById("effecEcharts"));

      // 配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        responsive: true,
        // legend: [
        //   {
        //     data: ["上周"],
        //     top: "3%",
        //     left: "0%",
        //     textStyle: {
        //       color: "#35C6A4",
        //     },
        //   },
        //   {
        //     data: ["本周"],
        //     top: "3%",
        //     left: "17%",
        //     textStyle: {
        //       color: "#23B9FF",
        //     },
        //   },
        // ],
        grid: {
          left: "0%",
          right: "5%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitArea: { show: false },
        },
        yAxis: {
          type: "category",
          data: this.statusAndFlowData.map((item) => item.minorMajor),
          axisLine: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          splitArea: { show: false },
          inverse: true, //正序显示
          axisLabel: {
            textStyle: {
              color: "#DFF0FF",
              fontSize: "14px",
            },
          },
        },
        series: [
          {
            name: "完成", //完成超过一周
            type: "bar",
            data: this.statusAndFlowData.map((item) => item.outWeek),
            large: true,
            itemStyle: {
              color: "rgba(61, 252, 205, 0.32)",
              borderColor: "rgba(101, 232, 216, 1)",
              borderWidth: 1,
            },
            barWidth: 12,
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
              textStyle: {
                fontWeight: 600,
                color: "rgba(101, 232, 216, 1)",
              },
            },
            barCategoryGap: "30%",
            barGap: "80%",
          },
          {
            name: "逾期", //未完成
            type: "bar",
            data: this.statusAndFlowData.map((item) => item.undone),
            large: true,
            itemStyle: {
              color: "rgba(179, 8, 19, 0.32)",
              borderColor: "rgba(179, 8, 19, 1)",
              borderWidth: 1,
            },
            barWidth: 12,
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
              textStyle: {
                fontWeight: 600,
                color: "rgba(179, 8, 19, 1)",
              },
            },
            barCategoryGap: "30%",
            barGap: "80%",
          },
          {
            name: "提醒", //完成一周内
            type: "bar",
            data: this.statusAndFlowData.map((item) => item.inWeek),
            large: true,
            itemStyle: {
              color: "rgba(231, 179, 77, 0.32)",
              borderColor: "rgba(231, 179, 77, 1)",
              borderWidth: 1,
            },
            barWidth: 12,
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
              textStyle: {
                fontWeight: 600,
                color: "rgba(231, 179, 77, 1)",
              },
            },
            barCategoryGap: "30%",//每个属性内的柱状图间隙
            barGap: "80%",//不同柱状图不同属性的间隙
          },
        ],
      };
      // 使用配置项显示图表
      myChart.setOption(option);
    },
  },
};
</script>