<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<!-- 折柱混合图表 -->
<script>
import tdTheme from "./../theme.json"; // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
export default {
  name: "mixChart",
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    unit: {
      // 单位
      type: String,
      default: "",
    },
    colors: {
      // 颜色
      type: Array,
      default: () => {
        return ["#01b4ff", "#0337ff"];
      },
    },
    axisLineColor: {
      // 轴线颜色
      type: String,
      default: "#101d5d",
    },
    fontColor: {
      // 轴线上文字颜色
      type: String,
      default: "#000fff",
    },
    labelColor: {
      // 图形上文本标签颜色
      type: String,
      default: "#47c8b2",
    },
    smooth: {
      type: Boolean,
      default: true,
    }, // 平滑
    seriesData: {
      // 数据
      type: Array,
      default: () => {
        return [];
      },
    },
    xAxisData: {
      // X轴数据
      type: Array,
      default: () => {
        return [];
      },
    },
    yAxisData: {
      // y轴数据
      type: Array,
      default: () => {
        return [];
      },
    },
    legend: {
      //图例数据
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          orient: "horizontal",
          bottom: "auto",
          top: "bottom",
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          textStyle: {
            width: "300",
            color: "#000",
            fontSize: 12,
          },
          data: [],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
            axisLabel:{
              show:true,
              alignWithLabel:true
            }
          },
        ],
        yAxis: [],
        series: [],
        grid:{
          containLabel:true
        }
      },
    };
  },
  watch: {
    xAxisData(newVal) {
      this.option.xAxis[0].data = newVal;
      // this.refreshEchart()
    },
    yAxisData(newVal) {
      this.option.yAxis = newVal;
    },
    legend(newVal) {
      this.option.legend.data = newVal;
      // this.refreshEchart()
    },
    unit(newVal) {
      // this.option.yAxis[0].name = newVal
      // this.refreshEchart()
    },
    seriesData: {
      handler(newVal) {
        const newSeries = [];
        for (const item of newVal) {
          const series = {
            name: item.name,
            type: item.type,
            lineStyle: {
              width: 1,
            },
            data: item.data,
          };
          newSeries.push(series);
        }
        this.$set(this.option, "series", newSeries);
        // this.refreshChart();
      },
      deep: true,
    },
    option: {
      handler(newVal) {
        // 设置true清空echart缓存
        this.chart.setOption(newVal, true);
      },
      deep: true,
    },
  },
  mounted() {
    // debugger
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, "tdTheme");
      if (this.option.xAxis.data) {
        this.chart.setOption(this.option, true);
      } else {
        this.chart.setOption({}, true);
      }
    },
  },
};
</script>

<style scoped>
</style>