<template>
  <div>
    <div :ref="refName" style="width:100%;height:100%"></div>
  </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
import customed from "../../assets/js/customed.json";
echarts.registerTheme("customed", customed);
const refName = Math.random()
  .toString(36)
  .substr(2);
export default {
  name: "lineAndBar",
  data() {
    return {
      refName: refName
    };
  },
  props: {
    legendData: Array,
    axisData: Array,
    unit: Array,
    datas: Array,
    max: Array
  },
  methods: {
    loadData() {
      this.mychart = echarts.init(this.$refs[refName], "customed");
      this.mychart.setOption({
        textStyle: {
          fontSize: 14,
          color:'#616161'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          },
          textStyle:{
            fontSize:14
          }
        },
        grid: {
          top: 50,
          bottom: 28,
          left: 0,
          right: 0,
          containLabel: true
        },
        legend: {
          data: this.legendData,
          bottom: 0,
          itemWidth: 14,
          itemHeight: 14,
          symbolKeepAspect: true,
          textStyle:{
            fontSize:14,
            color:'#616161'
          }
        },
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#616161",
              fontSize: 14
            },
            data: this.axisData,
            axisPointer: {
              type: "shadow"
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 14,
              color: '#616161'
            },
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.unit[0],
            nameTextStyle: {
              color: "#616161",
              fontSize: 14
            },
            axisLabel: {
              fontSize: 14,
              color: '#616161'
            },
            axisTick: {
              show: false
            },
            min: 0,
            max: this.max[0],
            interval: Math.round((this.max[0] / 5) * 100) / 100,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted"
              }
            }
          },
          {
            type: "value",
            name: this.unit[1],
            nameTextStyle: {
              color: "#616161",
              fontSize: 14
            },
            axisLabel: {
              fontSize: 14,
              color: '#616161'
            },
            axisTick: {
              show: false
            },
            min: 0,
            max: this.max[1],
            interval: Math.round((this.max[1] / 5) * 100) / 100,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted"
              }
            }
          }
        ],
        series: this.datas
      });
      window.addEventListener("resize", () => {
        this.mychart.resize();
      });
    }
  },
  mounted() {
    this.loadData();
  },
  updated() {
    this.loadData();
  },
  beforeDestroy() {
    if (this.mychart) {
      this.mychart.clear();
    }
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>
