Eachrts, 图表显示问题

448 阅读1分钟

问题:数据相差太大导致数据小的那一项显示不出来。

image.png

解决:利用 barMinHeight 属性,给定一个最小高度。

新问题:当数据有为0的时候,会出现这种情况

image.png

初次解决方案:把数据为0的那一项赋值为null

新需求:柱状图和线型图切换, 这个时候会出现很尴尬的情况,由于数据为0的被赋值给null后,线型图的线路无法连接会断开。

image.png

最终解决:在 init 初始化之后 监听柱状图和线型图的切换,获取到展示的数据最大值和最小值, 利用最大值和最小值的倍数来控制 barMinHeight 的高度

const createMap = () => {
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(document.getElementById('main')!);
	documentChart.value = myChart
	// 在切换柱状图和线型图 避免数据相差太大 数据小的显示不出来
	myChart.on('magictypechanged', (params: any) => {
		if (params.currentType == 'bar') {

			let min = seriesData.value[0]; // 假设第一个元素是最小值
			let max = seriesData.value[0]; // 假设第一个元素是最大值
			for (let i = 1; i < seriesData.value.length; i++) {
				if (seriesData.value[i] < min) {
					min = seriesData.value[i]; 
				}
				if (seriesData.value[i] > max) {
					max = seriesData.value[i];
				}
			}
			const multiple = max / min
			EachrtsOption.value.series[0].barMinHeight =min && multiple > 100 ? 5 : 0
		}
		else if (params.currentType == 'line') {
			EachrtsOption.value.series[0].barMinHeight = 0
		}
	})

	// 绘制图表
	myChart.setOption(EachrtsOption.value);
};

注意: 当线型图切换到柱状图的时候,如果barMinHeight 不等于0,在调用接口的时候大胆的把barMinHeight赋值给0,切换线型图和柱状图本身不需要请求接口的。除非你自己调用了