smart_storage_app/pages/tabbar/components/dischargeChart/index.vue

<template>
	<view class="warp">
		<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
		<charts v-else :id="'pcChart'" :options="charge_option"></charts>
	</view>
</template>
<script>
	import charts from "@/components/charts/index";
	export default {
		components: {
			charts
		},
		data() {
			return {
				charge_option: {},
				stationId: null,
				chartLoading: false
			}
		},
		props: {
			activeTime: {
				type: String,
				default: 'day'
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		watch: {
			currentStation: {
				handler(val) {
					if (val && val.id) {
						this.stationId = val.id
						this.GetChargeChart()
					}
				},
				deep: true,
				immediate: true
			},
			activeTime: {
				handler(val) {
					if (val && this.stationId) {
						this.GetChargeChart()
					}
				},
				deep: true,
				immediate: true
			}
		},

		methods: {
			getData() {
				this.GetChargeChart()
			},
			async GetChargeChart() {
				this.chartLoading = true
				//充放电曲线
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetKJYElecData({
							stationId: this.stationId,
							type: this.activeTime,
						})
						.then((res) => {
							self.chartLoading = false
							self.initChargeChart(res.data);
							resolve();
						})
						.catch((err) => {
							reject("错误");
						});
				});
			},
			initChargeChart(val) {
				let x_data = [];
				let charge_data = [];
				let discharge_data = [];
				let pv_data = [];
				let benefit_data = [];
				if (val && val.length > 0) {
					val.forEach((item) => {
						x_data.push(item.date);
						charge_data.push(item.chargeElec);
						discharge_data.push(item.dischargeElec);
						pv_data.push(item.pvChargeElec);
						benefit_data.push(item.income);
					});
				} else {
					x_data = [0, 0, 0, 0, 0, 0, 0];
					charge_data = [0, 0, 0, 0, 0, 0, 0];
					discharge_data = [0, 0, 0, 0, 0, 0, 0];
					pv_data = [0, 0, 0, 0, 0, 0, 0];
					benefit_data = [0, 0, 0, 0, 0, 0, 0];
				}
				//充放电图表
				this.charge_option = {
					tooltip: {
						trigger: "axis",
						textStyle: {
							textShadowBlur: 10, // 重点
							textShadowColor: 'transparent', // 重点
						},
						axisPointer: {},
						confine: true,
						position: function(point, params, dom, rect, size) {
							// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
							// 提示框位置
							var x = 0; // x坐标位置
							var y = 0; // y坐标位置

							// 当前鼠标位置
							var pointX = point[0];
							var pointY = point[1];

							// 外层div大小
							// var viewWidth = size.viewSize[0];
							// var viewHeight = size.viewSize[1];

							// 提示框大小
							var boxWidth = size.contentSize[0];
							var boxHeight = size.contentSize[1];

							// boxWidth > pointX 说明鼠标左边放不下提示框
							if (boxWidth > pointX) {
								x = 5; // 自己定个x坐标值，以防出屏
								y -= 15; // 防止点被覆盖住，可根据情况自行调节
							} else {
								// 左边放的下
								x = pointX - boxWidth - 15;
							}

							// boxHeight > pointY 说明鼠标上边放不下提示框
							if (boxHeight + 20 > pointY) {
								y = pointY + 15;
							} else if (boxHeight > pointY) {
								y = 5;
							} else {
								// 上边放得下
								y += pointY - boxHeight;
							}
							return [x, y];
						},
					},
					color: ["#009458", "#BFE49F", "#3977B1"],
					legend: {
						animation: false,
						right: "0",
						top: "0",
						icon: "rect",
						itemWidth: 10,
						itemHeight: 10,
						data: [this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge'), this.$t(
							'homePage.home.photovoltaicCharge')],
					},
					grid: {
						left: "15%",
						right: "5%",
						bottom: "12%",
						top: "18%",
					},
					xAxis: {
						type: "category",
						data: x_data,
						axisLabel: {
							show: true,
							color: "#A3A3A3",
							formatter: function(params) {
								let newParamsName = "";
								const paramsNameNumber = params.length; // 文字总长度
								const provideNumber = 11; //一行显示几个字
								const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (let p = 0; p < rowNumber; p++) {
										const start = p * provideNumber;
										const end = start + provideNumber;
										const tempStr =
											p === rowNumber - 1 ?
											params.substring(start, paramsNameNumber) :
											params.substring(start, end) + "\n";
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},
						},
						axisLine: {
							lineStyle: {
								color: "#A3A3A3",
							},
						},
					},
					yAxis: {
						name: this.$t('homePage.home.chargingandDischarging'),
						nameTextStyle: {
							fontSize: 12,
							padding: [0, 0, 0, 20],
						},
						type: "value",
						axisLabel: {
							color: "#A3A3A3",
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#A3A3A3",
							},
						},
					},
					series: [{
							data: charge_data,
							type: "bar",
							name: this.$t('homePage.home.charge'),
						},
						{
							data: discharge_data,
							type: "bar",
							name: this.$t('homePage.home.disCharge'),
						},
						{
							data: pv_data,
							type: "bar",
							name: this.$t('homePage.home.photovoltaicCharge'),
						},

					],
				};
			},
		},
	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 500rpx;
		margin-top: 20rpx;
		position: relative;
	}
</style>