<template>
  <div>
    <div
      v-if="hasData"
      id="index-chart"
      ref="indexChart"
      :style="{ width:width, height:height }"
    />
    <a-empty v-else />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chartId:'index-chart-'
    };
  },
  props: {
    width: String,
    height: String,
    rawData: Array,
    setting: Object,
  },
  watch: {
    rawData(val, newVal) {
      this.initChart();
    },
  },
  computed: {
    hasData() {
      return this.rawData.length > 0;
    },
  },
  methods: {
    initChart() {
      let e = this.$refs['indexChart']
      if(!e)return
      let myChart = echarts.init(e);
      const { title, xAxis, series, seriesName, seriesType } = this.setting;
      let option = {
        title: {
          text: title,
          left:'center'
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: this.rawData.map(function (item) {
            return item[xAxis];
          }),
        },
        yAxis: {
          type: "value"
        },
      
        dataZoom: [
          {
            // startValue: '2014-06-01'
          },
          {
            type: "inside",
          },
        ],
        toolbox: {
          left: "left",
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },

        series: {
          name: seriesName,
          type: seriesType,
          data: this.rawData.map(function (item) {
            return item[series];
          }),

        },
      };
      console.log(option)
      myChart.setOption(option);
    },
  },
  mounted() {
    // console.log(this.rawData)
    
    this.initChart();
  
  },
};
</script>

<style>
</style>