<template>
    <div id="entryNumberBar"></div>
</template>

<script>
export default {
    props: ['echartData'],
  data() {
    return {
    };
  },
  mounted() {
    this.drawLine();

  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myBar = this.$echarts.init(document.getElementById("entryNumberBar"));

      // 指定图表的配置项和数据
      var option = {
        legend: {
          //  data:['班级进线人数','班级总人数']
          textStyle: {
            color:"#e4eadb"
          }
        },
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "axis", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
            shadowStyle: {
              color: "rgba(128,128,128,0.1)"
            }
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#fff"
          },
          formatter: function (params) {
            return params[0].name + '<br>' + params[0].marker + params[0].seriesName + ':' + params[0].data + '<br>'
              + params[1].marker + params[1].seriesName + ':' + params[1].data + '<br>'
             + params[2].marker + params[2].seriesName + ':' + params[2].data + '%'
          }
        },
        // ---- gird区域 ---
        grid: {
          show: false,
          containLabel: true,
          height: 460,
          width: "90%",
          x2: "5%",
          tooltip: {
            show: true,
            trigger: "axis", // 触发类型
            textStyle: {
              color: "#666"
            },
          }
        },
        dataZoom: [{
            "show": true,
            "height": 10,
            "xAxisIndex": [
              0
            ],
            bottom: 10,
            "start": 0,
            "end": 100,
             handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
            handleSize: '160%',
            handleStyle: {
              color: "#d3dee5",

            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 0,
            "end": 100
          }],
        xAxis: {
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          type: "category", // 轴类型， 默认为 'category'
          name: "月份", // 轴名称
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            color: "transparent",
            padding: [5, 0, 10, -5]
          },
          nameGap: 35, // 坐标轴名称与轴线之间的距离
          nameRotate: 50, // 坐标轴名字旋转
          axisLine: {
            show: false, // 是否显示
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            lineStyle: {
              color: "#6aabef",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            // 坐标轴 刻度
            show: false, // 是否显示
            inside: true, // 是否朝内
            length: 3, // 长度
            lineStyle: {
              // 默认取轴线的样式
              color: "#989898",
              width: 2,
              type: "solid"
            }
          },
          axisLabel: {
            // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            margin: 15,
            rotate: 45,
            color: "#989898", // 默认取轴线的颜色,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color:"#595959"
            }
          },
          splitArea: {
            show: false // 是否显示，默认为false
          },
          data:this.echartData.map(item => item.name)
        },
        yAxis: [
        { show: true, // 是否显示
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            color: "#fff",
            padding: [5, 0, 0, 5] // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 270, // 坐标轴名字旋转

          axisLine: {
            show: false, // 是否显示
            lineStyle: {
              color: "#595959",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false, // 是否显示
            inside: true, // 是否朝内
            length: 3, // 长度
            lineStyle: {
              color: "#989898", // 默认取轴线的颜色
              width: 2,
              type: "solid"
            }
          },
          axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#989898", // 默认轴线的颜色
            fontSize: 12,
            fontFamily: "Microsoft YaHei"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4c504a",
              width: 0.5,
              type: "solid"
            },
           axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#fff", // 默认轴线的颜色
            fontSize: 12,
            fontFamily: "Microsoft YaHei"
          },
          }
        },{ show: true, // 是否显示
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            color: "#fff",
            padding: [5, 0, 0, 5] // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 270, // 坐标轴名字旋转

          axisLine: {
            show: false, // 是否显示
            lineStyle: {
              color: "#595959",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false, // 是否显示
            inside: true, // 是否朝内
            length: 3, // 长度
            lineStyle: {
              color: "#989898", // 默认取轴线的颜色
              width: 2,
              type: "solid"
            }
          },
          axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#989898", // 默认轴线的颜色
            fontSize: 12,
            fontFamily: "Microsoft YaHei"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4c504a",
              width: 0.5,
              type: "solid"
            },
           axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#fff", // 默认轴线的颜色
            fontSize: 12,
            fontFamily: "Microsoft YaHei"
          },
          }
        },{
            type: 'value',
            splitNumber: 5,
            nameGap:55,
            max: 100,
            min: 0,
            splitLine: {
              show:true,
              lineStyle: {
                color: '#595959'
              }
            },
            nameTextStyle: {
              color: "#999"
            },
            axisLabel: {
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 8, // 刻度标签与轴线之间的距离
              color: "#989898", // 默认轴线的颜色
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
              formatter: function (value) {
                return value + '%'
              }
            },
            splitArea: {
              show: false
            },
          }],
        series: [
          {
            name:this.$t('totalAnalysis.ach_text7'),
            type: "bar", 
            itemStyle: {
              color: "#787c76",
              width: 20,
            },
            barWidth:40,
            data:this.echartData.map(item => item.totalNum)
          },
          {
            name:this.$t('totalAnalysis.ach_text8'),
            type: "bar", 
            itemStyle: {
              color: "#42beda",
              width: 20,
            },
            barWidth:40,
            barGap: '-100%',
            data:this.echartData.map(item => item.entryNum)
          },
          {
            name: this.$t('totalAnalysis.ach_text9'),
            type: 'line',
            color: "#66cc00",
            itemStyle: {
              color: '#66cc00',
              borderColor: "#efefef",
              borderWidth:3
            },
            symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
                color: "#ffd300",
                shadowColor: 'rgba(245,128,128, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            data:this.echartData.map(item => item.entryRate),
          },
        ]
      };

      // 绘制图表
      myBar.setOption(option);
      window.addEventListener("resize", function() {
        myBar.resize();
      });

      let that = this;
      //myBar.on('click', function (params) {
      //  let className = params.name;
      //  if (className == "高二5班") {
      //    //that.$router.push('')
      //    that.$router.push({path: '/total/achievement/entryTables', replace: true})
      //  } else {
      //    that.$Message.warning("暂不支持查看其它班级数据！")
      //  }
      //})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#entryNumberBar {
  width: 100%;
  height: 560px;
  margin: 0 auto;
  display: block;
}
</style>
