JS，ECharts堆叠柱状图的dataZoom曲线渲染问题
本帖最后由 cqwcns 于 2023-2-20 15:52 编辑我发现ECharts堆叠柱状图的dataZoom曲线（数据阴影）渲染，是根据第一列数据做的。
如下图，dataZoom曲线（数据阴影）是根据数据集参评率的数据渲染的。
我希望指定其他列（例如最后列）来渲染dataZoom曲线（数据阴影），不知道怎么实现。
请各位大佬指教，感谢。
官方文档随意门：Documentation - Apache ECharts
代码：
// 数据
const arrDateset = [
["部门", "参评率", "满意率", "重复率", "投诉率"],
["广东省", 120, 160, 20, 20, 40],
["台湾省", 80, 20, 0, 0, 100],
["北京市", 60, 40, 40, 40, 180],
["上海市", 20, 80, 60, 80, 240],
["四川省", 40, 60, 80, 100, 280],
["福建省", 100, 100, 100, 60, 360]
];
// 创建系列
const objSeries = {
type: 'bar', stack: 'total', label: {
show: true
},
emphasis: {
focus: 'series'
}
},
arrSeries = [];
for (let i = 0; i < arrDateset.length - 1; i++) {
arrSeries.push(objSeries);
}
// 创建配置
option = {
dataset: {
source: arrDateset
},
xAxis: {},
yAxis: { type: 'category' },
dataZoom: { yAxisIndex: 0 },
series: arrSeries
};
DEMO链接：
https://echarts.apache.org/examp ... Ylx3QMKQ38g7HSBLlkA
直接访问DEMO链接，可以跳转到官方示例页面测试。
或者复制我的代码，到官方示例页面中复现，谢谢。 如果你想让 ECharts 堆叠柱状图的 dataZoom 曲线（数据阴影）渲染根据数据集的其他列而非第一列，可以通过设置 dataZoom 的 yAxisIndex 属性来指定渲染哪个轴上的数据。默认情况下 yAxisIndex 为 0，表示渲染 y 轴上索引为 0 的数据，即数据集第一列。
具体来说，你可以将 dataZoom 的配置改为如下所示：
dataZoom: {
yAxisIndex: arrDateset.length - 1
}
这里将 yAxisIndex 的值设为 arrDateset.length - 1，即数据集的最后一列（假设最后一列是需要渲染的数据）。这样就可以让 dataZoom 曲线（数据阴影）渲染最后一列的数据，而非第一列的数据。
需要注意的是，如果最后一列的数据类型不是数值型，可能会导致渲染出错。此时可以将该列数据转换为数值型再进行渲染。 Jacen 发表于 2023-2-20 16:40
如果你想让 ECharts 堆叠柱状图的 dataZoom 曲线（数据阴影）渲染根据数据集的其他列而非第一列，可以通过 ...
感谢指教。
我直接将我的：
dataZoom: { yAxisIndex: 0 }
改为：
dataZoom: {
yAxisIndex: arrDateset.length - 1
}
渲染失败，dataZoom组件不出现，我想应该是的问题，但不知道怎么解决。
请指教，感谢。 本帖最后由 1073 于 2023-2-20 19:08 编辑
demo怎么打不开 可以打开的，直接点击。
DEMO链接：
https://echarts.apache.org/examp ... Ylx3QMKQ38g7HSBLlkA
直接访问DEMO链接，可以跳转到官方示例页面测试。
或者复制我的代码，到官方示例页面中复现，谢谢。 大概看了下，yAxisIndex属性是控制使用哪个坐标轴的，跟你想要的不是一回事。可以换个思路进行实现：
1、把要展示的项排到数组第一位。
2、如果不想把数据顺序变换。可以额外增加一个背景的bar做默认占位，其值被计算到。
页:
[1]