<script setup lang="ts">

import {onMounted, ref} from "vue";
import * as echarts from "echarts";


const main = ref();
onMounted(() => {
  init();
});

const init = () => {
  const myChart = echarts.init(main.value);
  let option = {
    title: {
      text: '工作交易统计'
    },
    legend: {
      data: ['外卖类', '跑腿类']
    },
    radar: {
      indicator: [
        { name: '周一', max: 6500 },
        { name: '周二', max: 16000 },
        { name: '周三', max: 30000 },
        { name: '周四', max: 38000 },
        { name: '周五', max: 52000 },
        { name: '周六', max: 25000 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '外卖类'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: '跑腿类'
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
}

</script>

<template>
  <div class="echarts">
    <div style="width: 100%; height: 100%; margin-top: 1rem">
      <div ref="main" style="width: 100%; height: 100%" class="center"></div>
    </div>
  </div>
</template>

<style scoped>
.echarts {
  margin:10px auto;
  width: 80%;
  height: 90%;
  border-radius: 12px;
  padding: 1rem;
  background-color: #ffffff;
  min-width: 0;
}
.center {
  margin-top: 5px;
}
</style>

