From 9e7480c548624a04f6ac7630d644364b86c74215 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 12 十二月 2023 09:23:56 +0800
Subject: [PATCH] 样式优化整合代码
---
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 193 ++++++++++++++++++++++++++++--------------------
1 files changed, 112 insertions(+), 81 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
index 2d84725..741b537 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -2,120 +2,151 @@
<basic-container>
<v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
</basic-container>
-
</template>
<script>
import 'echarts'
-import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/pie'
-import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
-var data = [
- [120, 132, 101, 134, 90, 230, 210, 130, 0, 122, 100, 80],
- [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
-];
-
-// 鎵惧埌姣忎竴椤规暟鎹腑鐨勬渶澶у�煎苟淇濆瓨鍒版暟缁�
-var maxValues = data[0].map(function (_, i) {
- return Math.max.apply(null, data.map(function (item) {
- return item[i];
- }));
-});
-
-var colors = ['#91CC75', '#5470C6'];
-// 鐢熸垚鏌辩姸鍥剧殑 series 鏁版嵁
-var seriesData = [];
-for (var i = 0; i < data.length; i++) {
- var curSeriesData = [];
- // 璁＄畻鏁版嵁涓殑姣忕粍鏁版嵁鐨勬渶澶у��
- for (var j = 0; j < data[i].length; j++) {
- var borderRadius = [0, 0, 0, 0]; // 榛樿涓嶈缃渾瑙�
- if (data[i][j] === maxValues[j]) { // 濡傛灉褰撳墠鏌卞瓙鐨勫�肩瓑浜庡搴斿垪鐨勬渶澶у�硷紝璁剧疆鍦嗚
- borderRadius = [50, 50, 0, 0]; // 璁剧疆鍥涗釜瑙掗兘涓哄渾瑙�
+export default {
+ name: "ColumnarChart",
+ props:{
+ columnarData:{
+ type:Array,
+ default:[]
+ },
+ chartName:{
+ type:String,
+ default: ""
}
- curSeriesData.push({
- value: data[i][j],
- itemStyle: {
- normal: {
- barBorderRadius: borderRadius, // 璁剧疆鍦嗚
- color: colors[i],
- show: function (params) {
- // 鏍规嵁鏁版嵁鍊肩殑澶у皬鏉ュ垽鏂槸鍚︽樉绀� label
- return params.value > 30;
+ },
+ watch:{
+ columnarData:{
+ immediate:true,
+ handler(newval,oldval){
+ if(newval && newval.length > 0){
+ const minValues = newval[0].map(function (_, i) {
+ return Math.min.apply(
+ null,
+ newval.map(function (item) {
+ return item[i];
+ })
+ );
+ });
+
+ let colors = ['#2eadd6', '#FFA500'];
+
+ const seriesData = [];
+ for (let i = 0; i < newval.length; i++) {
+ let curSeriesData = [];
+ for (let j = 0; j < newval[i].length; j++) {
+ let borderRadius = [0, 0, 0, 0];
+ if (newval[i][j] === minValues[j]) {
+ borderRadius = [50, 50, 0, 0];
+ }
+ curSeriesData.push({
+ value: newval[i][j],
+ itemStyle: {
+ normal: {
+ // barBorderRadius: borderRadius, // 璁剧疆鍦嗚
+ color: colors[i],
+ }
+ },
+ });
+ }
+ let seriesName = (i === 0 ? "鎬婚噺" : "鏂板")
+ seriesData.push({
+ name: seriesName,
+ type: "bar",
+ stack: "鎬婚噺",
+ barWidth: 60,
+ data: curSeriesData,
+ label: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return params.value === 0 ? '' : params.value; // 鍊间负 0 涓嶆樉绀猴紝鍏朵粬鎯呭喌鏄剧ず
+ }
+ },
+ emphasis: {
+ focus: "series",
+ },
+ });
+ this.chartOptions.series=seriesData
}
}
}
- });
- }
- var seriesName = '';
- if (i === 0) {
- seriesName = '鎬婚噺';
- } else if (i === 1) {
- seriesName = '鏂板';
- }
- seriesData.push({
- name: seriesName,
- type: 'bar',
- stack: '鎬婚噺',
- data: curSeriesData,
- label: {
- show: true,
- position: 'top'
},
- itemStyle: {
- color: colors[i] // 璁剧疆鏌卞瓙鐨勯鑹�
- },
- emphasis: {
- focus: 'series'
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
}
- });
-}
-
-export default {
- name: "ColumnarChart",
+ },
data() {
return {
chartOptions: {
+ color:["#91CC75", "#5470C6"],
title: {
- text: '浜哄憳涓绘暟鎹粺璁�'
+ text: "",
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow'
- }
+ type: "shadow",
+ },
},
legend: {
- data: ['鎬婚噺', '鏂板'],
- left: 'center'
+ data: ["鎬婚噺", "鏂板"],
+ left: "center",
+ textStyle: {
+ fontSize: 14 // 璋冩暣瀛椾綋澶у皬
+ }
},
xAxis: {
- type: 'category',
- data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
+ type: "category",
+ data: [
+ "涓�鏈�",
+ "浜屾湀",
+ "涓夋湀",
+ "鍥涙湀",
+ "浜旀湀",
+ "鍏湀",
+ "涓冩湀",
+ "鍏湀",
+ "涔濇湀",
+ "鍗佹湀",
+ "鍗佷竴鏈�",
+ "鍗佷簩鏈�",
+ ],
},
yAxis: {
- type: 'value'
+ type: "value",
},
- series: seriesData,
- }
- }
- }
-}
+ series: [],
+ },
+ };
+ },
+ created() {
+ },
+};
</script>
<style scoped lang="scss">
#chart {
- width: 1280px;
- height: 800px;
+ width: 100%;
+ height: 560px;
}
</style>
--
Gitblit v1.9.3