From c0444705e749bfe400c3cc5726c2ec93696a5072 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 24 三月 2025 14:26:32 +0800
Subject: [PATCH] feat
---
src/components/datascreen/LeftPanel.vue | 108 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 67 insertions(+), 41 deletions(-)
diff --git a/src/components/datascreen/LeftPanel.vue b/src/components/datascreen/LeftPanel.vue
index b71e689..95a1ca1 100644
--- a/src/components/datascreen/LeftPanel.vue
+++ b/src/components/datascreen/LeftPanel.vue
@@ -53,28 +53,9 @@
</template>
<script>
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { LineChart } from 'echarts/charts';
-import {
- GridComponent,
- TooltipComponent,
- LegendComponent
-} from 'echarts/components';
-import VChart from 'vue-echarts';
-
-use([
- CanvasRenderer,
- LineChart,
- GridComponent,
- TooltipComponent,
- LegendComponent
-]);
-
export default {
name: 'LeftPanel',
components: {
- VChart
},
data() {
return {
@@ -93,6 +74,7 @@
finalPercentages: [
50, 85, 80, 75, 70, 65, 60, 55
],
+
lineOption: {
tooltip: {
trigger: 'axis',
@@ -103,17 +85,18 @@
legend: {
data: ['安置面积异常', '补偿金额异常'],
textStyle: {
- color: '#C0CFDC',
+ color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12
},
+ color: ['#FEDB65', '#00F2F0'],
icon: 'circle',
- itemWidth: 8,
- itemHeight: 8,
- top: 0,
+ itemWidth: 6,
+ itemHeight: 6,
+ top: 5,
right: 0
},
grid: {
- top: '15%',
+ top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
@@ -126,14 +109,14 @@
axisLine: {
show: true,
lineStyle: {
- color: '#1B374A'
+ color: '#1F2C5C'
}
},
axisTick: {
show: false
},
axisLabel: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12
}
},
@@ -141,14 +124,13 @@
type: 'value',
name: '单位：次',
nameTextStyle: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12,
- padding: [0, 0, 0, 30]
},
splitLine: {
lineStyle: {
- color: '#1B374A',
- type: 'dashed'
+ color: '#1F2C5C',
+ type: 'solid'
}
},
axisLine: {
@@ -158,7 +140,7 @@
show: false
},
axisLabel: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12
}
},
@@ -168,6 +150,9 @@
type: 'line',
smooth: true,
symbol: 'none',
+ itemStyle: {
+ color: '#FEDB65'
+ },
areaStyle: {
opacity: 0.8,
color: {
@@ -178,16 +163,35 @@
y2: 1,
colorStops: [{
offset: 0,
- color: 'rgba(255, 187, 0, 0.3)'
+ color: '#6C1F0D'
}, {
- offset: 1,
- color: 'rgba(255, 187, 0, 0)'
+ offset: 0.7,
+ color: 'rgba(255,102,0,0)'
}]
}
},
lineStyle: {
- width: 2,
- color: '#FFBB00'
+ width: 4,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#AE5112' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#AE5112' // 100% 处的颜色
+ }]
+ }
},
data: [150, 180, 230, 280, 260, 100]
},
@@ -196,6 +200,9 @@
type: 'line',
smooth: true,
symbol: 'none',
+ itemStyle: {
+ color: '#00F2EF'
+ },
areaStyle: {
opacity: 0.8,
color: {
@@ -206,16 +213,35 @@
y2: 1,
colorStops: [{
offset: 0,
- color: 'rgba(0, 255, 255, 0.3)'
+ color: 'rgba(28,0,255,0.8)'
}, {
- offset: 1,
- color: 'rgba(0, 255, 255, 0)'
+ offset: 0.7,
+ color: 'rgba(28,0,255,0)'
}]
}
},
lineStyle: {
- width: 2,
- color: '#00FFFF'
+ width: 4,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#0E5FFF' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#0E5FFF' // 100% 处的颜色
+ }]
+ }
},
data: [200, 250, 380, 450, 380, 300]
}
--
Gitblit v1.7.1