<!--
 * 疫情防控
  -->
<script lang="ts">
export default {
  name: 'PAGE7',
};
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var chartMain;
const chartMainRef = ref<any>(null);

onMounted(() => {
  initDom();
});

function initDom() {
  chartMain = echarts.init(chartMainRef.value);
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [
        '本土感染者',
        '省内感染者',
        '外省来（返）蓉感染者',
        '境外输入感染者',
      ],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '2022-11-08',
        '2022-11-09',
        '2022-11-10',
        '2022-11-11',
        '2022-11-12',
        '2022-11-13',
        '2022-11-14',
        '2022-11-15',
        '2022-11-16',
        '2022-11-17',
        '2022-11-18',
        '2022-11-19',
        '2022-11-20',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '本土感染者',
        type: 'line',
        data: [30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316],
        itemStyle: {
          color: '#E8110F',
        },
      },
      {
        name: '省内感染者',
        type: 'line',
        data: [16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280],
        itemStyle: {
          color: '#FBC723',
        },
      },
      {
        name: '外省来（返）蓉感染者',
        type: 'line',
        data: [14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36],
        itemStyle: {
          color: '#1B6AA5',
        },
      },

      {
        name: '境外输入感染者',
        type: 'line',
        data: [7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20],
        itemStyle: {
          color: '#333333',
        },
      },
    ],
  };

  chartMain.setOption(option);
}
</script>
<template>
  <div>
    <div>成都市新冠疫情单日新增情况</div>
    <div class="content">
      <div
        class="chart-main"
        ref="chartMainRef"
        style="width: 1200px; height: 700px"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
}
.chart-main {
}
</style>
