<template>
  <div :id="'chartBar-' + data.id" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  name: "ChartBar",
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          id: 0,
          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
          name: '默认',
          unit: '%'
        }
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear();
          this.init()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let max = Math.max(...this.data.data);
      let max1 = max * 1.2;
      // 获取当前数组的数量并push 成新数组
      let data1 = new Array(this.data.data.length).fill(max1);
      let options = {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        //   },
        // },
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data.time,
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#FFF",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#fff", //左边线的颜色
              width: "2", //坐标线的宽度
            },
          },
          axisLabel: {
            formatter: `{value}${this.data.unit}`,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
          nameTextStyle: {
            fontSize: 12,
          },
          // axisLabel: {
          //   textStyle: {
          //     color: "#fff",
          //
          //     fontSize: 12,
          //   },
          // },
        },
        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#0369df",
              barBorderRadius: 3,
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            symbolRepeat: true,
            symbolSize: [20, 3],
            symbolMargin: 3,
            data: this.data.data,
          },
          {
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#022a62",
              barBorderRadius: 3,
            },
            symbolRepeat: true,
            symbolSize: [20, 3],
            symbolMargin: 3,
            z: -10,
            data: data1,
          },
        ],
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartBar-' + this.data.id));
    this.init()
    let that = this;
    window.addEventListener('resize', function () {
      that.myChart.resize()
    })
  }
}
</script>

<style scoped>

</style>
