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

<script>
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, yRange } = this.setting;
      let option = {
        title: {
          text: title,
          left:'center'
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: this.rawData.map(function (item) {
            return item[xAxis];
          }),
        },
        yAxis: {
            min: yRange[0] - (yRange[1] - yRange[0]) * 0.05,
            max: yRange[1] + (yRange[1] - yRange[0]) * 0.05,
            splitLine: {
                show: false
            }
        },
        dataZoom: [
          {
            // startValue: '2014-06-01'
          },
          {
            type: "inside",
          },
        ],
        toolbox: {
          left: "left",
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          show: true,
          top: 40,
          right: 50,
          type:'piecewise',
          text:'图例',
          pieces: [
            {
              gte: yRange[0],
              lte: yRange[1],
              color: '#0000ff',
            },
            {
              gt: yRange[1],
              color: "#ff0000",
            },
            {
              gt: yRange[1],
              color: "#ff0000",
            },
          ],
          categories:['合格','不合格'],
          outOfRange: {
            color: "#0000ff",
          },
        },
        series: {
          name: seriesName,
          type: seriesType,
          data: this.rawData.map(function (item) {
            return item[series];
          }),
          markLine: {
            silent: true,
            data: [
              {
                yAxis: yRange[0],
              },
              {
                yAxis: yRange[1],
              },
            ],
          },
        },
      };
      console.log(option)
      myChart.setOption(option);
    },
  },
  mounted() {
    // console.log(this.rawData)
    
    this.initChart();
  
  },
};
</script>

<style>
</style>