echarts
echarts copied to clipboard
[Bug] Using formator causes dataZoom to fail
Version
4.9.0
Link to Minimal Reproduction
No response
Steps to Reproduce
const options = {
dataZoom: [
{
type: 'inside',
xAxisIndex: [0],
start: 80,
end: 100
},
{
show: true,
type: 'slider',
xAxisIndex: [0],
start: 80,
end: 100,
bottom: 10,
textStyle: {
color: '#fff'
}
}
],
grid: {
left: '20px',
right: '10px',
top: '12px',
bottom: '60px',
containLabel: true,
show: false
},
tooltip: {
trigger: 'item',
formatter: function (params) {
props?.onToolTipChange && props.onToolTipChange(params);
return ‘1’;
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisPointer: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 1)',
type: 'dashed',
opacity: 0.3
},
label: {
show: true,
color: '#2C3039',
padding: [2, 5],
lineHeight: 17,
fontSize: 12,
backgroundColor: '#78FFC7'
}
},
show: true,
axisLine: {
lineStyle: {
color: '#fff',
opacity: 0.3
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255,255,255, .3)'
},
min: 'dataMin',
max: 'dataMax',
// data: ['2022/8/3', '2022/8/4', '2022/8/4']
data: xAxisData
},
yAxis: [
{
type: 'value',
scale: true,
axisLabel: {
color: 'rgba(255,255,255, .3)'
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff',
opacity: 0.1
}
},
axisPointer: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 1)',
type: 'dashed',
opacity: 0.3
},
label: {
// margin: 6,
color: '#2C3039',
padding: [2, 5],
lineHeight: 17,
fontSize: 12,
backgroundColor: '#78FFC7'
}
}
}
],
series: [
{
type: 'candlestick',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
barMaxWidth: 6,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
},
// data: [
// ['14.746513', '14.836993', '14.836993', '14.746091'],
// [40, 35, 30, 50],
// [31, 38, 33, 44],
// [38, 15, 5, 42]
// ]
data: seriesData
}
]
};
Current Behavior
只要使用formatter方法,无论是在tooltip配置还是xAxis.axisPointer.label中,都会导致dataZoom功能异常,即无法缩放,每次hover到chart上时都会重新初始化回默认配置,不使用formatter就是OK的。(echarts版本4.9.0)
Expected Behavior
可以使用formatter方法自定义tooltip内容和自定义事件处理,同时保证dataZoom功能正常使用。
Environment
- OS: Mac
- Browser: Chrome
Any additional comments?
No response
@hyacinthsWang It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] Using formator causes dataZoom to fail