<template>
  <div id="RightBox1"></div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import * as echarts from "echarts";
export default {
  name: "RightBox1",
  setup() {
    const state = reactive({
      series: [],
      legend: [],
      chart: null,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        console.log(111);
        state.chart.resize();
      }
    };
    const initSeries = () => {};
    const init = () => {
      let chartDom = document.getElementById("RightBox1");
      state.chart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          show: true,
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["后湖二期", "铁路桥", "机场和补水", "王家墩污水"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: [4.2, 4.3, 4.1, 4.2],
            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>
#RightBox1 {
  width: 372px;
  height: 244px;
}
</style>