分组柱状图

<template>
  <div class="zhuzhuangtu">
    <div style="display: flex">
      <!-- 饼图 -->
      <div class="echarts">
        <div id="pie" style="width: 500px; height: 300px; margin: 10px"></div>
      </div>
      <!-- 饼图 -->
      <div class="main">
        <div id="main" style="width: 500px; height: 300px; margin: 10px"></div>
      </div>
    </div>
    <div style="margin-top: 10px; display: flex">
      <!-- 饼图 -->
    <div class="echarts">
        <div id="MonthTAerm" style="width: 500px; height: 300px; margin: 10px"></div>
      </div>
      <!-- 饼图实际评课总数量对比 -->
       <div class="main">
        <div id="semester" style="width: 500px; height: 300px; margin: 10px"></div>
      </div> 
    </div>
  </div>
</template>
<script>
const echarts = require("echarts"); //引入图表
export default {
  name: "about",
  data() {
    return {
      pie: {
        title: {
          text: "本周-教研员评课数量",
        },

        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实际评课总数量", "标准评估总数量/天"],
          left: "50",
          bottom: 0,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            name:"时间",
            data: ["周一", "周二", "周三", "周四", "周五"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name:"数量(节)",
          },
        ],
        series: [
          {
            name: "实际评课总数量",
            type: "bar",
            data: [5.0, 6.04, 6.69, 9.0, 10],
            markPoint: {
              //   data: [
              //     { type: "max", name: "最大值" },
              //     { type: "min", name: "最小值" },
              //   ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "标准评估总数量/天",
            type: "bar",
            data: [8.0, 8.0, 8.0, 8.0, 8.0],
            markPoint: {
              data: [{ name: "年最高", value: 10, xAxis: 7, yAxis: 10 }],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      },
      MonthTAerm: {
        title: {
          text: "本学期-教研员评课数量",
        },

        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实际评课总数量", "标准评估总数量/学期"],
          left: "50",
          bottom: 0,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            name:"时间",
            data: ["第一月", "第二月", "第三月", "第四月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量(节)",
            min: 0,
            max: 200,
            axisLabel: {
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("0");
                } else if (value <= 50) {
                  texts.push("50");
                } else if (value <= 100) {
                  texts.push("100");
                } else if (value <= 150) {
                  texts.push("150");
                } else {
                  texts.push("200");
                }
                return texts;
              },
            },
          },
        ],
        series: [
          {
            name: "实际评课总数量",
            type: "bar",
            data: [180, 190, 170, 160],
            markPoint: {
              //   data: [
              //     { type: "max", name: "最大值" },
              //     { type: "min", name: "最小值" },
              //   ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "标准评估总数量/学期",
            type: "bar",
            data: [160,160,160,160],
            markPoint: {
              data: [{ name: "年最高", value: 10, xAxis: 7, yAxis: 10 }],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      },
      main: {
        title: {
          text: "本周-教研员评课数量",
        },

        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实际评课总数量", "标准评估总数量/周"],
          left: "50",
          bottom: 0,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
              name:"时间",
            data: ["周一", "周二", "周三", "周四"],
          },
        ],
        yAxis: [
          {
            type: "value",
             name:"数量(节)",
            min: 0,
            max: 80,
            axisLabel: {
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("0");
                } else if (value <= 20) {
                  texts.push("20");
                } else if (value <= 40) {
                  texts.push("40");
                } else if (value <= 60) {
                  texts.push("60");
                } else {
                  texts.push("80");
                }
                return texts;
              },
            },
          },
        ],
        series: [
          {
            name: "实际评课总数量",
            type: "bar",
            data: [50, 60, 70, 40],
            markPoint: {
              //   data: [
              //     { type: "max", name: "最大值" },
              //     { type: "min", name: "最小值" },
              //   ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "标准评估总数量/周",
            type: "bar",
            data: [40, 40, 40, 40, 40],
            markPoint: {
              data: [{ name: "年最高", value: 80, xAxis: 7, yAxis: 80 }],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      },
    
       semester: {
        title: {
          text: "实际评课总数量对比/学期",
        },

        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实际评课总数量", "标准评估总数量/学期"],
          left: "50",
          bottom: 0,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
              name:"时间",
            data: ["上学期","本学期"],
          },
        ],
        yAxis: [
          {
            type: "value",
             name:"数量(节)",
            min: 0,
            max: 680,
            axisLabel: {
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("0");
                } else if (value <= 400) {
                  texts.push("400");
                } else if (value <= 500) {
                  texts.push("500");
                } else if (value <= 600) {
                  texts.push("600");
                } else if(value<=680){
                  texts.push("680");
                }
                return texts;
              },
            },
          },
        ],
        series: [
          {
            name: "实际评课总数量",
            type: "bar",
            data: [650,670],
            markPoint: {
              //   data: [
              //     { type: "max", name: "最大值" },
              //     { type: "min", name: "最小值" },
              //   ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "标准评估总数量/学期",
            type: "bar",
            data: [640,640],
            // markPoint: {
            //   data: [{ name: "年最高", value: 80, xAxis: 7, yAxis: 80 }],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }],
            // },
          },
        ],
      },
    };
  },
  methods: {
    initEcharts() {
      let pie = echarts.init(document.getElementById("pie"));
      pie.setOption(this.pie);
      let main = echarts.init(document.getElementById("main"));
      main.setOption(this.main);
      let MonthTAerm = echarts.init(document.getElementById("MonthTAerm"));
      MonthTAerm.setOption(this.MonthTAerm);
      let semester = echarts.init(document.getElementById("semester"));
      semester.setOption(this.semester);
    },
  },
  mounted() {
    this.initEcharts();
  },
};
</script>
<style  scoped>
.zhuzhuangtu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>