feat：完善功能

src/components/TicketSource/index.vue

@@ -0,0 +1,190 @@
+<!-- 购买来源 -->
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+  import styleUtil from '@/utils/styleUtil'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
+  let params = null
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const getSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        type: 'bar',
+        name: item.name,
+        clockwise: false,
+        silent: true,
+        roundCap: true,
+        barWidth: '13%',
+        showBackground: true,
+        coordinateSystem: 'polar',
+        data: [item.value]
+      }
+    })
+  }
+
+  const init = () => {
+    if (!params) {
+      params = {
+        legend: {
+          show: true,
+          x: 'center',
+          y: '74%',
+          itemHeight: fitChartSize(12),
+          itemWidth: fitChartSize(12),
+          itemGap: fitChartSize(6),
+          formatter: function (name) {
+            let obj = props.list.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(12)
+              },
+              value: {
+                color: '#00D5F6',
+                fontWeight: 600,
+                fontSize: fitChartSize(12)
+              }
+            }
+          }
+        },
+        color: ['#F15A25', '#01FEFE', '#12B5FD'],
+        polar: {
+          center: ['50%', '40%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: getSeriesData()
+      }
+    } else {
+      params.series = getSeriesData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .legend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @mixin icon($column) {
+      padding: 0 vw(10);
+      height: vh(70);
+      display: flex;
+      flex-direction: $column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: vw(8);
+    }
+    &-item {
+      color: #fff;
+    }
+    &-item:nth-child(1) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(2) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(3) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(4) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(5) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(6) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item-label {
+      font-weight: 400;
+      font-size: vw(12);
+      line-height: vh(14);
+    }
+    &-item-value {
+      font-weight: bold;
+      font-size: vw(16);
+      line-height: vh(18);
+    }
+  }
+</style>