echarts 双轴均显示标签
在 echarts 图表中，双轴是常见需求。有时需要在上方轴和下方轴都显示标签。然而，默认情况下，只有下方轴显示标签。本文将介绍如何为双轴都显示标签。
xaxis: [ { min: starttime, scale: true, axislabel: { formatter: function (val) { return math.max(0, val - starttime) + " ms"; }, }, }, { min: starttime, scale: true, axislabel: { formatter: function (val) { return math.max(0, val - starttime) + " ms"; }, }, }, ],
登录后复制
如上所示，通过设置两个 x 轴，可以实现双轴。每个 x 轴具有相同的标签格式化器，确保两个轴的标签一致。
完整代码范例：
option = { xaxis: [ { type: 'category', data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] }, { type: 'category', data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] } ], yaxis: [ { type: 'value', inverse: true }, { type: 'value' } ], series: [ { data: [120, 120, 10, 80, 70, 70, 130], type: 'bar', }, { data: [10, 20, 110, 50, 30, 20, 80], type: 'bar', xaxisindex: 1, yaxisindex: 1 } ] };
登录后复制
效果如下：
[图片：双轴标签]
要仅在上方轴显示日期标签，可以自定义标签格式化器，例如：
axisLabel: { formatter: function (val) { if (val >= startTime) { return Math.max(0, val - startTime) + " ms"; } }, },
登录后复制
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容