From f69b7ff73aab2174cb17c7c3e4e716c6e5170e56 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 20 九月 2024 14:38:03 +0800
Subject: [PATCH] 运行监控导出加标签
---
src/views/screen/components/lineChart.vue | 103 +++++++++++++++++++++++----------------------------
1 files changed, 47 insertions(+), 56 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index f2335f6..ea1bd1f 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -13,21 +13,26 @@
default: null,
},
},
- data () {
+ data() {
return {
- dataList: {
- name: [],
- data1: [],
- data2: [],
- },
- // 閰嶇疆
- 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
@@ -40,9 +45,9 @@
// 鍥句緥缁勪欢
legend: {
type: 'plain',
- top: 20,
- data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
- textStyle: {
+ top: 20,
+ data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
+ textStyle: {
color: '#A0AEC0'
}
},
@@ -50,41 +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: this.dataList.name,
+ 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
}
},
// 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛�
@@ -92,13 +97,13 @@
{
name: '宸插鐞嗗伐鍗曟暟',
type: 'line',
- data: this.dataList.data1,
+ 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)'}
])
},
@@ -113,13 +118,13 @@
{
name: '鏈鐞嗗伐鍗曟暟',
type: 'line',
- data: this.dataList.data2,
+ 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)'}
])
},
@@ -132,17 +137,9 @@
}
}
]
- },
-
- 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()
})
@@ -152,26 +149,20 @@
watch: {
workOrderRegion: {
handler(newV, oldV) {
- let name = [];
- let data1 = [];
- let data2 = [];
- this.workOrderRegion.map((item) => {
- name.push(item.area);
- data1.push(item.doneNum);
- data2.push(item.todoNum);
+ this.name =[]
+ this.data1=[]
+ this.data2=[]
+ newV.map((item) => {
+ this.name.push(item.area);
+ this.data1.push(item.doneNum);
+ this.data2.push(item.todoNum);
})
- console.log(this, "ddddd")
- console.log(this.dataList, "ddddd")
- this.dataList.name = name;
- console.log(name)
- this.dataList.data1 = data1;
- this.dataList.data2 = data2;
this.initDrawLine()
},
deep: true
}
},
- mounted () {
+ mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.initDrawLine()
--
Gitblit v1.8.0