From 519211ac232866afe6b081ae4a97916ad5f1d7d2 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:58:57 +0800
Subject: [PATCH] fix: 排名样式修改
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 195 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 195 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
new file mode 100644
index 0000000..9346680
--- /dev/null
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -0,0 +1,195 @@
+<template>
+ <div>
+ <PanelHeader title="浜у搧澶х被" />
+ <div class="panel-item-customers">
+ <div style="height: 70%">
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :legend="landLegend"
+ :series="landSeries"
+ :tooltip="landTooltip"
+ :color="landColors"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 100%"
+ class="land-chart"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+import PanelHeader from '../PanelHeader.vue'
+import { productCategoryDistribution } from '@/api/viewIndex.js'
+
+// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
+const dataList = ref([])
+
+// 棰滆壊鍒楄〃
+const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
+
+// label 瀵屾枃鏈細涓烘瘡涓鑹茬敓鎴愪竴涓皬鍦嗙偣鏍峰紡锛堢‘淇濆湪 label 涓彲瑙侊級
+const dotRich = landColors.reduce((acc, color, idx) => {
+ acc[`dot${idx}`] = {
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: color,
+ align: 'center',
+ }
+ return acc
+}, {})
+
+// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
+const landLegend = {
+ show: false,
+ icon: 'circle',
+ data: [],
+ right: '8%',
+ top: '40%',
+ orient: 'vertical',
+ itemGap: 14,
+ itemWidth: 6,
+ itemHeight: 6,
+ textStyle: {
+ fontSize: 12,
+ rich: {
+ unit: {
+ color: '#fff',
+ fontSize: 12,
+ padding: [0, 10, 0, 0],
+ },
+ text: {
+ width: 60,
+ color: '#fff',
+ fontSize: 12,
+ },
+ },
+ },
+ formatter: function (name) {
+ const list = dataList.value || []
+ const item = list.find((d) => d.name === name)
+ if (!item) return name
+ const val = Number(item.value || 0)
+ const totalValue = list.reduce((sum, it) => sum + Number(it.value || 0), 0)
+ const percent = totalValue ? ((val / totalValue) * 100).toFixed(2) : '0.00'
+ return `{text|${name}}${val}{unit| 鍏》}${percent}{unit|%}`
+ },
+}
+
+// 鎻愮ず妗�
+const landTooltip = {
+ triggerOn: 'click',
+ alwaysShowContent: true,
+ position: function (pt) {
+ return [pt[0], 130]
+ },
+}
+
+// 鍙屽眰鐜舰楗煎浘
+const landSeries = ref([
+ {
+ name: '澶栧湀',
+ type: 'pie',
+ radius: ['35%', '55%'],
+ center: ['50%', '50%'],
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ fontSize: 12,
+ lineHeight: 18,
+ rich: {
+ ...dotRich,
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ },
+ formatter: function (params) {
+ const children = params?.data?.children || []
+ const parentName = params?.data?.name || ''
+ const parentValue = params?.data?.value ?? 0
+ const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
+ const dot = `{${dotKey}|} `
+ if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
+ // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
+ return [
+ `${dot}{parent|${parentName} ${parentValue}}`,
+ ...children.map((c) => `{child|${c.name}}`),
+ ].join('\n')
+ },
+ },
+ labelLine: {
+ show: true,
+ length: 20,
+ length2: 20,
+ lineStyle: {
+ color: '#B8C8E0',
+ },
+ },
+ itemStyle: {
+ color: function (params) {
+ return landColors[params.dataIndex % landColors.length]
+ },
+ },
+ data: dataList.value,
+ },
+ {
+ // 鍐呭湀
+ type: 'pie',
+ radius: ['35%', '40%'],
+ center: ['50%', '50%'],
+ silent: true,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: 'rgba(0, 127, 255, 0.25)',
+ },
+ data: [1],
+ },
+])
+
+const chartStyle = {
+ width: '100%',
+ height: '150%',
+}
+
+const loadData = async () => {
+ try {
+ const res = await productCategoryDistribution()
+ const items = res?.data?.items || []
+ dataList.value = items.map((it) => ({
+ name: it.name,
+ value: Number(it.value || 0),
+ rate: it.rate,
+ children: Array.isArray(it.children) ? it.children : [],
+ }))
+ landLegend.data = dataList.value.map((d) => d.name)
+ landSeries.value[0].data = dataList.value
+ } catch (e) {
+ console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
+ dataList.value = []
+ landLegend.data = []
+ landSeries.value[0].data = []
+ }
+}
+
+onMounted(() => {
+ loadData()
+})
+</script>
+
+<style scoped>
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 420px;
+}
+</style>
--
Gitblit v1.9.3