我有一个带有多个系列的echart。如果用户单击其中一个图例并启用/禁用系列,则图表会自动调整(放大或缩小)x和y轴以显示最佳轴值。
如何禁用此行为,以使图表在启用/禁用系列时不会自动调整轴?我希望两个轴始终保持初始值不变。
我的研究:我知道我们可以在X和Y轴上设置最小值和最大值,以保持X和Y轴固定。但是在这种情况下,我必须手动计算各个系列的最小值/最大值。任何内置标志或选项都将更易于使用。
答案 0 :(得分:0)
这是我的解决方案: 我最终为每个轴设置了最小值和最大值。我必须遍历每个数据系列,找出所有系列中的最大和最小可能值并将其设置在轴上。这避免了上述行为。 (某些图表可能有多个轴,因此请考虑在内)。
这是泛型函数,可用于chartOptions对象,以基于数据添加最小值和最大值。假定数据是每个系列的一部分。如果是多轴,则仅在第一轴上起作用。
static fixBothAxis(chartOptions) {
console.log(chartOptions);
const series = chartOptions.series;
let maxXAxis = -Infinity,
minXAxis = Infinity,
maxYAxis = -Infinity,
minYAxis = Infinity;
series.forEach((seriesItem: any) => {
// dont consider serieses that are related to secondary axis
if (seriesItem && seriesItem.data) {
const xSeries = seriesItem.data.map(item => item[0]);
const ySeries = seriesItem.data.map(item => item[1]);
maxXAxis = Math.ceil(Math.max(maxXAxis, ...xSeries));
minXAxis = Math.floor(Math.min(minXAxis, ...xSeries));
if(seriesItem.yAxisIndex !== 1){
maxYAxis = Math.ceil(Math.max(maxYAxis, ...ySeries));
minYAxis = Math.floor(Math.min(minYAxis, ...ySeries));
}
}
});
/* Make both max and min values "stick to nearest sensible value" */
const xAxis = Array.isArray(chartOptions.xAxis)
? chartOptions.xAxis[0]
: chartOptions.xAxis;
const yAxis = Array.isArray(chartOptions.yAxis)
? chartOptions.yAxis[0]
: chartOptions.yAxis;
if (xAxis && !isNaN(minXAxis) && !isNaN(maxXAxis)) {
xAxis.min = minXAxis;
xAxis.max = maxXAxis;
}
if (yAxis && !isNaN(minYAxis) && !isNaN(maxYAxis)) {
yAxis.min = minYAxis;
yAxis.max = maxYAxis;
}
return chartOptions;
}