使用dataZoom对横坐标时间轴进行缩放的时候，缩放到最小值不再缩放的时候会触发时间轴移动，图表不动的情况 #19205
Description
Version
"echarts": "^5.0.0",
Link to Minimal Reproduction
使用dataZoom对横坐标时间轴进行缩放的时候，缩放到最小值不再缩放的时候会触发时间轴移动，图表不动的情况
Steps to Reproduce
import * as echarts from 'echarts'
// import { max } from '_moment@2.29.1@moment'
/**
-
画双折线图
-
@param container 容器
-
@param xData x轴数据
-
@param data_l0 第一条折线图数据
-
@param data_0 第一根柱图数据
-
@param data_1 第二根柱图数据
-
@param data_2 第三根柱图数据
*/
var colors = ['red', 'green','#c23531']; //三种状态的颜色
var state = ['异常', '计划','停机']; //三种状态
export function drawOnlyBarChart(container, dataSource) {
const doubleLine = echarts.init(document.getElementById(container), null, {
renderer: 'svg'
})
// 图表最大值和步进计算
let yMax = 0
let stepNum = 0
yMax = 100
stepNum = Math.floor(yMax / 5)
const doubleLineOption = {
color: colors,
tooltip: {//提示框
formatter: function (params) {
return params.name + ':' + params.value[1] + '~' + params.value[2];
}//数据的值
},
legend: {//图例
data: state,
bottom: '1%',
selectedMode: true, // 图例设为不可点击
textStyle: {
color: '#000'
}
},
grid: {//绘图网格
left: '3%',
right: '3%',
top: '1%',
bottom: '30%',
containLabel: true
},
dataZoom: [
{
type: 'inside',
filterMode: 'none',
show: true,
realtime: true,
start: 0,
height: 16,
end: 100,
bottom: 10,
minValueSpan: 5000
}
],
xAxis: {
type: 'time',
min: '2009/6/1 00:00:00',
max: '2009/6/1 23:59:59',
interval: 3600 * 1000, //以一个小时递增
min:'2009/6/1 1:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
axisLabel: { formatter: function(value) {
return '{HH}:{mm}:{ss}'
}
}
},
yAxis: {
data: ['异常', '计划','停机']
},
series: [
// 用空bar来显示三个图例
{ name: state[0], type: 'bar', data: [] },
{ name: state[1], type: 'bar', data: [] },
{ name: state[2], type: 'bar', data: [] },
{
type: 'custom',
renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
var end = api.coord([api.value(2), categoryIndex]);
// var height = api.size([0, 1])[1];
var height = 20return { type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。 shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。 x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { // 当前坐标系的包围盒。 x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }), style: api.style() }; }, encode: { x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴 y: 0// data 中『维度0』对应到 Y 轴 }, data: [ // 维度0 维度1 维度2 { itemStyle: { normal: { color: colors[0] } }, name: '开停机', value: [0, '2009/6/1 00:00:00', '2009/6/1 14:00:50'] }, { itemStyle: { normal: { color: colors[1] } }, name: '异常', value: [1, '2009/6/1 00:00:00', '2009/6/1 14:00:50'] }, { itemStyle: { normal: { color: colors[1] } }, name: '计划', value: [1, '2009/6/1 00:00:00', '2009/6/1 14:00:50'] } ] }]
}
doubleLine.setOption(doubleLineOption)
doubleLine.on('click', (e) => {
console.log('点击----------e', e)
})
window.addEventListener('resize', function() {
doubleLine.resize()
})
}
Current Behavior
我时间轴是当天的24小时，我有一段人员上班时间是当天的00:00:00 - 16:20:48，我鼠标滚轮事件对dataZoom对横坐标进行缩放的时候，缩放到最小的时候时间轴还在往左滑动，但是我的标记的区间还是停留在那里不动，就导致我这个标记刚开始是00:00:00 - 16:20:48,随着到最后我的这个标记不动时间轴动，这个区间就可能变成16:20:48之后的任何时间比如23:00:00
这是没有缩放的时候，我这个人员的结束时间大概是在16点多的时候
这是缩放到最后，就是刚开始的时候这个柱子的长度会随着时间变化，缩到最小缩放值之后，就开始横坐标时间轴一直向左移动，但是这个柱子不再变化，就导致这个柱子的实际时间跟看到的是对不上的
Expected Behavior
当缩放到最小不能再缩放的时候继续鼠标滚轮事件不要移动时间轴
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response