feat：完善功能

src/components/RegionTop/index.vue

@@ -0,0 +1,166 @@
+<!-- 客源地分析TOP5 -->
+<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'
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
+  const { id, setOption } = useEchart()
+  let params = null
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const init = () => {
+    if (!params) {
+      params = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          show: false
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '4%',
+          bottom: '-4%',
+          containLabel: false
+        },
+        xAxis: [{ max: 100, show: false }],
+        yAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'category',
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              color: '#fff',
+              fontSize: fitChartSize(18),
+              verticalAlign: 'bottom',
+              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
+              inside: true,
+              formatter: function (value) {
+                return `{value|${value}}%`
+              },
+              rich: {
+                value: {
+                  align: 'center',
+                  color: '#fff',
+                  fontSize: fitChartSize(14)
+                }
+              }
+            },
+            data: props.list.map((item) => Number(item.value))
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: fitChartSize(12),
+            showBackground: true,
+            borderRadius: [0, 0, 0, 0],
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            },
+            label: {
+              show: true,
+              offset: [fitChartSize(12), -fitChartSize(20)],
+              color: '#D3E5FF',
+              fontWeight: 500,
+              position: 'left',
+              align: 'left',
+              fontSize: fitChartSize(14),
+              formatter: function (params) {
+                return params.data.name ?? '其他'
+              }
+            },
+            data: props.list.map((item) => {
+              return {
+                name: item.name,
+                value: Number(item.value),
+                itemStyle: {
+                  borderRadius: [0, 0, 0, 0],
+                  color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
+                }
+              }
+            })
+          }
+        ]
+      }
+    }
+    setOption(params)
+  }
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  .top {
+    width: vw(250);
+    height: vh(366);
+  }
+</style>