xw_admin/src/views/home/console/components/bar.vue

<template>
	<div class="barBox">
		<scEcharts ref="c2" :option="option"></scEcharts>
	</div>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	name: "barBox",
	components:{
		scEcharts
	},
	data(){
		return{
			option:{
				// tooltip: {
				// 	trigger: 'axis'
				// },
				// grid: {
				// 	left: "1%",
				// 	right: '5%',
				// 	bottom: '3%',
				// 	top: "3%",
				// 	containLabel: true
				// },
				// xAxis: {
				// 	boundaryGap: true,
				// 	type: 'category',
				// 	axisLine:{
				// 		show:true,
				// 		lineStyle:{
				// 			color:['rgba(255,255,255,0.9)']
				// 		}
				// 	},
				// 	axisTick:{
				// 		show:false,
				// 	},
				// 	data:['周一','周二','周三','周四','周四','周五','周六','周日']
				// },
				// yAxis: [{
				// 	type: 'value',
				// 	name: '',
				// 	axisLine:{
				// 		show:true,
				// 		lineStyle:{
				// 			color:['rgba(255,255,255,0.9)']
				// 		}
				// 	},
				// 	axisLabel:{
				// 		show:true,
				// 		color:'#fff',
				// 	},
				// 	axisTick:{
				// 		show:false,
				// 	},
				// 	splitLine:{
				// 		show:true,
				// 		lineStyle:{
				// 			color:['rgba(255,255,255,0.06)']
				// 		}
				// 	}
				//
				// }],
				// series: [
				// 	{
				// 		name: '用电',
				// 		type: 'bar',
				// 		smooth:true,
				// 		symbol: 'none',
				// 		labelLine:{
				// 			show:false,
				// 			smooth:false,
				// 		},
				// 		itemStyle: {
				// 			color: '#1367C1',
				// 		},
				// 		areaStyle: {
				// 			opacity: 0.4,
				// 		},
				// 		data: [123,646,577,323,687,189,263,462]
				// 	},
				// 	{
				// 		name: '用气',
				// 		type: 'bar',
				// 		smooth:'true',
				// 		symbol: 'none',
				// 		labelLine:{
				// 		},
				// 		itemStyle: {
				// 			color: '#2A91C4',
				// 		},
				// 		areaStyle: {
				// 			opacity: 0.4,
				// 		},
				// 		data: [123,246,577,623,267,189,563,246]
				// 	},
				// ],
			},
			feesData:{
				tableList:{}
			},
			reqParams:{
				page:1,
				pageSize:30,
				date_type:this.dataType,
				dateSelect:[],
				start:'',
				end:'',
			}
		}
	},
  props:{
    dataType:{
      type:String
    }
  },
  watch:{
    dataType:{
      handler(val){
        this.reqParams.date_type = val;
        this.getData();
      },
      immediate:true
    }
  },
	mounted() {
		// this.getData();
	},
	methods:{
		async getData() {
			this.loading = true;
			const res = await this.$API.finance.cost.summary.post(this.reqParams);
			this.loading = false;
			if(res.code == 200){
				res.data.tableList.data = this.setTableList(res.data.tableList.data);
				this.feesData = res.data;
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function (params) {
							const filteredParams = params.filter(param => param.value !== 0);
							let totalData = 0;
							filteredParams.map(em=> {
								totalData += em.value
							})
							const formattedParams = filteredParams.map(param => {
								const percentage =  (param.value/totalData*100).toFixed(2);
								const seriesColor = param.color;
								return `<span style="display: flex;justify-content: space-between"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${seriesColor};"></span>${param.seriesName} </span><div style="display: flex;justify-content: space-between;margin-left: 15px"><span style="font-weight: 500;display: inline-block;text-align: right;">¥ ${param.value}</span><span style="display: inline-block;margin-left: 10px; width: 50px;text-align: left;font-weight: 500;">${percentage}%</span></div></span>`;
							}).join('');
							return params[0].name + '<br/>总金额：¥ '+ totalData.toFixed(2) + '<br/>' + formattedParams;
						}
					},
					toolbox:{
						show:false,
						feature: {
							magicType: { type: ['line', 'bar'] },
						}
					},
					grid:{
						bottom:40,
						left:10,
					},
					legend:{
						show:true,
						bottom:10
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: this.feesData.dateRange
					},
					yAxis: [{
						type: 'value',
						show:true,
						axisLabel:{
							margin:this.feesData.dateRange.length<13? 56:20
						},
						name: '',
						axisTick:{
							show:false
						},
						splitLine: {
							show: false
						}
					}],
					series: this.setList(this.feesData.summaryList),
				};
				this.option = option;
			}
		},
		setList(data){
			let newData = data[0].cost_item.map(item => ({
				name: item,
				data: [],
				type:'bar',
				symbol: 'none',
				stack:'fees',
				smooth: true,
			}));
			if(data && data.length>0){
				data.forEach(item => {
					item.cost_amount.forEach((amount, index) => {
						newData[index].data.push(amount);
					});
				});
			}
			return newData
		},
		setTableList(data){
			let newData = data.columns.map(column => [column]);
			if(data.rows && data.rows.length>0){
				data.rows.forEach((row, rowIndex) => {
					data.columns.forEach((columnName, columnIndex) => {
						newData[columnIndex][1 + rowIndex] = row[columnIndex]==0?'-':'¥'+row[columnIndex];
					});
				});
			}
			return newData
		},
	}
}
</script>

<style scoped lang="scss">
	.barBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
</style>