问题:数据相差太大导致数据小的那一项显示不出来。
解决:利用 barMinHeight 属性,给定一个最小高度。
新问题:当数据有为0的时候,会出现这种情况
初次解决方案:把数据为0的那一项赋值为null
新需求:柱状图和线型图切换, 这个时候会出现很尴尬的情况,由于数据为0的被赋值给null后,线型图的线路无法连接会断开。
最终解决:在 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,切换线型图和柱状图本身不需要请求接口的。除非你自己调用了