feat: ✨ basic-pie

examples/src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BasicBar } from 'bi-chart'
+import { BasicBar, BasicPie } from 'bi-chart'
 </script>
 
 <template>
   <div style="width: 600px; height: 400px;">
     <basic-bar />
+    <basic-pie />
   </div>
 </template>

examples/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import 'bi-chart/dist/es/style.css'
+import 'bi-chart/style/index.css'
 
 createApp(App).mount('#app')

packages/bi-chart/components/basic-pie/BasicPie.vue

@@ -0,0 +1,34 @@
+<template>
+  <VChart class="chart-box" :option="state.options" autoresize />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { reactive, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { chartOption } from './chartOptions'
+import { cloneDeep } from 'lodash-es'
+import { getData } from './hooks'
+
+export default defineComponent({
+  name: 'BasicBar',
+  components: { VChart },
+  setup() {
+    const state = reactive({
+      options: cloneDeep(chartOption)
+    })
+
+    onMounted(() => {
+      getData().then(res => {
+        let optionCache = cloneDeep(chartOption)
+        optionCache.series[0].data = res.data || []
+        state.options = optionCache
+      })
+    })
+
+    return {
+      state
+    }
+  }
+})
+</script>

packages/bi-chart/components/basic-pie/chartOptions.ts

@@ -0,0 +1,62 @@
+export const chartOption = {
+  color: [
+    '#0056FF',
+    '#2ED4A9',
+    '#242934',
+    '#FF7125',
+    '#FFC420',
+    '#F12525',
+    '#646B7A',
+    '#0056FF',
+    '#2ED4A9',
+    '#242934'
+  ],
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    type: 'scroll',
+    orient: 'vertical',
+    align: 'left',
+    x: '65%',
+    y: 'center',
+    itemGap: 25,
+    icon: 'circle',
+    textStyle: {
+      color: 'rgba(156, 166, 185, 1)',
+      fontSize: '14px',
+      padding: [0, 0, 0, 5]
+    },
+    itemWidth: 6
+  },
+  series: [
+    {
+      name: '外呼任务统计',
+      type: 'pie',
+      radius: ['60', '90'],
+      minAngle: 20,
+      center: ['30%', '52.5%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '16',
+          fontWeight: 'bold',
+          color: '#646B7A'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { name: '今日任务', value: 50 },
+        { name: '已完成任务', value: 50 },
+        { name: '过期任务', value: 50 }
+      ]
+    }
+  ]
+}

packages/bi-chart/components/basic-pie/hooks/index.ts

@@ -0,0 +1,28 @@
+import http from '../../../_plugins/axios-http'
+
+export const mineCallTaskStatistics = (params: any) =>
+  http.postJson(
+    '/bdcloud-call-analytic/call/callPhoneReport/mineCallTaskStatistics',
+    params,
+    {
+      headers: {
+        Authorization:
+          'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4MzU0NDkzMn0.c2s0j7wF5RZTvZaIdkvyZc6AbRdDs8R_Mw3uhYk7hgtwO-nGKcrmRgk5bPtD_aZ8VjJ6Zu3DWju-Lnna9YijCQ'
+      }
+    }
+  )
+
+export function getData() {
+  return mineCallTaskStatistics({
+    token:
+      'eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4MzU0NDkzMn0.c2s0j7wF5RZTvZaIdkvyZc6AbRdDs8R_Mw3uhYk7hgtwO-nGKcrmRgk5bPtD_aZ8VjJ6Zu3DWju-Lnna9YijCQ',
+    COMPANYID: '3263',
+    companyId: '3263',
+    endTime: '',
+    profileId: '67098',
+    startTime: '',
+    type: '0',
+    pageNo: 0,
+    pageSize: 0
+  })
+}

packages/bi-chart/components/basic-pie/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import basicPie from './BasicPie.vue'
+
+const BasicPie = Object.assign(basicPie, {
+  install: (app: App) => app.component(basicPie.name, basicPie)
+})
+
+export { BasicPie as default }

packages/bi-chart/index.ts

@@ -2,3 +2,4 @@ import './_plugins/vue-echarts'
 import './style/index.css'
 
 export { default as BasicBar } from './components/basic-bar'
+export { default as BasicPie } from './components/basic-pie'

packages/bi-chart/package.json

@@ -5,7 +5,8 @@
   "module": "dist/es/index.js",
   "exports": {
     ".": {
-      "import": "./dist/es/index.js"
+      "import": "./dist/es/index.js",
+      "types": "./dist/es/index.d.ts"
     },
     "./dist/es/style.css": "./dist/es/style.css"
   },