From 4b96aa60686f3b4e03ece37d676c24cc103539fe Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 27 九月 2024 17:55:52 +0800
Subject: [PATCH] 动态列迁移
---
src/views/screen/components/lineChart.vue | 92 ++++++++++++++++++++++++++++------------------
1 files changed, 56 insertions(+), 36 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index cc00d39..f748faa 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -3,14 +3,32 @@
</template>
<script>
+
export default {
name: 'lineChart',
- data () {
+ props: {
+ workOrderRegion: {
+ type: Array,
+ default: null,
+ },
+ },
+ data() {
return {
- // 閰嶇疆
- option: {
+ name: [],
+ data1: [],
+ data2: [],
+
+ myDrawLine: null
+ }
+ },
+
+ methods: {
+ initDrawLine() {
+ const that = this
+ let option = {
grid: {
- width: '100%'
+ left: '15%',
+ right: '5%'
},
tooltip: {
trigger: 'item',
@@ -20,7 +38,7 @@
return str
},
textStyle: {
- fontSize: 12
+ fontSize: 16
}
},
@@ -30,7 +48,8 @@
top: 20,
data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
textStyle: {
- color: '#A0AEC0'
+ color: '#A0AEC0',
+ fontSize: 14
}
},
@@ -49,19 +68,11 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
+ fontSize: 14,
margin: 20,
rotate: 30
},
- data: [
- '瀵岄『鍖�',
- '澶у畨鍖�',
- '鑷祦鏅尯',
- '璐℃櫙鍖�',
- '瀹瑰幙',
- '楂樻柊鍖�',
- '娌挎哗鍖�'
- ]
+ data: that.name,
},
// Y杞撮厤缃�
yAxis: {
@@ -78,8 +89,8 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
- margin: 15
+ fontSize: 14,
+ margin: 5
}
},
// 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛�
@@ -87,13 +98,13 @@
{
name: '宸插鐞嗗伐鍗曟暟',
type: 'line',
- data: [120, 200, 150, 80, 70, 110, 130],
+ data: that.data1,
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#00a2ff' },
- { offset: 0.5, color: 'rgba(0,162,255,0.1)' },
- { offset: 1, color: 'rgba(0,162,255,0.1)' }
+ {offset: 0, color: '#00a2ff'},
+ {offset: 0.5, color: 'rgba(0,162,255,0.1)'},
+ {offset: 1, color: 'rgba(0,162,255,0.1)'}
])
},
@@ -108,13 +119,13 @@
{
name: '鏈鐞嗗伐鍗曟暟',
type: 'line',
- data: [90, 140, 160, 55, 88, 99, 100],
+ data: that.data2,
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#e4b54f' },
- { offset: 0.5, color: 'rgba(228,181,79,0.1)' },
- { offset: 1, color: 'rgba(228,181,79,0.1)' }
+ {offset: 0, color: '#e4b54f'},
+ {offset: 0.5, color: 'rgba(228,181,79,0.1)'},
+ {offset: 1, color: 'rgba(228,181,79,0.1)'}
])
},
@@ -127,24 +138,33 @@
}
}
]
- },
+ }
- myDrawLine: null
- }
- },
-
- methods: {
- initDrawLine () {
- const that = this
that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
- that.myDrawLine.setOption(that.option)
+ that.myDrawLine.setOption(option)
window.addEventListener('resize', function () {
that.myDrawLine.resize()
})
}
},
- mounted () {
+ watch: {
+ workOrderRegion: {
+ handler(newV, oldV) {
+ this.name = []
+ this.data1 = []
+ this.data2 = []
+ newV.map((item) => {
+ this.name.push(item.area);
+ this.data1.push(item.doneNum);
+ this.data2.push(item.todoNum);
+ })
+ this.initDrawLine()
+ },
+ deep: true
+ }
+ },
+ mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.initDrawLine()
--
Gitblit v1.8.0