<template>
  <div id="main4" style="width: 100%; height: 100%"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "lineChart",
  mounted() {
    this.showMain();
  },
  methods: {
    showMain() {
      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("main4"));

      var myColor = ["rgb(248, 72, 3)", "#FD7700", "#0BC3FF", "#01E416"];

      var option = {
    grid: {
      top: "0%",
      left: "25%",
      bottom: "0%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: "category",
        // inverse: true,
        data: ["未处理数", "审核未通过", "超时完成", "已完成"],
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      },
      {
        data: [60, 180, 30, 260],
        inverse: false,
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        data: [12, 36, 2, 50],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
          
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
            // params 传进来的是柱子对象
            // console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
          show: true,
          position: "right",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 10,
        yAxisIndex: 1,
        data: [100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 1,
        }
      }
    ]
  };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>