<template>
  <div style="height: 260px" ref="chronologicDistributionChart"></div>
</template>

<script>
import * as echarts from "echarts";
import toolUtils from "@/utils/echartsTooltip";
export default {
  name: "ChronologicDistributionStatistics",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          const chartDom = this.$refs.chronologicDistributionChart;
          // 初始化图表实例
          this.chart = echarts.init(chartDom);
          this.initChart(val);
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // showFlag: 1,
    initChart(val) {
      const chart = echarts.init(this.$refs.chronologicDistributionChart);
      // const list = [{
      // 	"jcnd": "2010",
      // 	"qx": "丰都香",
      // 	"sl": 10
      // }]
      const data = [];
      val.forEach((p) => {
        const iData = [new Date(`${p.jcnd}-01-01 00:00:00`), p.sl];
        data.push(iData);
      });
      console.log(data.length);
      const option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "30%"];
          },
          formatter(value) {
            return `<span style="color:#fff;">${new Date(
              value[0].axisValueLabel
            ).getFullYear()}年<br/>
         ${value[0].marker} ${
              value[0].seriesName
            } <span style='color:#FAFF12;font-size:18px;font-weight:bold;'>${
              value[0].data[1]
            }</span> 栋<span>`;
          },
          confine: true,
          extraCssText: "z-index: 1000;",
          backgroundColor: "#02809a",
          borderColor: "rgba(0,213,255, .6)",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          right: "10px",
          // top: '10px',
          bottom: "20px",
        },

        title: {
          top: "5%",
          right: "2%",
          text: "单位：栋",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            type: "time",
            gridIndex: 0,
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#35709caa",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              formatter: function (value) {
                return new Date(value).getFullYear() + "年";
              },
              interval: 9,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#35709caa",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          boundaryGap: [0, "20%"],
          splitLine: {
            show: true,
            lineStyle: {
              color: "#35709caa",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "高层建筑数量",
            type: "line",
            // smooth: true,
            symbol: "circle",
            itemStyle: {
              color: "#0770FF",
            },
            stack: "a",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(58,77,233,0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(58,77,233,0.3)",
                },
              ]),
            },
            data: data,
          },
        ],
      };
      chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;

      // 自动轮播
      toolUtils.autoHover(this.chart, option, data.length, 5000);
    },
  },
};
</script>

<style scoped lang="less">
.unit {
  padding: 10px;
  font-size: 12px;
  display: flex;
  justify-content: end;
}
</style>
