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/BaseBarChart.vue | 218 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 146 insertions(+), 72 deletions(-)
diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue
index 6a6cbfc..86ecda3 100644
--- a/src/components/chart/BaseBarChart.vue
+++ b/src/components/chart/BaseBarChart.vue
@@ -1,23 +1,28 @@
<template>
- <div class="barchar" ref="chart"></div>
+ <div class="barchar"
+ ref="chart"></div>
</template>
<script>
import * as echarts from "echarts"
-import { countCountryDimension } from "@/api/screen.js"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ countZhPipeStations,
+} from "@/api/screen.js"
export default {
props: {
width: {
type: String,
- default: '100%'
+ default: "100%",
},
height: {
type: String,
- default: '100%'
+ default: "100%",
},
autoResize: {
type: Boolean,
- default: true
+ default: true,
},
// option: {
// type: Object,
@@ -25,18 +30,26 @@
// },
type: {
type: String,
- default: 'canvas'
- }
+ default: "canvas",
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
+ title: {
+ type: String,
+ default: "",
+ },
},
- data() {
+ data () {
return {
chart: null,
- dataList: []
+ dataList: [],
}
},
computed: {
- option() {
- let data = [
+ option () {
+ let data=[
{
country: "鑻忎腹",
count: 1,
@@ -83,16 +96,52 @@
},
]
- let xAxisData = []
- let yAxisData = []
- if (this.dataList) {
- data = this.dataList
+ let xAxisData=[]
+ let yAxisData=[]
+ if(this.dataList) {
+ data=this.dataList
}
+ let count=0
+ let countVal=0
+
+ const title=this.title
data.forEach(item => {
- xAxisData.push(item.country)
- yAxisData.push(item.count)
+ let name=item.province||item.country||item.杈撻�佷粙璐�
+ let value=item.count||item.绔欏満鏁伴噺
+ if(title=="绔欏満搴ф暟"&&item.绠￠亾鏁伴噺) {
+ count+=item.绠￠亾鏁伴噺
+ } else {
+ count+=item.count||0
+ }
+
+ // switch (title) {
+ // case "绔欏満搴ф暟":
+ // countVal = item.绠￠亾鏁伴噺
+ // break
+ // case "椤圭洰涓暟":
+ // countVal = item.count
+ // break
+ // }
+
+ xAxisData.push(name)
+ yAxisData.push(value)
})
- let option = {
+
+ var obj=[];
+ for(var i in xAxisData) {
+ if(xAxisData[i]) {
+ obj.push(xAxisData[i])
+ } else {
+ obj.push("鍏朵粬")
+ }
+ }
+
+ xAxisData=obj
+
+ if(typeof count==="number") {
+ this.$bus.$emit("changeCount",count)
+ }
+ let option={
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
@@ -123,21 +172,24 @@
textStyle: {
fontSize: 11,
},
- formatter: function (value) {
+ formatter: function(value) {
//
- var ret = "" //鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
- var maxLength = 2 //姣忛」鏄剧ず鏂囧瓧涓暟
- var valLength = value.length //X杞寸被鐩」鐨勬枃瀛椾釜鏁�
- var rowN = Math.ceil(valLength / maxLength) //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
- if (rowN > 1) {
+ var ret="" //鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength=2 //姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength=value.length //X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN=Math.ceil(valLength/maxLength) //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if(xAxisData.length<7) {
+ return value
+ }
+ if(rowN>1) {
//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
- for (var i = 0; i < rowN; i++) {
- var temp = "" //姣忔鎴彇鐨勫瓧绗︿覆
- var start = i * maxLength //寮�濮嬫埅鍙栫殑浣嶇疆
- var end = start + maxLength //缁撴潫鎴彇鐨勪綅缃�
+ for(var i=0;i<rowN;i++) {
+ var temp="" //姣忔鎴彇鐨勫瓧绗︿覆
+ var start=i*maxLength //寮�濮嬫埅鍙栫殑浣嶇疆
+ var end=start+maxLength //缁撴潫鎴彇鐨勪綅缃�
//杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
- temp = value.substring(start, end) + "\n"
- ret += temp //鍑�熸渶缁堢殑瀛楃涓�
+ temp=value.substring(start,end)+"\n"
+ ret+=temp //鍑�熸渶缁堢殑瀛楃涓�
}
return ret
} else {
@@ -165,6 +217,7 @@
],
series: [
{
+ name: this.title,
type: "bar",
data: yAxisData,
barWidth: "12px",
@@ -187,7 +240,7 @@
],
false
),
- barBorderRadius: [20, 20, 0, 0],
+ barBorderRadius: [20,20,0,0],
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4,
},
@@ -200,11 +253,11 @@
height: 14,
backgroundColor: "rgba(0,160,221,0.1)",
borderRadius: 200,
- position: ["-8", "-20"],
+ position: ["-8","-20"],
distance: 1,
formatter: value => {
// console.log(value);
- if (value.name == "涓浗") {
+ if(value.name=="涓浗") {
return [
` {d|鈼弣", " {a|${value.value}} \n", " {b|}`,
].join(",")
@@ -234,72 +287,93 @@
},
],
}
+
return option
- }
+ },
},
watch: {
- // option: {
- // deep: true,
- // handler(newVal) {
- // this.setOptions(newVal)
- // }
- // },
- currentProject: {
+ option: {
deep: true,
- handler(newVal) {
- this.initData()
+ handler (newVal) {
+ this.setOptions(newVal)
+ },
+ },
+ project: {
+ deep: true,
+ immediate: true,
+ handler (newVal) {
+ let requsetFn=null
+ switch(newVal) {
+ case "鍏ㄧ悆椤圭洰":
+ requsetFn=countCountryDimension
+ break
+ case "鍏ㄥ浗椤圭洰":
+ requsetFn=countProvinceDimension
+ break
+ case "鍏ㄧ悆绠＄綉鍥�":
+ requsetFn=countZhPipeStations
+ break
+ case "鍏ㄥ浗绠＄綉鍥�":
+ requsetFn=countZhPipeStations
+ break
+ default:
+ break
+ }
+ requsetFn&&this.initData(requsetFn)
this.setOptions(this.option)
- }
- }
+ },
+ },
},
- mounted() {
+ 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, '', {
- renderer: this.type
+ 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()
- }
- },
- methods: {
- async initData() {
-
-
+ clearChart () {
+ this.chart&&this.chart.clear()
+ },
+ async initData (requsetFn=countCountryDimension) {
+ const res=await requsetFn()
+ if(res.code==200) {
+ this.dataList=res.result
+ console.log("requsetFn",res)
+ }
},
},
}
--
Gitblit v1.9.3