<template>
  <div :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "230px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    },
    title: {
      type: String,
      default: "chart"
    },
    options: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      chart: null,
      chartOptions: {
        xAxis: [],
        legend: [],
        series: []
      }
    };
  },
  mounted() {
    this.initChart();
 
  },
  beforeDestroy() {
 
  },
  watch: {

    options:{
      handler(newValue,oldValue){
        this.getInitChart();
      },
      deep:true
    },

    chartData: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.setOptions(val);
        });
      }
    }
  },
  created() {
    this.chartOptions = this.options;
    console.log("this.chartOptions", this.chartOptions, this.options);
  },
  methods: {
    getInitChart() {
      this.chartOptions = this.options;
      this.initChart();

    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        // title: {
        //   text: this.title
        // },
        xAxis: {
          data: this.chartOptions.xAxis.data,
          // boundaryGap: false
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: "#a09ba3" //x轴颜色
            }
          },
          axisLabel: this.chartOptions.xAxis.axisLabel
          
        },
        grid: {
          left: 0,
          right: 50,
          bottom: 10,
          top: 30,
          containLabel: true
        },

        yAxis: {
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: "#a09ba3" //y轴颜色
            }
          },
          axisLabel: {
            show:false,
            textStyle: {
              color:"#2F3133"
            }
          },
          max:2
        },
        dataZoom: this.chartOptions.dataZoom,
        legend: this.chartOptions.legend,
        series: this.chartOptions.series
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.clear();
      this.setOptions(this.chartData);
      window.onresize = this.chart.resize;
    }
  }
};
</script>
