在 ECharts 中,如果你想在 xAxis 中不旋转缩放标题,你可以通过设置 axisLabel
的 rotate
和 fontSize
属性来实现。以下是一个示例配置:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
rotate: 0, // 设置标题不旋转
fontSize: 12 // 设置标题字体大小
}
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
在这个示例中,xAxis.axisLabel.rotate
设置为 0
表示标题不旋转,fontSize
设置为 12
表示标题字体大小为 12px。
如果你想要在缩放时保持标题不旋转,你可以使用 ECharts 的事件监听功能来实现。以下是一个示例:
myChart.on('dataZoom', function (params) {
var xAxis = myChart.getModel().getComponent('xAxis').axis;
xAxis.axisLabel.rotate = 0;
myChart.setOption({
xAxis: {
axisLabel: {
rotate: 0
}
}
});
});
在这个示例中,我们监听 dataZoom
事件,在缩放操作发生时,将 xAxis.axisLabel.rotate
设置为 0
,并通过 setOption
方法更新图表配置。
通过这些设置,你可以确保在 xAxis 中标题不旋转缩放。
领取专属 10元无门槛券
手把手带您无忧上云