<template>
  <div id="BottomBox1"></div>
</template>
<script>
import { ref, reactive, shallowRef, toRefs, onMounted } from "vue";
import * as echarts from "echarts";
export default {
  name: "BottomBox1",
  setup() {
    const state = shallowRef({
      chart: null,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        console.log(111);
        state.chart.resize();
      }
    };
    const initSeries = () => {};
    const init = () => {
      let chartDom = document.getElementById("BottomBox1");
      state.chart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          show: true,
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["01-26", "01-27", "01-28", "01-29", "01-30", "01-31", "02-01"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: [70, 50, 55, 52, 55, 78, 80],
            name: "降雨量",
            itemStyle: {
              normal: {
                color: "#3EAFF7",
                lineStyle: {
                  color: "#3EAFF7",
                  width: 1,
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3EAFF7",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ]),
            },
          },
        ],
      };

      state.chart.setOption(option, true);
    };

    onMounted(() => {
      initSeries();
      init();
      window.addEventListener("resize", resizeTheChart);
    });

    return {
      resizeTheChart,
      initSeries,
      init,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#BottomBox1 {
  width: 100%;
  height: 100%;
}
</style>