From 6ef001c79a3d09b716a47e4be8c13f3753c311c1 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期一, 25 十二月 2023 16:21:43 +0800
Subject: [PATCH] 柱状图切换展示形式
---
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 108 ++++++++++++++++++++----------------------------------
1 files changed, 40 insertions(+), 68 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
index 6762433..3e5c2de 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -12,94 +12,66 @@
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
-import {deleteChartId} from "@/api/statistic/chart"
+import { deleteChartId } from "@/api/statistic/chart"
export default {
name: "ColumnarChart",
- props:{
- columnarData:{
- type:Array,
- default:[]
+ props: {
+ columnarData: {
+ type: Array,
+ default: []
},
- chartName:{
- type:String,
+ chartName: {
+ type: String,
default: ""
},
- btmname :{
+ btmname: {
type: String
}
},
- 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 = ['#84C9E5', '#F68686'];
-
- 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,
+ watch: {
+ columnarData: {
+ immediate: true,
+ handler(newval, oldval) {
+ if (newval && newval.length > 0) {
+ let seriesData = newval.map((data, index) => {
+ let name = index === 0 ? "鎬婚噺" : "鏂板";
+ return {
+ name: name,
+ type: 'bar',
+ data: data,
+ barWidth: '40%',
label: {
show: true,
position: 'top',
- formatter: function (params) {
- return params.value === 0 ? '' : params.value; // 鍊间负 0 涓嶆樉绀猴紝鍏朵粬鎯呭喌鏄剧ず
- }
+ // formatter: function (params) {
+ // if (params.value !== 0) {
+ // return params.value;
+ // } else {
+ // return '';
+ // }
+ // }
},
- emphasis: {
- focus: "series",
- },
- });
- this.chartOptions.series=seriesData
- }
+ };
+ });
+ this.chartOptions.series = seriesData;
}
}
},
- chartName:{
- handler(newval,oldval){
- if(newval){
+ chartName: {
+ handler(newval, oldval) {
+ if (newval) {
this.chartOptions.title.text = newval + "鏁版嵁缁熻"
}
},
- immediate:true,
- deep:true
+ immediate: true,
+ deep: true
}
},
data() {
return {
chartOptions: {
- color:['#84C9E5', '#F68686'],
+ color: ['#84C9E5', '#F68686'],
title: {
text: "",
},
@@ -148,12 +120,12 @@
},
created() {
},
- methods:{
- delHandler(){
- deleteChartId({btmname:this.btmname,chartId:'2'}).then(res=>{
+ methods: {
+ delHandler() {
+ deleteChartId({ btmname: this.btmname, chartId: '2' }).then(res => {
this.$message.success('鍒犻櫎鎴愬姛')
this.$emit('refresh');
- }).catch(error=>{
+ }).catch(error => {
this.$message.error(error)
})
}
--
Gitblit v1.9.3