JS，ECharts堆叠柱状图的dataZoom曲线渲染问题

cqwcns

我发现ECharts堆叠柱状图的dataZoom曲线（数据阴影）渲染，是根据第一列数据做的。
如下图，dataZoom曲线（数据阴影）是根据数据集参评率的数据渲染的。


我希望指定其他列（例如最后列）来渲染dataZoom曲线（数据阴影），不知道怎么实现。
请各位大佬指教，感谢。
官方文档随意门：Documentation - Apache ECharts





代码：

[JavaScript] 纯文本查看 复制代码

// 数据
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[0].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链接，可以跳转到官方示例页面测试。
或者复制我的代码，到官方示例页面中复现，谢谢。

Jacen

如果你想让 ECharts 堆叠柱状图的 dataZoom 曲线（数据阴影）渲染根据数据集的其他列而非第一列，可以通过设置 dataZoom 的 yAxisIndex 属性来指定渲染哪个轴上的数据。默认情况下 yAxisIndex 为 0，表示渲染 y 轴上索引为 0 的数据，即数据集第一列。

具体来说，你可以将 dataZoom 的配置改为如下所示：

[JavaScript] 纯文本查看 复制代码

dataZoom: {
  yAxisIndex: arrDateset[0].length - 1
}

这里将 yAxisIndex 的值设为 arrDateset[0].length - 1，即数据集的最后一列（假设最后一列是需要渲染的数据）。这样就可以让 dataZoom 曲线（数据阴影）渲染最后一列的数据，而非第一列的数据。

需要注意的是，如果最后一列的数据类型不是数值型，可能会导致渲染出错。此时可以将该列数据转换为数值型再进行渲染。

cqwcns

Jacen 发表于 2023-2-20 16:40
如果你想让 ECharts 堆叠柱状图的 dataZoom 曲线（数据阴影）渲染根据数据集的其他列而非第一列，可以通过 ...

感谢指教。

我直接将我的：
dataZoom: { yAxisIndex: 0 }
改为：
dataZoom: {
  yAxisIndex: arrDateset[0].length - 1
}
渲染失败，dataZoom组件不出现，我想应该是[0]的问题，但不知道怎么解决。

请指教，感谢。

1073

demo怎么打不开

cqwcns

可以打开的，直接点击。

DEMO链接：
https://echarts.apache.org/examp ... Ylx3QMKQ38g7HSBLlkA

直接访问DEMO链接，可以跳转到官方示例页面测试。
或者复制我的代码，到官方示例页面中复现，谢谢。

woyaoxuexi

大概看了下，yAxisIndex属性是控制使用哪个坐标轴的，跟你想要的不是一回事。可以换个思路进行实现：
1、把要展示的项排到数组第一位。
2、如果不想把数据顺序变换。可以额外增加一个背景的bar做默认占位，其值被计算到。