<script setup>
import ViewIndex from './index.vue'
 const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"desc",title:"说明"},
  {key:"type",title:"类型"},
  // {key:"required",title:"是否必填"},
  {key:"defaultValue",title:"默认值"},
]
	
const filedData0 = [
  {
		field: 'option',
		type: 'any',
		required: '是',
    defaultValue: "''",
		desc: "与echarts的option一致",
	},
]
</script>

# echarts图表
对echarts饼图组件进行二次封装，主要是支持右侧tooltip与左侧饼图联动。

## 功能介绍
<ClientOnly>
 <Table :data="filedData0" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>

[echarts说明文档](https://echarts.apache.org/zh/index.html)

## 代码示例
<ClientOnly>
  <ViewIndex/>
</ClientOnly>

## 完整代码如下：

<div class="options-api">

```vue
<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;
  display: flex;
}
.app-echarts-box {
  flex: 1;
  padding: 24px;
  margin: 24px;
  height: 300px;
  background: #f8f9fa;
}

</style>


```
</div>
