<template>
  <div ref="echart" ></div>
</template>
<script>
import Echarts from "echarts";

export default {
  name: "XLine",
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: undefined,
      defaultOpts: {
        title: {
          text: "新增用户"
        },
        color: ["purple", "green"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新用户数", "授权注册"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "新用户数",
            type: "line",
            stack: "1"
          },
          {
            name: "授权注册",
            type: "line",
            stack: "2"
          }
        ]
      }
    };
  },
  watch: {
    value: {
      handler(val) {
        this.renderChart(val)
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.renderChart(this.value || {})
  },
  methods: {
    initChats () {
      if (!this.chart && this.$refs.echart) {
        this.chart = Echarts.init(this.$refs.echart);
      }

      if (this.chart) {
        return Promise.resolve(this.chart)
      } else {
        return Promise.reject()
      }
    },
    renderChart(val) {
      this.initChats().then((echart) => {
        // 绘制图表
        echart.setOption({
          ...this.defaultOpts,
          ...val
        });
      })
    }
  }
};
</script>
<style>
</style>

