本帖最后由 Felix.Li 于 2025-10-31 15:06 编辑
背景
相信大家图表都出现过图表数据太接近，导致饼图或者折线图就很近，看起来很不好看，希望图表能看起来很有差异感，今天就给大家分享一个适合展示这类图表的方法: 数值轴固定等分图表。
前置介绍:
首先先简单介绍一下,我们实现的效果如下:
本质其实就是改变图表最小最大值，然后手动指定分段数量。
那么具体看看实现方式吧:
- let index = 4;
- function getDataExtent(seriesList) {
- let allValues = [];
- seriesList.forEach(series => {
- series.data.forEach(item => {
- allValues.push(item.value);
- });
- });
- const maxValue = Math.max(...allValues);
- const minValue = Math.min(...allValues);
- return { min: minValue, max: maxValue };
- }
- const { min, max } = getDataExtent(option.series);
- option.yAxis.min = min;
- option.yAxis.max = max;
- option.yAxis.interval = (max-min)/index;
- return option;
以下是示例Demo:
|
