ucharts的堆叠正负柱状图，设置最大值和最小值已经让分隔线坐标永远为0

已于 2025-01-08 17:11:16 修改
阅读量555 收藏 2
点赞数 2
文章标签： 信息可视化
于 2024-12-12 17:27:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wx001214/article/details/144431370
版权

1,动态设置最大值和最小值

在yAxis的data中设置   min: 0, // Y 轴最小值   max: 0,  // Y 轴最大值

yAxis: {
            data: [
                {
                    unit: "度",
                    min: 0, // Y 轴最小值
                    max: 0,  // Y 轴最大值

                    splitLine: {
                        show: true, // 显示分割线
                    },
                    axisLabel: {
                        formatter: (value : number) => {
                            // 自定义 Y 轴标签
                            if (value === 0) return '0';
                            if (value > 0) return `${value}`;
                            if (value < 0) return `${value}`;
                        },
                    },
                }
            ],
           splitNumber: 10
        },

然后在渲染数据时加上根据渲染数据计算出来的最大值和最小值

opts.value.yAxis.data[0].min = zhengFu.value;
opts.value.yAxis.data[0].max = zhengValue.value;

2,让分隔线坐标永远为0

在yAxis的添加splitNumber: 6，也就是Y轴坐标显示7个数据

然后添加splitLine: {
                        show: true, // 显示分割线
                    },
                    axisLabel: {
                        formatter: (value : number) => {
                            // 自定义 Y 轴标签
                            if (value === 0) return '0';
                            if (value > 0) return `${value}`;
                            if (value < 0) return `${value}`;
                        },
                    },

yAxis: {
			data: [
				{
					unit: "度",
					min: 0, // Y 轴最小值
					max: 0,  // Y 轴最大值

					splitLine: {
						show: true, // 显示分割线
					},
					axisLabel: {
						formatter: (value : number) => {
							// 自定义 Y 轴标签
							if (value === 0) return '0';
							if (value > 0) return `${value}`;
							if (value < 0) return `${value}`;
						},
					},
				}
			],
			splitNumber: 6
		},

然后在渲染的先算出Y轴应该渲染的最大值和最小值，它处理了不同类型的电量数据，并根据数据的最大值和最小值动态调整 Y 轴的范围。

<template>
	<!-- 月 -->
	<view class="daily">
		<view class="daily_s">
			<view>
				<view>
					发电量
				</view>
				<view class="daily_x">
					<view class="daily_d">
						<view class="daily_f">
							<view><text class="daily_r">{{ (chartD.selfPowerCount || 0).toFixed(2) }}</text>度</view>
							<view>自发自用</view>
							<view>(<text>{{ chartD.selfRate || 0 }}</text>%)</view>
						</view>
						<view class="daily_c">
							<view class="daily_v">{{ (chartD.inverterPowerCount || 0).toFixed(2) }}</view>
							<view>度</view>
						</view>
						<view class="daily_t">
							<view><text class="daily_g">{{ (chartD.uploadPowerCount || 0).toFixed(2) }}</text>度</view>
							<view>上网电量</view>
							<view>(<text>{{ chartD.uploadRate || 0 }}</text>%)</view>
						</view>
					</view>
				</view>
				<view>
					<view>
						用电量
					</view>
					<view class="daily_x">
						<view class="daily_d">
							<view class="daily_f">
								<view><text class="daily_r">{{ (chartD.useSelfPowerCount || 0).toFixed(2) }}</text>度
								</view>
								<view>自给自足</view>
								<view>(<text>{{ chartD.useSelfRate || 0 }}</text>%)</view>
							</view>
							<view class="daily_c">
								<view class="daily_v">{{ (chartD.iallUsePowerCount || 0).toFixed(2) }}</view>
								<view>度</view>
							</view>
							<view class="daily_t">
								<view><text class="daily_g">{{ (chartD.gridDownPowerCount || 0).toFixed(2) }}</text>度
								</view>
								<view>购买电量</view>
								<view>(<text>{{ chartD.gridDownRate || 0 }}</text>%)</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="daily_q">
			<view @click="decrementDate">
				<img src="http://47.104.232.49/appimages/向左箭头.png" alt="" class="daily_z" />
			</view>
			<view class="daily_w">
				<view class="example-body">
					<picker mode="date" fields="month" @change="handleDateChange">
						{{ single }}
					</picker>
				</view>
			</view>
			<view @click="incrementDate">
				<img src="http://47.104.232.49/appimages/向右箭头.png" alt="" class="daily_z" />
			</view>
		</view>
		<view class="daily_a">
			<view class="daily_e">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { getpowercount } from '@/src/api/api.js';

	const props = defineProps({
		siteId: {
			type: String,
			default: null
		},
	});

	// 用于存储图表数据
	const chartD = ref({});
	const single = ref(new Date().toISOString().slice(0, 7));

	// 处理日期减一月的函数
	const decrementDate = () => {
		const currentDate = new Date(single.value + '-01');
		currentDate.setMonth(currentDate.getMonth() - 1);
		single.value = currentDate.toISOString().slice(0, 7);
		updateChartData();
	};
	// 处理日期加一月的函数
	const incrementDate = () => {
		const currentDate = new Date(single.value + '-01');
		currentDate.setMonth(currentDate.getMonth() + 1);
		single.value = currentDate.toISOString().slice(0, 7);
		updateChartData();
	};
	// 处理日期选择器 点击的时间
	const handleDateChange = (event : any) => {
		single.value = event.detail.value.slice(0, 7);
		updateChartData();
	};

	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		dataLabel: false,
		xAxis: {
			disableGrid: true,
			labelCount: 7, // 设置显示个数
		},
		yAxis: {
			data: [
				{
					unit: "度",
					min: 0, // Y 轴最小值
					max: 0,  // Y 轴最大值

					splitLine: {
						show: true, // 显示分割线
					},
					axisLabel: {
						formatter: (value : number) => {
							// 自定义 Y 轴标签
							if (value === 0) return '0';
							if (value > 0) return `${value}`;
							if (value < 0) return `${value}`;
						},
					},
				}
			],
			splitNumber: 6
		},
		extra: {
			column: {
				type: "meter",
				width: 4,
				activeBgColor: "#000000",
				activeBgOpacity: 0.00,
				meterBorder: 0,
				meterFillColor: "#EBFBD6",
				data: [0, 0, 0],
			}
		}
	});

	// 柱状图数据
	const chartData = ref({});
	const minValue = ref();
	const maxValue = ref();
	const roundedValue = ref();
	const zhengValue = ref();
	const roundedFu = ref();
	const zhengFu = ref();

	const updateChartData = async () => {
		try {
			const response = await getpowercount(props.siteId, single.value, 2);
			chartD.value = response.data;
			// console.log("lllll", response.data)

			const gridDownData = response.data.gridDownPowerCountArray.map(value => Math.floor(value * -1));
			const inverterData = response.data.inverterPowerCountArray;
			const gridUploadData = response.data.gridUploadPowerCountArray; // 将电网卖电量变为负数并取整
			const loadUseData = response.data.selfPowerCountArray; // 将负载用电量变为负数并取整

			// 更新图表数据
			chartData.value = {
				categories: response.data.timeStrArray.map(date => date.slice(-2)),
				series: [
					{ name: "自发自用电量", data: inverterData },
					{ name: "上网电量", data: gridUploadData },
					{ name: "电网供电电量", data: gridDownData },
					{ name: "自发自用电量", data: loadUseData }
				]
			};
			
			//动态处理Y轴
			//算出负坐标最小值
			const maxGridDown = Math.min(...gridDownData);
			const minLoadUse = Math.min(...loadUseData);
			//负坐标相比最小值
			minValue.value = Math.min(maxGridDown, minLoadUse);
			
            //算出正坐标最大值
			const minGridUpload = Math.max(...gridUploadData);
			const maxInverter = Math.max(...inverterData);
			maxValue.value = Math.max(minGridUpload, maxInverter);
			// console.log("正坐标最大值",maxValue.value)
			const jiut = Math.abs(minValue.value);
			
			function roundUpToNearestThousand(value) {
				return Math.ceil(value / 10) * 10;
			}
			function roundUpThousand(value) {
				return Math.floor(value / 10) * 10;
			}
			//负坐标大时
			//负坐标内容
			roundedValue.value = roundUpThousand(minValue.value);
             // 负坐标内容
			roundedFu.value = Math.abs(roundedValue.value);
			
			//正坐标大时
            //正坐标内容
			zhengValue.value = roundUpToNearestThousand(maxValue.value);
			// 负坐标内容
			zhengFu.value = zhengValue.value * -1;

			if (jiut > maxValue.value) {
				//如果负轴的坐标比正轴的坐标大根据负轴最大数据渲染Y轴
				if (minValue.value >= roundedValue.value) {
					opts.value.yAxis.data[0].min = roundedValue.value;
					opts.value.yAxis.data[0].max = roundedFu.value;
				}

			} else if (jiut > minValue.value) {
				//如果正轴的坐标比负轴的坐标大根据正轴最大数据渲染Y轴
				if (maxValue.value <= zhengValue.value) {
					opts.value.yAxis.data[0].min = zhengFu.value;
					opts.value.yAxis.data[0].max = zhengValue.value;
				}
			} else {
				opts.value.yAxis.data[0].min = zhengFu.value;
				opts.value.yAxis.data[0].max = zhengValue.value;
			}


		} catch (error) {
			console.error('获取数据出错:', error);
		}
	};

	// 生命周期钩子
	onMounted(() => {
		updateChartData();
	});
</script>

<style lang="scss" scoped>
	.daily {
		width: 100%;
		height: 451rpx;
	}

	.daily_q {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.daily_z {
		width: 70rpx;
		height: 70rpx;
	}

	.daily_w {
		width: 50%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	uni-datetime-picker {
		display: block;
	}

	.daily_a {
		width: 100%;
		height: calc(451rpx - 90rpx);
	}

	.daily_e {
		width: 100%;
		height: 360rpx;
	}

	.daily_s {
		margin-top: 10rpx;
		width: 100%;
	}

	.daily_x {
		margin-top: 10rpx;
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.daily_d {
		width: 94%;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.daily_f,
	.daily_t {
		width: 30%;
		height: 170rpx;
		border-radius: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.daily_r {
		color: #91CB74;
	}

	.daily_c {
		height: 170rpx;
		border-radius: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		border: 5rpx solid #73C0DE;
		width: 170rpx;
	}

	.daily_v {
		color: #73C0DE;
		font-size: 36rpx;
	}

	.daily_g {
		color: #FC8452;
	}
</style>

可视化绘图技巧100篇基础篇（一）-棒棒图
getusushu的博客
05-10 825
3，对于InDel的注释还要注意一点，如果ANNOVAR注释是输入的不是VCF文件而是“avinput”，那么需要注意ref和alt的书写。其实如果你对MAF格式足够了解，并且熟练一门文本处理语言，那么无论你的变异数据（已完成基本的注释）用什么格式存储都无所谓，自己写个脚本处理就好。3，注释文件需要额外加一列样本名（head可以为Tumor_Sample_Barcode，当然你不用样本名称而用其他ID来区分样本也可以），如果多个样本中都有这个变异，那么分成多行展示。亲测3.6.1可行。
利用Python进行数据分析（Ⅲ）
qq_44709990的博客
01-30 1644
利用Python进行数据分析（Ⅲ） 本文参考书籍：《利用Python进行数据分析》 目录利用Python进行数据分析（Ⅲ）7.数据清洗与准备 7.数据清洗与准备
数据可视化——ucharts的使用(自定义修改文字，颜色，自适应屏幕宽度)
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
10-11 1万+
直接渲染数据不能渲染非数字的内容，使用formatter自定义内容。自定义，没有修改限制，上面图片展示三个数据就是自定义的。默认情况下，点击展示的是柱状图的柱子名称和数据。只能改变有的数据，只有两个柱子就最多只能展示二条。在需要用到图表的js页面里面引入这个文件。1.修改柱状图上面渲染的内容。我以微信小程序为例进行展示。引入的路径根据自己的位置来。修改默认渲染数据的内容。2.修改点击展示的内容。
❤ ucharts图表使用、UCharts图表使用(组件方式和原生方式)、uniapp使用ucharts
林太白
03-31 1万+
❤ ucharts图表使用、UCharts图表使用(组件方式和原生方式)、uniapp使用ucharts
uCharts如何设置x轴可滚动并解决白边
最新发布
weixin_44244086的博客
02-28 1152
ucharts设置x轴可滚动并解决白边
解决echarts xAxis设置type:‘value‘后 x轴有负值的时候 Y轴在0点显示
红烧咸咸鱼
04-01 902
解决echarts xAxis设置type:'value'后 x轴有负值的时候 Y轴在0点显示
uCharts实现一个叠堆柱状图
祈澈菇凉
12-24 4911
在uni-app里面会使用到统计图，和echarts类似，也有自己的官方文档可以作参考，开发考勤的app项目的时候遇到了一个叠堆柱状图，统计每天正常，迟到，缺勤，早退，补卡五种状态的人数，做一下记录。 官方文档：http://doc.ucharts.cn/1073940 <template> <view class="qiun-columns"> ...
ucharts 秋云 堆叠柱状 条状图
c_qianxia5040的博客
03-22 3694
将秋云插件下载到项目中 <view class="charts_box"> <!-- 柱状图 --> <!-- <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartMixData" :reshow="currentTab==='ucharts1'" background="#fff"/> --> <!-- 条状图 -.
uCharts之柱状图
king的博客
11-16 1145
【代码】uCharts之柱状图。
使用uCharts-app使用曲线图如何让Y轴的最大值和最小值适应数据
dfsdsdf的博客
12-06 524
在这里我们要确保数据中必须是数字类型的数据如：[5,10,80,20,5,200,52,30] 赋值更新配置方法有很多种，我认为这种方法比较好用。这里的 -6 和+10 是为了让我们的曲线图更加的好看一些。这里的值可以随意修改，接下来让我看一下赋值后的 效果。正常的情况我们不会给max和min去配置，即使配置那么值是固定死的，但我们的数据不可能一直是一样的数据总会变的，那么我们就要改为动态的。每当我们要去调用接口时，我们要获取到数据中的最大值和最小值，然后将值赋值给max和min。
坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
郑伟斌的博客
07-23 6059
数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语 前言 因实习的公司是做大数据的，而我的工作刚好又是需要绘制一些数据图表的。绘制图表有许多现成的组件可以使用，但是要想达到产品所需要的效果，只靠组件内部的一些功能是不太够的。一些细腻的要求必须在掌握组件原理方法的情况下，自己去写算法来完成。例如，本文要说的这个刻度计算算法，开始正文之前，我先描述遇到的问题。 echarts自身的刻度计算有时...
实现ECharts双Y轴左右刻度线一致
热门推荐
qq_40845885的博客
08-27 2万+
先上图： 这是未解决的，双Y轴左右刻度线不一致                                            这是已解决的，双Y轴左右刻度线一致         1、原因 刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。 2、思路 根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。 3、解决方法 ...
uCharts_jb51.rar
04-16
uCharts高性能跨全端图表 中文文档 完整版PDF
uCharts-uCharts-master.zip
04-24
前段时间做了一个柱状统计图的图表，根据客户的要求，数据多的时候，统计图既能来回的拖动观看数据，又能提示数据信息，我网上查了好久，貌似也没有找到一个能满足条件的，就当我要放弃的时候，发现了一个插件，这个插件满足了我的所有需求。
grafana 分位规则_Grafana全面瓦解
weixin_39575502的博客
12-20 652
1.概述--美观、强大的可视化监控指标展示工具grafana 是一款采用 go 语言编写的开源应用，主要用于大规模指标数据的可视化展现，是网络架构和应用分析中最流行的时序数据展示工具，目前已经支持绝大部分常用的时序数据库。最好的参考资料就是官网(http://docs.grafana.org/)，虽然是英文，但是看多了就会啦。1.1基本概念Grafana支持许多不同的数据源。每个数据源都有一个特定...
微信小程序使用ucharts折线图，有负数显示0刻度线
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
02-04 1272
当数据有负数和正数的时候默认不会显示0刻度线，不方便看出正负对比。
echarts 3D立体圆柱堆叠柱状图
qq_48630174的博客
06-17 877
3D立体圆柱堆叠柱状图
uCharts
zhcinit0的博客
05-11 708
###uCharts网站 ####因为经常有用到uni-app开发一些app和小程序相关的项目，也经常用到图表相关的插件，推荐ucharts给大家，个人感觉还是不错的，种类多也比较完善，使用方法在插件市场有详细的例子，这里附一个网站：http://doc.ucharts.cn/1172181 ...
uniapp正负柱状图如何让中间一直为0
12-13
在 UniApp 中创建一个正负柱状图并保持中间值为0，你可以通过JavaScript或者其提供的图表库（如 ECharts 或者 H5-Charts）来实现。这里我会以 ECharts 为例来说明： 首先，确保已经在项目中引入了 ECharts 的库。如果还没有，可以按照官方文档进行安装：https://echarts.apache.org/docs/get-started/installation.html 1. 初始化图表： ```javascript import echarts from 'echarts'; const chart = echarts.init(document.getElementById('chart')); ``` 2. 创建数据，包括正常的正值、负值以及零值： ```javascript const data = [ { value: -50, name: '负值', color: '#ff0000' }, // 负数 { value: 0, name: '零', color: '#000' }, // 零值 { value: 50, name: '正值', color: '#00ff00' } // 正数 ]; ``` 3. 设置柱状图配置，其中 `series` 部分设置 `stack` 属性来堆叠数据，并且设置 `dataLine` 来显示一条穿过所有柱子的线： ```javascript const option = { xAxis: {}, yAxis: { stack: true, }, series: [{ type: 'bar', stack: '总量', // 同一组数据会被堆叠在一起 data, itemStyle: { normal: { color: function(data) { return data.value > 0 ? '#00ff00' : (data.value < 0 ? '#ff0000' : '#000'); // 根据值颜色编码 } } } }, { type: 'line', stack: '', data: [0, 0, 0], // 水平线的数据，始终为0 lineStyle: { type: 'dashed', // 线条样式为虚线 color: '#000' // 黑色线条 }, areaStyle: {} // 如果需要填充区域，可以在此添加配置 }], }; ``` 4. 绘制图表： ```javascript chart.setOption(option); ``` 这样就实现了正负柱状图中中间总是保持为0的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值