feat(pie): add pie build code

package.json

@@ -123,7 +123,7 @@
     "stylus": "^0.54.8",
     "ts-jest": "^26.5.6",
     "ts-morph": "^11.0.0",
-    "typescript": "4.9",
+    "typescript": "~4.9.5",
     "unocss": "^0.35.2",
     "unplugin-icons": "^0.14.2",
     "unplugin-vue": "^0.2.2",

packages/charts/src/charts/pie/index.ts

@@ -0,0 +1,9 @@
+import { build as build1 } from './pie01'
+import { build as build2 } from './pie02'
+
+const result: any = {
+  pie01: build1,
+  pie02: build2,
+}
+
+export default result

packages/charts/src/charts/pie/pie01.ts

@@ -0,0 +1,130 @@
+import { defaultThemeOpt } from '../../utils/defaultOpt'
+import { transformOriginDataToSeries } from '../../transform'
+import type { EChartsOption } from 'echarts'
+import { _merge } from '../../utils/index'
+/**
+ *
+ * @param originData 原始数据
+ */
+export const build = (originData: any): EChartsOption => {
+  const { category, series } = transformOriginDataToSeries(
+    originData,
+    'pie'
+  )
+  console.log(category, series)
+  const formatNumber = function (num: any) {
+    const reg = /(?=(\B)(\d{3})+$)/g
+    return num.toString().replace(reg, ',')
+  }
+
+  const createSeriesData = (data: any) => {
+    return {
+      type: 'pie',
+      roseType: 'radius',
+      radius: ['25%', '60%'],
+      center: ['50%', '50%'],
+      data: data,
+      // hoverAnimation: false,
+      itemStyle: {
+        normal: {
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+      },
+      labelLine: {
+        noraml: {
+          length: 20,
+          length2: 120,
+          lineStyle: {
+            // color: '#e6e6e6'
+          },
+        },
+      },
+      label: {
+        normal: {
+          formatter: (params: any) => {
+            return (
+              '{icon|●}{name|' +
+              params.name +
+              '}\n{value|' +
+              formatNumber(params.value) +
+              '}'
+            )
+          },
+          // padding: [0 , -100, 25, -100],
+          rich: {
+            icon: {
+              fontSize: 16,
+              color: 'inherit',
+            },
+            name: {
+              fontSize: 18,
+              padding: [0, 0, 0, 10],
+              color: '#000',
+            },
+            value: {
+              fontSize: 14,
+              fontWeight: 'bolder',
+              padding: [10, 0, 0, 20],
+              color: 'inherit',
+              // color: '#333333'
+            },
+          },
+        },
+      },
+    }
+  }
+
+  const title = '总量'
+
+  const total = originData.reduce((a: any, b: any) => {
+    return a + b.value * 1
+  }, 0)
+
+  const opt = _merge(defaultThemeOpt(), {
+    tooltip: {
+      trigger: 'item',
+    },
+    title: [
+      {
+        text:
+          '{name|' +
+          title +
+          '}\n{val|' +
+          formatNumber(total) +
+          '}',
+        top: 'center',
+        left: 'center',
+        textStyle: {
+          rich: {
+            name: {
+              fontSize: 14,
+              fontWeight: 'normal',
+              color: '#000',
+              padding: [10, 0],
+            },
+            val: {
+              fontSize: 32,
+              fontWeight: 'bolder',
+              color: '#000',
+            },
+          },
+        },
+      },
+      {
+        text: '单位：个',
+        top: 20,
+        left: 20,
+        textStyle: {
+          fontSize: 14,
+          color: '#666666',
+          fontWeight: 400,
+        },
+        show: false,
+      },
+    ],
+    series: [createSeriesData(series.data)],
+  })
+
+  return opt as EChartsOption
+}

packages/charts/src/charts/pie/pie02.ts

@@ -0,0 +1,147 @@
+import { defaultThemeOpt } from '../../utils/defaultOpt'
+import { transformPieDataToSeries } from '../../transform'
+import type { EChartsOption } from 'echarts'
+import * as echarts from 'echarts/core'
+import { _merge, hexToRgba } from '../../utils/index'
+
+const createSeriesData = (data: any) => {
+  return {
+    name: '',
+    type: 'pie',
+    roseType: false,
+    center: ['35%', '50%'],
+    radius: ['45%', '60%'],
+    avoidLabelOverlap: true,
+    label: {
+      normal: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
+        show: true,
+        textStyle: {
+          color: '#333',
+          fontSize: 12,
+        },
+      },
+    },
+    selected: {},
+    data,
+  }
+}
+/**
+ *
+ * @param originData 原始数据
+ */
+export const build = (originData: any): EChartsOption => {
+  const colors = [
+    '#67C8FF',
+    '#FF6666',
+    '#669AFF',
+    '#F4A54E',
+    '#F284F3',
+    '#41C8FF',
+    '#FF2366',
+    '#749AFF',
+    '#F4A22E',
+    '#F124F3',
+    '#FF6767',
+    '#FF9D6B',
+    '#D3C95A',
+    '#55CA69',
+    '#16D8B8',
+    '#67CCFF',
+    '#6895FF',
+    '#B095FF',
+    '#D05CFF',
+    '#FF63AD',
+  ]
+  const { category, series } = transformPieDataToSeries(
+    originData,
+    colors
+  )
+  // console.log(category, series)
+
+  const label = {
+    show: true,
+    position: 'center',
+    rich: {
+      a: {
+        fontWeight: 700,
+        fontSize: 22,
+        lineHeight: 20,
+      },
+      b: {
+        fontWeight: 700,
+        fontSize: 16,
+        lineHeight: 24,
+      },
+    },
+    formatter: function (params: any) {
+      return [
+        '{a|' +
+          params.percent +
+          '}' +
+          '\n' +
+          '{b|' +
+          params.name +
+          '}',
+      ]
+    },
+  }
+  const legend = {
+    type: 'scroll',
+    orient: 'vertical',
+    right: 10,
+    top: 'center',
+    bottom: 20,
+    itemWidth: 8,
+    itemHeight: 8,
+    align: 'left',
+    textStyle: {
+      fontSize: 12,
+      padding: [0, 0, 0, 5],
+      rich: {
+        value: {
+          fontSize: 14,
+          fontWeight: 400,
+        },
+      },
+    },
+    formatter: (name: any) => {
+      const item = series.find((i: any) => {
+        return i.name === name
+      })
+      return name + '  {value|' + item.value + '}'
+    },
+    data: category,
+  }
+  const title = {
+    left: 'center',
+    top: 'top',
+    textStyle: {
+      fontSize: '16px',
+      color: '#333',
+      fontWeight: 400,
+    },
+  }
+  const tooltip = {
+    trigger: 'item',
+    extraCssText:
+      'box-shadow:  0px 0px 5px 0px rgba(139, 146, 190, 0.2); color:rgba(77, 77, 77, 0.9); fontSize:14px; padding:12px',
+    backgroundColor: 'rgba(236, 242, 255, 0.9)',
+    formatter: '{b}</br>占比：{d}%</br>数量：{c}',
+  }
+  const seriesData = [createSeriesData(series)]
+
+  const opt = _merge(defaultThemeOpt(), {
+    tooltip,
+    title,
+    legend,
+    label,
+    colors,
+    series: seriesData,
+  })
+
+  return opt as EChartsOption
+}

packages/charts/src/index.vue

@@ -81,7 +81,8 @@ export default defineComponent({
       loading,
       loadingOptions,
       data,
-      options,
+      chartType,
+      subChartType,
     } = toRefs(props)
 
     const realTheme = computed(
@@ -131,7 +132,11 @@ export default defineComponent({
       function commit() {
         const opt = option || realOption.value
         if (opt) {
-          const newopt = build(data.value)
+          const newopt = build(
+            data.value,
+            chartType.value,
+            subChartType.value
+          )
           instance.setOption(
             newopt,
             realUpdateOptions.value
@@ -226,7 +231,9 @@ export default defineComponent({
 
     watch(data, function (newval, oldval) {
       if (newval && newval.length) {
-        setOption(build(newval))
+        setOption(
+          build(newval, chartType.value, subChartType.value)
+        )
       }
     })
 

packages/charts/src/props/index.ts

@@ -8,6 +8,11 @@ import type {
   UpdateOptions,
   AutoresizeProp,
 } from '../types'
+import type {
+  ChartTypes,
+  SubChartType,
+} from '../types/chart'
+
 export const defaultProps = {
   data: {
     type: Array as PropType<OriginData<any>[]>,
@@ -43,4 +48,12 @@ export const defaultProps = {
     type: Object as PropType<LoadingOptions>,
     default: () => {},
   },
+  /**
+   * 一级图表类型
+   */
+  chartType: String as PropType<ChartTypes>,
+  /**
+   * 二级图标类型
+   */
+  subChartType: String as PropType<SubChartType>,
 }