<template>
  <div ref="chart" @click=""/>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "LineBarChart",
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    data(n, o){
      this.refreshData();
    },
    x(n,o){
      this.refreshData();
    },
    y(n,o){
      this.refreshData();
    },
    title(n, o){
      this.refreshData();
    },
    formatter(n,o){
      this.refreshData();
    },
    barFormatter(n,o){
      this.refreshData();
    },
    lineFormatter(n,o){
      this.refreshData();
    },
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    refreshData(){
      this.option.title.text = this.title;
      this.option.dataset.source = this.data;
      this.option.dataset.dimensions = [this.x,this.y];
      this.option.tooltip.formatter = this.formatter;
      this.option.series[0].label.formatter = this.barFormatter;
      this.option.series[1].label.formatter = this.lineFormatter;
      if (this.chart){
        this.chart.setOption(this.option);
      }
    }
  },
  mounted() {
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.refreshData();
      this.chart = echarts.init(chartDom);
      this.chart.setOption(this.option);
      window.addEventListener('resize', this.resizeChart);
    }, 500)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  props: {
    title: {
      type: String,
      default: "折线条形图",
    },
    x: {
      type: String,
      default: "x",
    },
    y: {
      type: String,
      default: "y",
    },
    data: {
      type: Array,
      default: function (){
        return [
            {
              "x": "2月1日",
              "y": 747,
            },
            {
              "x": "2月2日",
              "y": 786,
            },
            {
              "x": "2月3日",
              "y": 547,
            },
          ]
      }
    },
    option:{
      type: Object,
      default: function () {
        return {
          tooltip: {
            trigger: 'axis',
          },
          title: {
            text: '折线条形图',
            textStyle:{
              color: 'white',
            },
            left: 'center'
          },
          grid:{
            left: "5%",
            right: "3%",
          },
          dataset: {
            dimensions: ['x', 'y'],
            source: [
              {
                "x": "2月1日",
                "y": 747,
              },
              {
                "x": "2月2日",
                "y": 786,
              },
              {
                "x": "2月3日",
                "y": 547,
              },
            ]
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 15,
              color: 'white'
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: 'white'
              }
            },
            {
              type: 'value',
              axisLabel: {
                color: 'white'
              },
              splitLine: false
            }
          ],
          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: "#00CCD2"
              },
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  {offset: 0, color: '#00CCD2'},
                  {offset: 1, color: '#00A2FF'}
                ]
              }

            },
            {
              type: 'line',
              color: 'red',
              label: {
                show: true,
                position: 'bottom',
                color: "red"
              },
            }
          ]
        }
      }
    },
    formatter:{
      type: Function
    },
    barFormatter:{
      type: Function
    },
    lineFormatter:{
      type: Function
    }
  },
};
</script>
<style scoped>
</style>
