<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['当日', '昨日']
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        name:'时',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:'KW.h'
      }
    ],
    series: [
      {
        name: '当日',
        type: 'bar',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      },
      {
        name: '昨日',
        type: 'bar',
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ]
  };
  option && myChart.setOption(option);
})

</script>

<template>
<div>
  <div>
    <div>
    </div>
    <div id="main" style="height: 400px;width: 100%"></div>
    <div></div>
  </div>
</div>
</template>

<style scoped lang="scss">

</style>
