<template>
  <div ref="preCurveRef" style="height: 400px; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "preCharts",
  props: {
    // chartRef: {
    //   type: String,
    //   required: true
    // },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    title: {
      type: String,
      default: "",
    },
    /**
     * chartData包括：
     * title:''
     * legendData:[]
     * xAxisData:{}
     * yAxisData:{}
     * seriesData:{}
     */
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      // color: [
      //   "#5470c6",
      //   "#91cc75",
      //   "#fac858",
      //   "#ee6666",
      //   "#73c0de",
      //   "#3ba272",
      //   "#fc8452",
      //   "#9a60b4",
      //   "#ea7ccc",
      // ],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        // this.initChart()
        this.$nextTick(() => {
          this.initChart();
          this.setOptions(val);
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  computed: {},
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      // console.log('66', this.chartRef)
      this.$refs.preCurveRef.style.width =
        window.innerWidth - window.innerWidth * 0.2 + "px";
      this.chart = echarts.init(this.$refs.preCurveRef);
      this.chart.showLoading();
      this.setOptions(this.chartData);
    },
    setOptions({ legendData, xAxisData, yAxisData, seriesData } = {}) {
      this.chart.setOption({
        title: {
          text: this.title,
          textStyle: {
            //文字颜色
            color: "#fff",
          },
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // data: legendData,
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
          top: 30,
        },
        // color: this.color,
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
          // data: yAxisData
        },
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        // series: series
        series: seriesData,
      });
      this.chart.hideLoading();
    },
  },
};
</script>
<style lang="scss" scoped></style>
