<template>
  <div class="learning-effect">
    <div class="learning" ref="learning"></div>
    <div class="education" ref="education"></div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils-o/utils";
import * as commonUtil from "../../utils-o/utils";
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  mounted() {
    commonUtil.resizeHeight();
    this.initEcharts();
  },
  methods: {
    // 初始化图表
    initEcharts() {
      openLoading(this);
      let trainChart = echarts.init(this.$refs["learning"]);
      let educationChart = echarts.init(this.$refs["education"]);
      let trainPara = {
        color: ["#FF9999", "#66CCFF"],
        text: '培训前后知识点掌握情况变化',
        xAxisData:  [
              "转诊与履约",
              "转诊与履约",
              "周三",
              "治疗原则及降压目标",
              "周五",
              "治疗原则及降压目标",
              "周日"
        ],
        seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
        seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
      }
      let educationPara = {
        color: ["#33FFFF", "#FF9999"],
        text: '不同学历培训前后正确率对比',
        xAxisData:  [
              "转诊与履约",
              "转诊与履约",
              "周三",
              "治疗原则及降压目标",
              "周五",
              "治疗原则及降压目标",
              "周日"
        ],
        seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
        seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
      };
      // 显示图表。
      trainChart.setOption(this.echartOptions(trainPara));
      educationChart.setOption(this.echartOptions(educationPara));
      closeLoading(this)
    },
    // 图表的参数
    echartOptions(parameter) {
      let option = {
        color: parameter.color,
        title: {
          text: parameter.text,
          x: "center",
          textStyle: {
            //主标题文本样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["培训前正确率", "培训后正确率"],
          right: 0,
          top: 20
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: parameter.xAxisData,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45"
            }
          }
        ],
        yAxis: [
          {
            name: "比率(%)",
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} %"
            },
            show: true,
            axisLine: {
              // 轴线
              show: false
            }
          }
        ],
        series: [
          {
            name: "培训前正确率",
            type: "bar",
            barGap: "20%",
            barMaxWidth: "50",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}%"
                }
              }
            },
            data: parameter.seriesBeforeDate
          },
          {
            name: "培训后正确率",
            type: "bar",
            barGap: "20%",
            barMaxWidth: "50",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}%" //这是关键，在需要的地方加上就行了
                }
              }
            },
            data: parameter.seriesAfterDate
          }
        ]
      };
      return option;
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
  width: 100%;
  .learning,
  .education {
    margin-top: 40px;
    min-width: 400px;
    height: 400px;
    background: #fff;
  }
}
</style>
