feat：完善整体样式

2025-01-02 18:32:49 +08:00
parent d67ac75031
commit ab1ab210a9
23 changed files with 744 additions and 305 deletions
--- a/src/views/scenic/components/jam.vue
+++ b/src/views/scenic/components/jam.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
+  var title = ['企业', '农业', '工业', '纺织']
+  var dataValue = ['15', '30', '35', '20']
+  var dataList = title.map((item, index) => {
+    return {
+      name: item,
+      value: dataValue[index]
+    }
+  })
+
+  var defaultCofig = {
+    color: colorList,
+    series: [
+      {
+        type: 'pie',
+        startAngle: 360,
+        center: ['50%', '40%'],
+        radius: ['65%', '80%'],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: 50,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 150, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(0, 150, 255, 0.47)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 150, 255, 0)'
+                  }
+                ]
+              }
+            }
+          },
+
+          {
+            name: 'bottom',
+            value: 50,
+            itemStyle: {
+              color: 'transparent'
+            }
+          }
+        ]
+      },
+      {
+        type: 'pie',
+        center: ['50%', '40%'],
+        radius: ['55%', '70%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          formatter: function (o) {
+            return `{value|123456}` + '\n' + `{name|整改率}`
+          },
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(24),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#7894A8',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: dataList
+      }
+    ]
+  }
+
+  const init = () => {
+    setOption({
+      ...defaultCofig,
+      ...props.config
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss"></style>