From 9dd0dba7724d00334d00edad32e2c173c24e7f8e Mon Sep 17 00:00:00 2001
From: LX <768863620@qq.com>
Date: Tue, 20 Feb 2024 15:58:26 +0800
Subject: [PATCH] no message

---
 examples/pages/Login.vue                      |   6 +-
 resource/Border/BorderBox7/BorderBox.vue      |  40 ++---
 .../PieChart2/BasicPieChart/BasicPieChart.vue | 135 ++++++++++++++++
 .../echarts/PieChart2/BasicPieChart/config.ts | 144 ++++++++++++++++++
 .../echarts/PieChart2/BasicPieChart/index.ts  |   7 +
 .../echarts/PieChart2/BasicPieChart/type.ts   |  20 +++
 6 files changed, 321 insertions(+), 31 deletions(-)
 create mode 100644 resource/echarts/PieChart2/BasicPieChart/BasicPieChart.vue
 create mode 100644 resource/echarts/PieChart2/BasicPieChart/config.ts
 create mode 100644 resource/echarts/PieChart2/BasicPieChart/index.ts
 create mode 100644 resource/echarts/PieChart2/BasicPieChart/type.ts

diff --git a/examples/pages/Login.vue b/examples/pages/Login.vue
index 57e9391..9f91b76 100644
--- a/examples/pages/Login.vue
+++ b/examples/pages/Login.vue
@@ -2,9 +2,9 @@
   <div class="login">
     <div class="left">
       <div class="name">
-        <span><img class="logo" src="/favicon.ico" alt="" /></span>
-        <span> DataView</span>
-      </div>
+      <span><img class="logo" src="/favicon.ico" alt="" /></span>
+      <span> DataView</span>
+    </div>
       <img class="home" src="/home.png" alt="" />
       <div class="desc">
         <span>最具智能化数据可视化平台</span>
diff --git a/resource/Border/BorderBox7/BorderBox.vue b/resource/Border/BorderBox7/BorderBox.vue
index 7563801..15011e1 100644
--- a/resource/Border/BorderBox7/BorderBox.vue
+++ b/resource/Border/BorderBox7/BorderBox.vue
@@ -28,46 +28,30 @@
         :stroke="mergedColor[0]"
         :filter="`url(#${filterId})`"
         :points="`
-        ${(width - titleWidth) / 2}, 30
-      20, 30 7, 50 7, ${50 + (height - 167) / 2}
+        ${(width - titleWidth) / 2}, 51
+      20, 51 7, 50 7, ${50 + (height - 167) / 2}
       13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
       7, ${140 + (height - 167) / 2} 7, ${height - 27}
       20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
-      ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+      ${width - 7}, ${140 + (height + 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
       ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
-      ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+      ${width - 7}, 50 ${width - 40}, 51 ${(width + titleWidth) / 2}, 51
       ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
-      ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
-      ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+      ${(width - titleWidth) / 2}, 51 ${(width - titleWidth) / 2 + 20}, 82
+      ${(width + titleWidth) / 2 - 20}, 82 ${(width + titleWidth) / 2}, 51
       `"
       />
 
-      <polygon
-        :stroke="mergedColor[0]"
-        fill="transparent"
-        :points="`
-        ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
-      ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
-      `"
-      />
 
-      <polygon
-        :stroke="mergedColor[0]"
-        fill="transparent"
-        :points="`
-        ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
-      ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
-      `"
-      />
 
       <polygon
         :stroke="mergedColor[0]"
         :fill="fade(mergedColor[1], 30)"
         :filter="`url(#${filterId})`"
         :points="`
-        ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
-      ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
-      ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        ${(width + titleWidth) / 2 - 4}, 51 ${(width + titleWidth) / 2 - 22}, 11
+      ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 5}, 51
+      ${(width - titleWidth) / 2 + 23}, 78 ${(width + titleWidth) / 2 - 22}, 78
       `"
       />
 
@@ -183,9 +167,9 @@
         ref="textRef"
         class="dv-border-box-11-title"
         :x="`${width / 2}`"
-        y="32"
-        fill="#ffffff"
-        font-size="18"
+        y="48"
+        fill="#A8F4FF"
+        font-size="48"
         text-anchor="middle"
         dominant-baseline="middle"
       >
diff --git a/resource/echarts/PieChart2/BasicPieChart/BasicPieChart.vue b/resource/echarts/PieChart2/BasicPieChart/BasicPieChart.vue
new file mode 100644
index 0000000..f2c1331
--- /dev/null
+++ b/resource/echarts/PieChart2/BasicPieChart/BasicPieChart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div ref="chartEl" v-resize="resizeHandler"></div>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption, PieSeriesOption } from 'echarts'
+import type { ResponseData } from 'open-data-v/base'
+import { useData, useProp } from 'open-data-v/base'
+import { onMounted, ref } from 'vue'
+
+import { useEchart } from '../../hooks'
+import { compareResetValue } from '../../utils'
+import type BasicLineChartComponent from './config'
+import type { BasicLineChart } from './type'
+
+const chartEl = ref<ElRef>(null)
+
+let globalOption: EChartsOption
+const props = defineProps<{
+  component: BasicLineChartComponent
+}>()
+
+const { updateEchart, resizeHandler } = useEchart(chartEl)
+let chartData:
+  | Array<{ label: string; value: number }>
+  | ResponseData<Array<{ label: string; value: number }>>['afterData'] = []
+const dataChange = (resp: any, _?: string) => {
+  if (resp.status === 'SUCCESS') {
+    chartData = resp.afterData
+    updateData(chartData)
+  }
+
+  updateData(chartData)
+}
+useData(props.component, dataChange)
+const propValueChange = () => {
+  updateData(chartData)
+}
+
+const { propValue } = useProp<BasicLineChart>(props.component, propValueChange)
+
+onMounted(async () => {
+  globalOption = getOption()
+  updateEchart(globalOption)
+})
+const getOption = () => {
+  const option: EChartsOption = {
+    grid: {
+      top: '10%',
+      left: '3%',
+      right: '4%',
+      bottom: '0%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      show: propValue.legend.isShow,
+      top: '5%',
+      left: 'center'
+    },
+    series: []
+  }
+  let series: PieSeriesOption[] = [
+    {
+      type: 'pie',
+      radius: [`${propValue.series.radiusMin || 0}%`, `${propValue.series.radiusMax || 100}%`],
+      avoidLabelOverlap: true,
+      itemStyle: {
+        borderRadius: propValue.series.borderRadius,
+        borderColor: 'transparent',
+        borderWidth: 10
+      },
+      label: {
+        show: true,
+        color: propValue.label.labelColor,
+        fontSize: propValue.label.labelSize,
+        alignTo: 'edge',
+        formatter: '{name|{b}}',
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        rich: {
+          time: {
+            fontSize: 20,
+            color: '#999'
+          }
+        }
+      },
+      emphasis: {
+        label: {
+          show: propValue.label.isShow,
+          fontSize: propValue.label.labelSize,
+          fontWeight: propValue.label.labelWeight
+
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      labelLine: {
+        show: true,
+        lineStyle: {
+          width : 2
+        }
+      },
+      data: []
+    }
+  ]
+  option.series = series
+  return option as EChartsOption
+}
+
+const updateData = (resp: Array<{ label: string; value: number }>) => {
+  const upperLimit = propValue.data.upperLimit
+  const lowerLimit = propValue.data.lowerLimit
+  const data = resp.map((ele) => {
+    return {
+      value: compareResetValue(Number(ele.value), upperLimit, lowerLimit),
+      label: ele.label
+    }
+  })
+  globalOption = getOption()
+  globalOption.series![0].data = data.map((el) => {
+    return {
+      value: el.value,
+      name: el.label
+    }
+  })
+  updateEchart(globalOption)
+}
+</script>
diff --git a/resource/echarts/PieChart2/BasicPieChart/config.ts b/resource/echarts/PieChart2/BasicPieChart/config.ts
new file mode 100644
index 0000000..198e34a
--- /dev/null
+++ b/resource/echarts/PieChart2/BasicPieChart/config.ts
@@ -0,0 +1,144 @@
+import type { MetaContainerItem } from 'open-data-v/base'
+import { ComponentGroup, CustomComponent, DataMode, FormType } from 'open-data-v/base'
+import { h } from 'vue'
+
+export const componentName = 'BasicPieChart2'
+class BasicPieChartComponent extends CustomComponent {
+  constructor(id?: string, name?: string, icon?: string) {
+    super({
+      component: componentName,
+      group: ComponentGroup.PIE,
+      name: name ? name : '基础饼状图2',
+      id,
+      width: 520,
+      height: 260,
+      icon,
+      dataMode: DataMode.UNIVERSAL
+    })
+  }
+
+  _prop: MetaContainerItem[] = [
+    {
+      label: '数据配置',
+      prop: 'data',
+      children: [
+        {
+          prop: 'upperLimit',
+          label: '上限',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 150
+          }
+        },
+        {
+          prop: 'lowerLimit',
+          label: '下限',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 0
+          }
+        }
+      ]
+    },
+    {
+      label: '图例',
+      prop: 'legend',
+      children: [
+        {
+          prop: 'isShow',
+          label: '是否显示',
+          type: FormType.SWITCH,
+          props: {
+            defaultValue: true
+          }
+        }
+      ]
+    },
+    {
+      label: '标签',
+      prop: 'label',
+      children: [
+        {
+          prop: 'isShow',
+          label: '是否显示',
+          type: FormType.SWITCH,
+          props: {
+            defaultValue: true
+          }
+        },
+        {
+          prop: 'labelColor',
+          label: '文字颜色',
+          type: FormType.COLOR,
+          props: {
+            defaultValue: '#00BAFF'
+          }
+        },
+
+        {
+          prop: 'labelSize',
+          label: '文字大小',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 40
+          }
+        },
+        {
+          prop: 'labelWeight',
+          label: '文字宽度',
+          type: FormType.FONT_WEIGHT,
+          props: {
+            defaultValue: 400
+          }
+        }
+      ]
+    },
+    {
+      label: '系列样式',
+      prop: 'series',
+      children: [
+        {
+          prop: 'radiusMin',
+          label: '半径下限',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 40,
+            suffix: () => h('span', {}, '%')
+          }
+        },
+        {
+          prop: 'radiusMax',
+          label: '半径上限',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 70,
+            suffix: () => h('span', {}, '%')
+          }
+        },
+
+        {
+          prop: 'borderRadius',
+          label: '边框半径',
+          type: FormType.NUMBER,
+          props: {
+            defaultValue: 10
+          }
+        }
+      ]
+    }
+  ]
+  _style: MetaContainerItem[] = []
+  get exampleData() {
+    return [
+      { label: '秦', value: Math.round(Math.random() * 100) },
+      { label: '齐', value: Math.round(Math.random() * 100) },
+      { label: '楚', value: Math.round(Math.random() * 100) },
+      { label: '赵', value: Math.round(Math.random() * 100) },
+      { label: '燕', value: Math.round(Math.random() * 100) },
+      { label: '韩', value: Math.round(Math.random() * 100) },
+      { label: '魏', value: Math.round(Math.random() * 100) }
+    ]
+  }
+}
+
+export default BasicPieChartComponent
diff --git a/resource/echarts/PieChart2/BasicPieChart/index.ts b/resource/echarts/PieChart2/BasicPieChart/index.ts
new file mode 100644
index 0000000..da0330f
--- /dev/null
+++ b/resource/echarts/PieChart2/BasicPieChart/index.ts
@@ -0,0 +1,7 @@
+import BasicPieChartComponent, { componentName } from './config'
+
+export default {
+  componentName,
+  component: () => import('./BasicPieChart.vue'),
+  config: BasicPieChartComponent
+}
diff --git a/resource/echarts/PieChart2/BasicPieChart/type.ts b/resource/echarts/PieChart2/BasicPieChart/type.ts
new file mode 100644
index 0000000..40dd55a
--- /dev/null
+++ b/resource/echarts/PieChart2/BasicPieChart/type.ts
@@ -0,0 +1,20 @@
+export interface BasicLineChart {
+  data: {
+    upperLimit: number
+    lowerLimit: number
+  }
+  label: {
+    isShow: boolean
+    labelColor: string
+    labelSize: number
+    labelWeight: number
+  }
+  series: {
+    radiusMin: number
+    radiusMax: number
+    borderRadius: number
+  }
+  legend: {
+    isShow: boolean
+  }
+}