From fd0287dfc1d5ab5c97f258d19757cafa29f7333c Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期五, 18 十月 2024 09:45:57 +0800
Subject: [PATCH] changeStatus回收方法调整
---
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 186 +++++++++++++++++++++++++--------------------
1 files changed, 103 insertions(+), 83 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
index 2d84725..bf10bb2 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -1,121 +1,141 @@
<template>
<basic-container>
<v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
+ <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px">
+ <el-button size="small" type="danger" plain @click="delHandler">鍒犻櫎</el-button>
+ </div>
</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]; // 璁剧疆鍥涗釜瑙掗兘涓哄渾瑙�
- }
- curSeriesData.push({
- value: data[i][j],
- itemStyle: {
- normal: {
- barBorderRadius: borderRadius, // 璁剧疆鍦嗚
- color: colors[i],
- show: function (params) {
- // 鏍规嵁鏁版嵁鍊肩殑澶у皬鏉ュ垽鏂槸鍚︽樉绀� label
- return params.value > 30;
- }
- }
- }
- });
- }
- 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'
- }
- });
-}
+import { deleteChartId } from "@/api/statistic/chart"
export default {
name: "ColumnarChart",
+ props: {
+ columnarData: {
+ type: Array,
+ default: []
+ },
+ chartName: {
+ type: String,
+ default: ""
+ },
+ btmname: {
+ type: String
+ }
+ },
+ 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) {
+ // if (params.value !== 0) {
+ // return params.value;
+ // } else {
+ // return '';
+ // }
+ // }
+ },
+ };
+ });
+ this.chartOptions.series = seriesData;
+ }
+ }
+ },
+ chartName: {
+ handler(newval, oldval) {
+ if (newval) {
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate: true,
+ deep: true
+ }
+ },
data() {
return {
chartOptions: {
+ color: ['#84C9E5', '#F68686'],
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() {
+ },
+ methods: {
+ delHandler() {
+ deleteChartId({ btmname: this.btmname, chartId: '2' }).then(res => {
+ this.$message.success(this.chartName+'鏌辩姸鍥撅紝鍒犻櫎鎴愬姛锛�')
+ this.$emit('refresh');
+ }).catch(error => {
+ this.$message.error(error)
+ })
}
}
-}
+};
</script>
<style scoped lang="scss">
#chart {
- width: 1280px;
- height: 800px;
+ width: 100%;
+ height: 560px;
}
</style>
--
Gitblit v1.9.3