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 | 151 +++++++++++++++++++++++++++----------------------- 1 files changed, 81 insertions(+), 70 deletions(-) diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue index ed0e9c4..86ecda3 100644 --- a/src/components/chart/BaseBarChart.vue +++ b/src/components/chart/BaseBarChart.vue @@ -1,5 +1,6 @@ <template> - <div class="barchar" ref="chart"></div> + <div class="barchar" + ref="chart"></div> </template> <script> @@ -40,15 +41,15 @@ default: "", }, }, - data() { + data () { return { chart: null, dataList: [], } }, computed: { - option() { - let data = [ + option () { + let data=[ { country: "鑻忎腹", count: 1, @@ -95,22 +96,22 @@ }, ] - 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 + let count=0 + let countVal=0 - const title = this.title + const title=this.title data.forEach(item => { - let name = item.province || item.country || item.杈撻�佷粙璐� - let value = item.count || item.绔欏満鏁伴噺 - if (title == "绔欏満搴ф暟" && item.绠¢亾鏁伴噺) { - count += item.绠¢亾鏁伴噺 + let name=item.province||item.country||item.杈撻�佷粙璐� + let value=item.count||item.绔欏満鏁伴噺 + if(title=="绔欏満搴ф暟"&&item.绠¢亾鏁伴噺) { + count+=item.绠¢亾鏁伴噺 } else { - count += item.count || 0 + count+=item.count||0 } // switch (title) { @@ -125,12 +126,22 @@ xAxisData.push(name) yAxisData.push(value) }) - console.log("绠¢亾鏁伴噺", countVal) - if (typeof count === "number") { - this.$bus.$emit("changeCount", count) + var obj=[]; + for(var i in xAxisData) { + if(xAxisData[i]) { + obj.push(xAxisData[i]) + } else { + obj.push("鍏朵粬") + } } - let option = { + + xAxisData=obj + + if(typeof count==="number") { + this.$bus.$emit("changeCount",count) + } + let option={ backgroundColor: "transparent", tooltip: { trigger: "axis", @@ -161,24 +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 (xAxisData.length < 7) { + 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) { + 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 { @@ -229,7 +240,7 @@ ], false ), - barBorderRadius: [20, 20, 0, 0], + barBorderRadius: [20,20,0,0], shadowColor: "rgba(0,160,221,1)", shadowBlur: 4, }, @@ -242,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(",") @@ -283,85 +294,85 @@ watch: { option: { deep: true, - handler(newVal) { + handler (newVal) { this.setOptions(newVal) }, }, project: { deep: true, immediate: true, - handler(newVal) { - let requsetFn = null - switch (newVal) { + handler (newVal) { + let requsetFn=null + switch(newVal) { case "鍏ㄧ悆椤圭洰": - requsetFn = countCountryDimension + requsetFn=countCountryDimension break case "鍏ㄥ浗椤圭洰": - requsetFn = countProvinceDimension + requsetFn=countProvinceDimension break case "鍏ㄧ悆绠$綉鍥�": - requsetFn = countZhPipeStations + requsetFn=countZhPipeStations break case "鍏ㄥ浗绠$綉鍥�": - requsetFn = countZhPipeStations + requsetFn=countZhPipeStations break default: break } - requsetFn && this.initData(requsetFn) + 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 && 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 = countCountryDimension) { - const res = await requsetFn() - if (res.code == 200) { - this.dataList = res.result - console.log("requsetFn", res) + async initData (requsetFn=countCountryDimension) { + const res=await requsetFn() + if(res.code==200) { + this.dataList=res.result + console.log("requsetFn",res) } }, }, -- Gitblit v1.9.3