<template>
  <div class='app-echarts-demo'>
    <div class='app-echarts-box'>
      <KsPieEcharts :option="option1"/>
    </div>
    <div class='app-echarts-box'>
      <KsPieEcharts :option="option2"/>
    </div>
  </div>
</template>
<script setup>
import { KsPieEcharts } from '@ksconsole/components';

const option1 = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      // name: '我的报表',
      type: 'pie',
      center: ['24%', '50%'],
      radius: ['60%', '75%'],
      avoidLabelOverlap: false,
      label: {
          // show: true,
          position: 'center',
          color:'#151B1E',
          fontWeight: 500,
          fontSize: 30,
          formatter: function(params) {
              return '21' + '\n' + '总数'
          },
      },
      // 中间文字展示
      emphasis: { // hover
          label: {
              show: true,
              fontSize: 30,
              fontWeight: 'bold',
              color:'#36ACEF',
          }
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 10,
          name: '已完成',
          itemStyle: { color: '#2CD8C5' },
          id: 'predefined',
        },
        {
          value: 11,
          name: '待处理',
          itemStyle: { color: '#FF4433' },
          id: 'privateNum',
        },
      ],
    },
  ],
};
const option2 = {
  tooltip: {
    // hover
    trigger: 'item',
  },
  title: {
    show: true,
    text: '21',
    subtext: '总数',
    left: '20%',
    top: '35%',
    textStyle: {
      color: '#3C4449',
      fontSize: 30,
      fontWeight: 500,
    },
    subtextStyle: {
      color: '#848F9A',
      fontSize: 14,
    },
  },
  series: [
    {
      // name: '我的报表',
      type: 'pie',
      center: ['24%', '50%'],
      radius: ['60%', '75%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 16,
          name: '问题工单',
          itemStyle: { color: '#2CD8C5' },
          id: 'predefined',
          children: [
            { value: 6, name: '低优', id: 'lowNum' },
            { value: 5, name: '中优', id: 'middleNum' },
            { value: 5, name: '高优', id: 'highNum' },
          ],
        },
        {
          value: 5,
          name: '云资源工单',
          itemStyle: { color: '#1890FE' },
          id: 'privateNum',
        },
      ],
    },
  ],
};
</script>

<style scoped>
.app-echarts-demo {
  padding: 24px;
  height: 300px;
}
.app-echarts-box {
  padding: 24px;
  margin: 24px;
  height: 300px;
  /* width: 500px; */
  background: #f8f9fa;
}


</style>
