echarts隐藏部分坐标标签
时间: 2023-07-05 12:08:55 浏览: 212
解决echarts中横坐标值显示不全(自动隐藏)问题
5星 · 资源好评率100%
要隐藏 ECharts 中某些坐标轴标签,可以使用 ECharts 的 `axisLabel` 配置项中的 `formatter` 属性,该属性允许您自定义坐标轴标签的显示内容。您可以在回调函数中根据自己的需求返回需要显示的标签和空字符串。
以下是一个示例代码,它将 x 轴的标签按照一定规则进行隐藏:
```javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: {
formatter: function(value, index) {
// 只显示第一项和最后一项的标签,其它项都不显示
return (index === 0 || index === 6) ? value : '';
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
```
在上面的代码中,我们定义了一个 x 轴,其中的 `axisLabel` 配置项中的 `formatter` 属性用来格式化标签文本。在回调函数中,我们判断当前标签的索引值是否为第一项或最后一项,如果是,则返回该标签的值,否则返回空字符串,从而隐藏该标签。
阅读全文