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

<script>
  export default {
    name: "hello",
    props: ['echartsData'],
    data() {
      return {
        subjectList: [],
        lineData: 440,
        areaData: 490.5
      };
    },
    created() {
      this.subjectList = this.echartsData;
      this.subjectList.forEach(item => {
        item.className = '初一' + item.id + '班'
      })
    },
    mounted() {
      this.drawLine(this.subjectList);
    },
    methods: {
      drawLine(data) {
        // 基于准备好的dom，初始化echarts实例
        let myBar = this.$echarts.init(document.getElementById("myBar"));
        let that = this;

        // 指定图表的配置项和数据
        var option = {
          legend: {
            data: ['语文', '数学', '英语', '生物', '化学', '物理', this.$t('totalAnalysis.ach_text5'), this.$t('totalAnalysis.ach_text6')],
            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 (value) {
              let arr = value[0].name + '<br>';
              let sum = 0;
              for (var i = 0; i < value.length; i++) {
                var datalist = value[i].marker + value[i].seriesName + ' : ' + value[i].data + '<br>';
                if (i == value.length - 1 || i == value.length - 2) {
                  sum += 0;
                } else {
                  sum += value[i].data;
                }
                arr += datalist;
              };
              return arr + value[value.length - 1].marker + that.$t('totalAnalysis.ach_text4') + '：' + sum;
            }

          },
          grid: {
            show: false,
            containLabel: true,
            height: 480,
            width: "90%",
            x2: "5%",
            tooltip: {
              show: true,
              trigger: "axis", // 触发类型
              textStyle: {
                color: "#666"
              },
            }
          },
          dataZoom: [{
            "show": true,
            "height": 10,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "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",
            borderRadius:"5px"
          }, {
            "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: 0, // 坐标轴名字旋转
            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, // 是否朝内
              rotate: 45, // 旋转角度
              margin: 15, // 刻度标签与轴线之间的距离
              color: "#989898", // 默认取轴线的颜色,
              fontSize: 14,
              fontFamily: "Microsoft YaHei"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#4c504a',
              }
            },
            splitArea: {
              show: false // 是否显示，默认为false
            },
            data: data.map(item => item.className)
          },
          //   ------   y轴  ----------
          yAxis: {
            show: true, // 是否显示
            position: "left", // y轴位置
            offset: 0, // y轴相对于默认位置的偏移
            type: "value", // 轴类型，默认为 ‘category’
            nameLocation: "end", // 轴名称相对位置value
            nameTextStyle: {
              color: "#fff",
              padding: [5, 0, 0, 5] // 坐标轴名称相对位置
            },
            nameGap: 15, // 坐标轴名称与轴线之间的距离
            nameRotate: 270, // 坐标轴名字旋转

            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, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 8, // 刻度标签与轴线之间的距离
              color: "#989898", // 默认轴线的颜色
              fontSize: 12,
              fontFamily: "Microsoft YaHei"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#4c504a",
                width: 0.5,
                type: "solid"
              }
            }
          },
          series: [
            {
              name: "语文",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#db615e",
                width: 20,
              },
              barWidth: 40,
              data: data.map(item => item.chinese)
            },
            {
              name: "数学",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#db8dd2",
                width: 20,
              },
              barWidth: 40,
              data: data.map(item => item.math)
            },
            {
              name: "英语",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#42beda",
                width: 20,
              },
              barWidth: 40,
              data: data.map(item => item.english)
            },
            {
              name: "生物",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#1eb58d",
                width: 20,
              },
              barWidth: 40,
              data: data.map(item => item.biology)
            },
            {
              name: "化学",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#99ccff",
                width: 10,
              },
              data: data.map(item => item.chemistry)
            },
            {
              name: "物理",
              type: "bar",
              stack: '英语',
              legendHoverLink: true,
              itemStyle: {
                color: "#dbaf4f",
                width: 10,
              },
              barWidth: 40,
              data: data.map(item => item.physics)
            },
            {
              name: this.$t('totalAnalysis.ach_text5'),
              type: "line",
              itemStyle: {
                color: "#66ff99",
                width: 2,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#66ff99',
                  type: "dashed",
                  width: 2
                }
              },
              data: data.map(item => this.lineData)
            },
            {
              name: this.$t('totalAnalysis.ach_text6'),
              type: "line",
              itemStyle: {
                color: "#11C2EE",
                width: 2,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#11C2EE',
                  type: "dashed",
                  width: 2
                }
              },
              data: data.map(item => this.areaData)
            },
          ]
        };

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

        myBar.on('legendselectchanged', function (obj) {
          var selected = obj.selected;
          var legend = obj.name;
          let arr = [];
          for (let i in selected) {
            let o = {};
            o[i] = selected[i];
            arr.push(o)
          }
          arr.length = 6;
          let keyArr = [];
          arr.forEach(item => {
            for (let key in item) {
              if (item[key]) {
                keyArr.push(key);
              }
            }
          })
          if (keyArr.length) {
            this.lineData = 440 - (100 - Math.random().toFixed(2) * 20) * (6 - keyArr.length);
            this.areaData = 495 - (100 - Math.random().toFixed(2) * 20) * (6 - keyArr.length);
          } else {
            this.lineData = 0;
            this.areaData = 0;
          }
          option.series[option.series.length - 2].data = [...Array(10).keys()].map(item => this.lineData);
          option.series[option.series.length - 1].data = [...Array(10).keys()].map(item => this.areaData);
          myBar.setOption(option);

        });
      }
    },
    computed: {
      //获取最新柱状图数据
      getBaseBarData() {
        let list = this.$store.state.totalAnalysis.baseBarData;
        return list;
      }
    },
    watch: {
      getBaseBarData(val) {
        this.drawLine(val);
      }
    }
  };
</script>

<style scoped>

  #myBar {
    width: 100%;
    height: 600px;
    margin: 0 auto;
    display: block;
  }
</style>
