From b7d7ba71ac11b10d6cd8dedca24ffaf751dc81e1 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期三, 18 九月 2024 16:17:26 +0800
Subject: [PATCH] 大屏优化
---
src/views/screen/components/lineChart.vue | 110 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 64 insertions(+), 46 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index cc00d39..ea1bd1f 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -3,18 +3,36 @@
</template>
<script>
+import * as echarts from "echarts";
+
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%'
},
tooltip: {
trigger: 'item',
- formatter: function (params) {
+ formatter: function (params) {
let str = '<div><p>' + params.name + '</p></div>'
str += params.marker + params.seriesName + '锛�' + params.data
return str
@@ -27,9 +45,9 @@
// 鍥句緥缁勪欢
legend: {
type: 'plain',
- top: 20,
- data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
- textStyle: {
+ top: 20,
+ data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
+ textStyle: {
color: '#A0AEC0'
}
},
@@ -37,49 +55,41 @@
// X杞撮厤缃�
xAxis: {
type: 'category',
- boundaryGap: false,
- axisTick: {
+ boundaryGap: false,
+ axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: '#A0AEC0',
- type: 'solid'
+ type: 'solid'
}
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
- margin: 20,
- rotate: 30
+ fontSize: 12,
+ margin: 20,
+ rotate: 30
},
- data: [
- '瀵岄『鍖�',
- '澶у畨鍖�',
- '鑷祦鏅尯',
- '璐℃櫙鍖�',
- '瀹瑰幙',
- '楂樻柊鍖�',
- '娌挎哗鍖�'
- ]
+ data: that.name,
},
// Y杞撮厤缃�
yAxis: {
type: 'value',
- splitLine: {
+ splitLine: {
lineStyle: {
color: '#A0AEC0',
- type: 'dashed'
+ type: 'dashed'
}
},
splitNumber: 5,
- axisLine: {
+ axisLine: {
show: false
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
- margin: 15
+ fontSize: 12,
+ margin: 15
}
},
// 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛�
@@ -87,13 +97,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 +118,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 +137,32 @@
}
}
]
- },
-
- 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