From 9b4433fddf5b401edb0aace8a404ac733b122702 Mon Sep 17 00:00:00 2001
From: 田源 <tianyuan@vci-tech.com>
Date: 星期四, 03 四月 2025 14:35:02 +0800
Subject: [PATCH] 添加非密字段显示
---
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue | 154 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 97 insertions(+), 57 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
index 9b757c3..7bf5749 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -1,76 +1,116 @@
<template>
- <basic-container>
+ <basic-container style="width: 100%">
<v-chart :options="chartOptions" :auto-resize="true" id="chart"></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/pie'
+import 'echarts/lib/chart/bar' // 瀵煎叆鏌辩姸鍥剧粍浠�
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
+import {deleteChartId} from "@/api/statistic/chart"
export default {
- name: "pieChart",
+ name: "polarBarChart",
+ props:{
+ pieData:{
+ type:Array,
+ default:[]
+ },
+ chartName:{
+ type:String,
+ default: ""
+ },
+ monthData:{
+ type:Array,
+ default: () => ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
+ },
+ btmname :{
+ type: String
+ }
+ },
+ watch:{
+ pieData:{
+ immediate:true,
+ handler(newval, oldval){
+ if (newval) {
+ const series = [
+ {
+ type: 'bar',
+ name: '鏂板',
+ data: newval[1],
+ coordinateSystem: 'polar',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: '#91cc75' // 鏂板鐨勯鑹�
+ }
+ },
+ {
+ type: 'bar',
+ name: '鎬婚噺',
+ data: newval[0],
+ coordinateSystem: 'polar',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: '#5470c6' // 鎬婚噺鐨勯鑹�
+ }
+ }
+ ];
+ this.chartOptions.series = series;
+ }
+ }
+ },
+ chartName:{
+ handler(newval, oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true
+ }
+ },
data() {
return {
chartOptions: {
title: {
- text: '渚涘簲鍟嗕富鏁版嵁缁熻',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- var result = '';
- if (params.componentType === 'series') {
- result += params.name + '<br/>';
- result += '鏂板锛�' + params.data.newValue + '<br/>';
- result += '鎬婚噺锛�' + params.data.value + '<br/>';
- result += '鐧惧垎姣旓細' + params.percent + '%';
- }
- return result;
- }
+ text: '',
},
legend: {
- orient: 'vertical',
- right: 10,
- top: 'middle',
+ data: ['鎬婚噺', '鏂板'],
+ },
+ polar: {},
+ angleAxis: {
+ type: 'category',
data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
},
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap:false,
- label: {
- formatter: '{b}\n{d}%',
- fontSize:14
- },
- itemStyle: {
- color: function(params) {
- // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
- var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
- return colorList[params.dataIndex % colorList.length];
- }
- },
- data: [
- { value: 110, name: '涓�鏈�', newValue: 10, totalValue: 110 },
- { value: 220, name: '浜屾湀', newValue: 20, totalValue: 220 },
- { value: 330, name: '涓夋湀', newValue: 30, totalValue: 330 },
- { value: 440, name: '鍥涙湀', newValue: 40, totalValue: 440 },
- { value: 550, name: '浜旀湀', newValue: 50, totalValue: 550 },
- { value: 660, name: '鍏湀', newValue: 60, totalValue: 660 },
- { value: 770, name: '涓冩湀', newValue: 70, totalValue: 770 },
- { value: 880, name: '鍏湀', newValue: 80, totalValue: 880 },
- { value: 990, name: '涔濇湀', newValue: 90, totalValue: 990 },
- { value: 1100, name: '鍗佹湀', newValue: 100, totalValue: 1100 },
- { value: 1210, name: '鍗佷竴鏈�', newValue: 110, totalValue: 1210 },
- { value: 1320, name: '鍗佷簩鏈�', newValue: 120, totalValue: 1320 }
- ]
- }
- ]
- },
+ radiusAxis: {},
+ tooltip: {
+ trigger: 'axis'
+ },
+ series: []
+ }
+ }
+ },
+ created(){
+ this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+ },
+ methods:{
+ delHandler(){
+ deleteChartId({btmname:this.btmname,chartId:'1'}).then(res=>{
+ this.$message.success(this.chartName+'楗肩姸鍥撅紝鍒犻櫎鎴愬姛锛�')
+ this.$emit('refresh');
+ }).catch(error=>{
+ this.$message.error(error)
+ })
}
}
}
@@ -78,7 +118,7 @@
<style scoped lang="scss">
#chart {
- width: 800px;
- height: 600px;
+ width: 97%;
+ height: 530px;
}
</style>
--
Gitblit v1.9.3