<template>
  <div class="chart" :id="id"></div>
</template>

<script>
export default {
  name: "barChart",
  props: {
    id: String,
    params: Array,
    xAxis: Array,
  },
  watch: {
    params: {
      handler: function (val) {
        this.initData();
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {},
  mounted() {
    // this.initData();
  },
  methods: {
    setOption(xAxis, params) {
      const that = this;
      const options = {
        color: this.colors || ["#4472c4", "#ed7d32", "#a5a5a5"],
        backgroundColor: "#f8f8f8",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          top: 20,
          itemHeight: 2,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          right: "6",
          top: "10",
          feature: {
            magicType: { show: true, type: ["line", "bar", "stack"] },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: "category",
          axisLine: { show: true, lineStyle: { color: "#e2e2e2" } },
          axisLabel: { color: "#666" },
          axisTick: { show: false },
          boundaryGap: true,
          data: xAxis,
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLine: { show: true, lineStyle: { color: "#e2e2e2" } },
          splitLine: {
            show: true,
            lineStyle: { color: "#eee" },
          },
          axisLabel: {
            color: "#666",
            formatter: function (value, index) {
              if (value != 0) {
                return value;
              } else {
                return "";
              }
            },
          },
        },
        grid: {
          top: 60,
          left: 20,
          right: 40,
          bottom: 30,
          containLabel: true,
        },
        series: params.map((item) => {
          return {
            name: item.name,
            type: "bar",
            symbolSize: "8",
            barWidth: 20,
            itemStyle: {
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              width: 3,
            },
            data: item.value,
          };
        }),
      };
      return options;
    },
    initData(xAxis, params) {
      if (!xAxis.length) return;
      if (!this.chart) {
        const div = document.getElementById(this.id);
        this.chart = this.$echarts.init(div);
      }
      const options = this.setOption(xAxis, params);
      this.chart?.clear();
      this.chart.setOption(options, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>
