ECharts堆叠图数据细微变化的趋势增强技巧
在使用ECharts绘制堆叠图时，如果数据波动细微，图表可能无法清晰展现趋势。本文提供一种增强细微趋势视觉效果的方法：利用双Y轴。
问题：当堆叠图中某些数据系列（例如'direct'和'search engine'）变化极其接近时，默认坐标轴下趋势几乎不可见。以下代码示例说明了这个问题：
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [32.21, 32.23, 32.56, 32.19, 32.33, 32.3, 32.5]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [34.41, 34.45, 34.40, 34.41, 34.47, 34.49, 34.45]
}
]
};
解决方案：使用双Y轴放大数据变化。通过为不同数据系列分配不同的Y轴，并设置合适的Y轴范围，可以有效放大细微的数据变化，使趋势更加清晰可见。例如，可以将'Direct'系列分配到一个Y轴范围(32-33)，'Search Engine'系列分配到另一个Y轴范围(34-35)。
实现方法需要根据实际数据和图表需求调整ECharts配置，为每个系列指定对应的Y轴，并设置每个Y轴的最小值和最大值。 这将需要修改上述代码，添加第二个yAxis配置项，并为每个series指定yAxisIndex属性。 具体实现细节需根据数据特点调整。 例如，可以根据数据的最大最小值自动计算合适的Y轴范围，以达到最佳的视觉效果。
