PHP前端开发

如何让 Echarts 双轴同时显示标签?

百变鹏仔 2个月前 (11-26) #echarts
文章标签 标签

如何让 echarts 双轴同时显示标签

在 echarts 中想要同时在上方和下方显示日期标签,可以采用的方法是设置两个 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    }  ]};

在这个示例中,设置了两个 x 轴,第一个 x 轴为类别轴,数据为 ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],第二个 x 轴也是类别轴,数据与第一个 x 轴相同。通过设置两个 y 轴,实现了将上方日期标签放在 y 轴上的效果,下方日期标签则放在第二个 x 轴上。

此外,还可以通过修改 axislabel 的 formatter 函数来定制标签的显示格式,以满足不同的需求。