feat：完善景区页面

2024-12-18 11:08:13 +08:00
parent 1108aafed4
commit 44c87aa7ff
8 changed files with 189 additions and 22 deletions
--- a/src/components/Pie/index.vue
+++ b/src/components/Pie/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { guid } from '@/utils/util'
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
+  let id = ref(guid())
+  let pieChart = null
+  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,
+    title: {
+      show: true,
+      text: '100%',
+      itemGap: 10,
+      x: 'center',
+      y: '30%',
+      subtext: '脱岗率',
+      textStyle: {
+        fontSize: fitChartSize(24),
+        fontWeight: 'bold',
+        color: '#ffffff'
+      },
+      subtextStyle: {
+        fontSize: fitChartSize(12),
+        fontWeight: 'bold',
+        color: '#7894A8'
+      }
+    },
+    legend: {
+      top: 'bottom',
+      left: 'center',
+      orient: 'horizontal',
+      data: dataList,
+      itemWidth: 16,
+      itemHeight: 16,
+      itemGap: 10
+    },
+    series: [
+      // 展示层
+      {
+        type: 'pie',
+        center: ['50%', '30%'],
+        radius: ['40%', '55%'],
+        itemStyle: {
+          borderWidth: fitChartSize(2), //描边线宽
+          borderColor: '#093672'
+        },
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: true,
+          normal: {
+            length: 20,
+            length2: 40,
+            align: 'center',
+            lineStyle: {
+              width: 1
+            }
+          }
+        },
+        data: dataList
+      }
+    ]
+  }
+  const resize = () => {
+    if (pieChart) {
+      pieChart.dispose()
+      pieChart = null
+      init()
+    }
+  }
+
+  const init = () => {
+    const dom = document.getElementById(id.value)
+    pieChart = echarts.init(dom)
+    pieChart.setOption({
+      ...defaultCofig
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', resize)
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss"></style>