From 3717e24abe2d2fd348f3cd13ad903dca3af167f1 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期四, 05 十二月 2024 16:16:03 +0800
Subject: [PATCH] 拆分省厅标签
---
src/views/screen/components/lineChart.vue | 87 ++++++++++++++++++++-----------------------
1 files changed, 40 insertions(+), 47 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index f2335f6..f748faa 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -3,7 +3,6 @@
</template>
<script>
-import * as echarts from "echarts";
export default {
name: 'lineChart',
@@ -13,17 +12,23 @@
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%'
+ left: '15%',
+ right: '5%'
},
tooltip: {
trigger: 'item',
@@ -33,7 +38,7 @@
return str
},
textStyle: {
- fontSize: 12
+ fontSize: 16
}
},
@@ -43,7 +48,8 @@
top: 20,
data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
textStyle: {
- color: '#A0AEC0'
+ color: '#A0AEC0',
+ fontSize: 14
}
},
@@ -62,11 +68,11 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
+ fontSize: 14,
margin: 20,
rotate: 30
},
- data: this.dataList.name,
+ data: that.name,
},
// Y杞撮厤缃�
yAxis: {
@@ -83,8 +89,8 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 12,
- margin: 15
+ fontSize: 14,
+ margin: 5
}
},
// 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛�
@@ -92,13 +98,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 +119,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 +138,10 @@
}
}
]
- },
+ }
- 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 +151,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