From 0b8b77e3320c45260f28f92dadf9c66515d75328 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:50:06 +0800
Subject: [PATCH] fix: 样式调整
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 88 ++------------------------------------------
1 files changed, 4 insertions(+), 84 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 3840aa0..9346680 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -3,7 +3,6 @@
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
<div style="height: 70%">
- <div style="height: 100%">
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -28,7 +27,6 @@
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
-import { productCategoryDistribution } from '@/api/viewIndex.js'
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
@@ -47,29 +45,6 @@
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
const landLegend = {
-// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
-const workInProcessXAxis = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: {
- color: '#B8C8E0',
- interval: 0,
- rotate: 25
- },
- data: [],
- },
-])
-
-const workInProcessYAxis = [
- {
- type: 'value',
- axisLabel: { color: '#B8C8E0' },
- name: '',
- },
-]
-
-const workInProcessBarLegend = {
show: false,
icon: 'circle',
data: [],
@@ -139,33 +114,26 @@
const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
const dot = `{${dotKey}|} `
if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
- // 鐢� marker 鏄剧ず涓庢墖鍖哄悓鑹茬殑灏忓渾鐐癸紝鍐嶆樉绀虹埗绾у悕绉帮紝鍚庨潰鍒楀嚭 children 鐨� name + value
+ // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
return [
`${dot}{parent|${parentName} ${parentValue}}`,
- ...children.map((c) => `{child|${c.name} ${c.value || 0}}`),
+ ...children.map((c) => `{child|${c.name}}`),
].join('\n')
},
},
labelLine: {
show: true,
- length: 40,
- length2: 40,
+ length: 20,
+ length2: 20,
lineStyle: {
color: '#B8C8E0',
},
- name: '浜у搧鏁伴噺',
- type: 'bar',
- barWidth: 25,
- barGap: 0,
- emphasis: {
- focus: 'series',
},
itemStyle: {
color: function (params) {
return landColors[params.dataIndex % landColors.length]
},
},
- // 鍒濆缁戝畾涓哄搷搴斿紡鏁版嵁婧愶紝鍚庣画閫氳繃鎺ュ彛濉厖
data: dataList.value,
},
{
@@ -174,19 +142,6 @@
radius: ['35%', '40%'],
center: ['50%', '50%'],
silent: true,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#4EE4FF' },
- { offset: 1, color: '#00A4ED' },
- ],
- },
- borderRadius: [4, 4, 0, 0]
- },
label: {
show: false,
},
@@ -203,7 +158,6 @@
const chartStyle = {
width: '100%',
height: '150%',
- height: '100%',
}
const loadData = async () => {
@@ -224,44 +178,10 @@
landLegend.data = []
landSeries.value[0].data = []
}
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '15%',
- containLabel: true,
-}
-
-const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- formatter: function (params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
- })
- return result
- },
-}
-
-// 鑾峰彇鍚勪骇鍝佸ぇ绫诲垎甯�
-const getProductCategoryDistribution = () => {
- productCategoryDistribution()
- .then((res) => {
- if (res.code === 200 && res.data && res.data.items) {
- workInProcessXAxis.value[0].data = res.data.items.map(item => item.name)
- workInProcessBarSeries.value[0].data = res.data.items.map(item => parseInt(item.value))
- }
- })
- .catch((error) => {
- console.error('鑾峰彇鍚勪骇鍝佸ぇ绫诲垎甯冨け璐�:', error)
- })
}
onMounted(() => {
loadData()
- getProductCategoryDistribution()
})
</script>
--
Gitblit v1.9.3