<template>
  <div class="common-box">
    <TopTitle icon="wanchengrenwu" title="任务中心" />
    <div id="taskChart">ddd</div>
  </div>
</template>

<script lang="ts" setup>
import TopTitle from "@/components/TopTitle.vue";
import * as echarts from "echarts";

onMounted(() => {
  const chart = echarts.init(document.getElementById("taskChart"));
  let option = {
    legend: {
      top: "bottom",
    },
    tooltip: {
      trigger: "item",
      show: true,
      formatter: function (params: any) {
        return params.name + "<br>生产量 " + params.value;
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 150],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: "rose 1" },
          { value: 38, name: "rose 2" },
          { value: 32, name: "rose 3" },
          { value: 30, name: "rose 4" },
          { value: 28, name: "rose 5" },
          { value: 26, name: "rose 6" },
          { value: 22, name: "rose 7" },
          { value: 18, name: "rose 8" },
        ],
      },
    ],
  };
  chart.setOption(option);
});
</script>

<style lang="scss" scoped>
#taskChart {
  height: 438px;
  width: 100%;
}
</style>
