<template>
  <div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div style="font-size: 14px; color: #333333">进度统计</div>
      <div>
        <el-tabs v-model="active">
          <el-tab-pane class="device-pane-font" label="今日" name="fir">
          </el-tab-pane>
          <el-tab-pane class="device-pane-font" label="本月" name="scend">
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="main" style="width: 300px; height: 200px"></div>
  </div>
</template>

<script>
export default {
  name: "echart",
  data() {
    return {
      active: "fir",
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("main"));
    // 绘制图表
    console.log(myChart);
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {
        orient: "horizontal",
        x: "center",
        y: "top",
        itemHeight: 8,
        itemWidth: 8,
        fontSize: "12",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "30px",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        show: false,
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        type: "category",
        data: ["特殊巡视", "远程智巡", "常规巡视"],
      },
      series: [
        {
          barGap: "0%",
          barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
          barWidth: 24, //柱图宽度
          name: "计划中",
          type: "bar",
          stack: "total",
          label: {
            show: true,
            color: "#ffffff",
          },
          itemStyle: {
            normal: {
              //这里是颜色
              color: "#5B8FF9",
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 160, 301, 334, 390, 330, 320],
        },
        {
          barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
          barGap: "0%",
          barWidth: 24, //柱图宽度
          name: "进行中",
          type: "bar",
          stack: "total",
          label: {
            show: true,
            color: "#ffffff",
          },
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            normal: {
              //这里是颜色
              color: "#70E17B",
            },
          },
          data: [120, 132, 160, 134, 90, 230, 210],
        },
        {
          barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
          barGap: "0%",
          barWidth: 24, //柱图宽度
          itemStyle: {
            normal: {
              //这里是颜色
              color: "#5D7092",
            },
          },
          name: "已完成",
          type: "bar",
          stack: "total",
          label: {
            show: true,
            color: "#ffffff",
          },
          emphasis: {
            focus: "series",
          },
          data: [100, 182, 240, 234, 290, 330, 310],
        },
      ],
    });
  },
};
</script>

<style scoped></style>
