From e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 09 五月 2024 11:06:43 +0800
Subject: [PATCH] 代码更新
---
src/components/chart/BaseLineChart.vue | 146 ++++++++++++++++++++++++++++++++----------------
1 files changed, 98 insertions(+), 48 deletions(-)
diff --git a/src/components/chart/BaseLineChart.vue b/src/components/chart/BaseLineChart.vue
index e2f5995..de73b0b 100644
--- a/src/components/chart/BaseLineChart.vue
+++ b/src/components/chart/BaseLineChart.vue
@@ -1,5 +1,6 @@
<template>
- <div class="linechar" ref="chart"></div>
+ <div class="linechar"
+ ref="chart"></div>
</template>
<script>
@@ -8,6 +9,12 @@
countCountryDimension,
countProvinceDimension,
GetServicesVisitsCount,
+ countZhPipeMapLength,
+ countLargeCategories,
+ countProjectType,
+ countProjectDown,
+ countProjectTypeNumber,
+ countStorageByProject,
} from "@/api/screen.js"
export default {
props: {
@@ -35,22 +42,44 @@
type: String,
default: "鍏ㄥ浗椤圭洰",
},
+ params: {
+ type: Object,
+ default: () => null,
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
+ title: {
+ type: String,
+ default: "",
+ },
},
- data() {
+ data () {
return {
chart: null,
dataList: [],
}
},
computed: {
- option() {
- let xAxis = []
- let yAxis = []
-
- this.dataList.forEach(item => {
- xAxis.push(item.type)
- yAxis.push(item.count)
- })
+ option () {
+ let xAxis=[]
+ let yAxis=[]
+ const proObj=this.dataList.find(item => item.椤圭洰鍚嶇О==this.project)
+ if(proObj) {
+ Object.keys(proObj).forEach(item => {
+ if(item.toString()!='椤圭洰鍚嶇О') {
+ xAxis.push(item)
+ yAxis.push(proObj[item])
+ }
+ })
+ } else {
+ this.dataList.forEach(item => {
+ let type=item.type||item.projtype
+ xAxis.push(type)
+ yAxis.push(item.count)
+ })
+ }
// let data = [220, 182, 191, 234, 290, 330, 310]
// const sideData = data.map(item => {
@@ -60,16 +89,26 @@
// }
// })
- let option = {
+ var obj=[];
+ for(var i in xAxis) {
+ if(xAxis[i]) {
+ obj.push(xAxis[i])
+ } else {
+ obj.push("鍏朵粬")
+ }
+ }
+
+ xAxis=obj
+ let option={
tooltip: {
trigger: "axis",
},
grid: {
right: "5%",
- top: '10%',
+ top: "10%",
left: "5%",
bottom: "17%",
- containLabel: true
+ containLabel: true,
},
xAxis: {
@@ -79,9 +118,11 @@
lineStyle: {
color: "#fff",
},
+ show: false,
},
nameRotate: 45,
axisTick: {
+ show: false,
alignWithLabel: true,
},
axisLabel: {
@@ -114,7 +155,7 @@
},
series: [
{
- name: "鏈嶅姟璁块棶娆℃暟",
+ name: this.title,
type: "line",
showAllSymbol: false,
lineStyle: {
@@ -135,79 +176,88 @@
watch: {
option: {
deep: true,
- handler(newVal) {
+ handler (newVal) {
this.setOptions(newVal)
},
},
project: {
deep: true,
- handler(newVal) {
- let requsetFn = null
- switch (newVal) {
+ immediate: true,
+ handler (newVal) {
+ let requsetFn=null
+ switch(newVal) {
case "鍏ㄧ悆椤圭洰":
- requsetFn = countCountryDimension
+ requsetFn=countProjectTypeNumber
break
case "鍏ㄥ浗椤圭洰":
- requsetFn = countProvinceDimension
+ requsetFn=countProjectTypeNumber
break
-
+ case "鍏ㄧ悆绠＄綉鍥�":
+ requsetFn=countZhPipeMapLength
+ break
+ case "鍏ㄥ浗绠＄綉鍥�":
+ requsetFn=countZhPipeMapLength
+ break
default:
+ requsetFn=countStorageByProject
+
break
}
- this.initData(requsetFn)
+ requsetFn&&this.initData(requsetFn)
+
this.setOptions(this.option)
},
},
},
- mounted() {
- this.initData()
+ mounted () {
+ // this.initData()
this.initChart()
- if (this.autoResize) {
- window.addEventListener("resize", this.resizeHandler)
+ if(this.autoResize) {
+ window.addEventListener("resize",this.resizeHandler)
}
},
- beforeDestroy() {
- if (!this.chart) {
+ beforeDestroy () {
+ if(!this.chart) {
return
}
- if (this.autoResize) {
- window.removeEventListener("resize", this.resizeHandler)
+ if(this.autoResize) {
+ window.removeEventListener("resize",this.resizeHandler)
}
this.chart.dispose()
- this.chart = null
+ this.chart=null
},
methods: {
- resizeHandler() {
- this.chart.resize()
+ resizeHandler () {
+ this.chart&&this.chart.resize()
},
- initChart() {
- this.chart = echarts.init(this.$refs.chart, "", {
+ initChart () {
+ this.chart=echarts.init(this.$refs.chart,"",{
renderer: this.type,
})
this.chart.setOption(this.option)
- this.chart.on("click", this.handleClick)
+ this.chart.on("click",this.handleClick)
},
- handleClick(params) {
- this.$emit("click", params)
+ handleClick (params) {
+ this.$emit("click",params)
},
- setOptions(option) {
+ setOptions (option) {
this.clearChart()
this.resizeHandler()
- if (this.chart) {
+ if(this.chart) {
this.chart.setOption(option)
}
},
- refresh() {
+ refresh () {
this.setOptions(this.option)
},
- clearChart() {
- this.chart && this.chart.clear()
+ clearChart () {
+ this.chart&&this.chart.clear()
},
- async initData(requsetFn = GetServicesVisitsCount) {
- const res = await requsetFn()
- if (res.code == 200) {
- this.dataList = res.result
- console.log("requsetFn", res)
+ async initData (requsetFn=GetServicesVisitsCount) {
+ const res=await requsetFn(this.params)
+ if(res.code==200) {
+ this.dataList=res.result
+ console.log("requsetFn",res)
}
},
},
--
Gitblit v1.9.3