<template>
  <div class="echarts-item">
    <div id="bar-bg-chart"></div>
  </div>
</template>

<script>
import { getFontSize } from "@/common/js/utils.js";
export default {
  data() {
    return {
      dirObj: {
        1: "北进口",
        2: "东北进口",
        3: "东进口",
        4: "东南进口",
        5: "南进口",
        6: "西南进口",
        7: "西进口",
        8: "西北进口",
      },
    };
  },
  props: ["data", "indexModelRight"],
  mounted() {
    if (this.data) {
      this.initBgBarChart(this.data);
    }
  },
  methods: {
    initBgBarChart(data) {
      this.$nextTick(() => {
        let myChart = this.$echarts.init(
          document.getElementById(`bar-bg-chart`)
        );
        let colors = ["#FFC400", "#178FFF"];
        const xData = [];
        const seriesData = [];
        data.forEach((item) => {
          xData.push(this.dirObj[item.dir]);
          seriesData.push(item.value);
        });
        let option = {
          color: colors,
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
            confine: true,
          },
          grid: {
            right: 30,
            bottom: 20,
            left: 40,
            top: 20,
          },
          legend: {
            inactiveColor:'rgba(255,255,255,0.7)',
            selectedMode: false,
            icon: "circle",
            top: "5%",
            left: "center",
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: "rgba(255,255,255,0.9)",
            },
            data: [],
          },
          xAxis: [
            {
              type: "category",
              axisLabel: {
                color: "#666",
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                },
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: "#999",
                },
              },
              // prettier-ignore
              data: xData
            },
          ],
          yAxis: [
            {
              axisLabel: {
                color: "#666",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(153, 153, 153, 0.6)",
                  type: "dashed",
                },
              },
              axisPointer: {
                snap: true,
              },
              type: "value",
            },
          ],
          series: [
            {
              // smooth: true,
              name: this.indexModelRight,
              type: "bar",
              barWidth: getFontSize(8),
              // symbol: "circle",
              // yAxisIndex: 1,
              data: seriesData,
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
#bar-bg-chart,
.no-data {
  width: 100%;
  height: 100%;
  //   & > div {
  //     width: 100% !important;
  //     height: 100% !important;
  //   }
}
</style>
