<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>
