<template>
  <div>
    <div class="chartsTitle">echarts</div>
    <div class="flex-between-center">
      <div>
        <div id="BarchartsContainer"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    BarChartsData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      barcharts: "", //关键一（echarts名称）
      serverData: null
    };
  },
  methods: {
    getData() {
      let _self = this;
      this.serverData = this.BarChartsData;
      _self.$nextTick(function() {
        _self.drawBarcharts("BarchartsContainer");
        _self.init(); //关键二（在挂载后调用一次监听）
      });
    },
    drawBarcharts(id) {
      let _self = this;
      var yMax = 500;
      var dataShadow = [];
      for (var i = 0; i < _self.serverData.yData.length; i++) {
        dataShadow.push(yMax);
      }
      this.barcharts = echarts.init(document.getElementById(id));
      this.barcharts.setOption({
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: _self.serverData.xData,
          axisLabel: {
            fontSize: 12,
            color: "#fff",
            margin: 10,
            align: "center"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          z: 10
        },
        yAxis: {
          type: "value",
          name: "kg",
          splitNumber: 3,
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            show: false,
            startValue: 0,
            endValue: 6
          }
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "transparent"
            },
            animation: false
          },
          {
            type: "bar",
            barWidth: 25, //柱图宽度
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                //这里是重点
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#0eede7" },
                  { offset: 1, color: "#00a1e5" }
                ]),
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16
                  }
                }
              }
            },
            emphasis: {
              barBorderRadius: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" }
                ])
              }
            },
            data: _self.serverData.yData
          }
        ]
      });
      this.barcharts.on("click", function(param) {
        console.log(param);
      });
    },
    init() {
      //关键三（讲window窗变化加入监听）
      setTimeout(() => {
        window.addEventListener("resize", () => {
          this.barcharts.resize();
        });
      }, 20);
    },
    destroyed() {
      //关键四（每次变化后移除监听，避免单页面下一页变化，会找不到dom报错）
      window.removeEventListener("resize", this.init, 20);
    }
  },
  watch: {
    BarChartsData(newValue, oldValue) {
      console.log(oldValue);
      if (Object.keys(newValue).length != 0) {
        this.getData();
      }
    }
  }
};
</script>
<style lang="scss">
#BarchartsContainer {
  width: 500px;
  height: 224px;
}
</style>