Echarts曲线设置多条X轴和Y轴

最新推荐文章于 2024-09-12 04:05:15 发布

weixin_30608503

最新推荐文章于 2024-09-12 04:05:15 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/volodya/p/11097101.html

本文介绍了如何在Echarts中设置多条X轴和Y轴，包括当横坐标数量大于2时如何指定坐标轴位置和使用offset参数避免重叠。同时，针对在有多个X轴时tooltip出现多条指示线的问题，提出了通过配置axisPointer为none来隐藏不需要的指示线的方法，确保只显示一条指示线及其对应X轴数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts曲线设置多条X轴和Y轴效果图如下：

xAxis 是一个数组,当横坐标数量小于等于2的时候,默认显示下上两个坐标轴,如果大于2,则可以指定位置,并使用 offset 参数修正位置,不重叠。但，当echarts 有2个或者2个以上x轴时，tooltip trigger：axis的情况下会出现2条或者2条以上的指示线。但是我只希望其中一个x轴触发tooltip，另一个不触发，只显示一条指示线及相应x轴数据。需做如下配置：

每个x轴的配置项有

axisPointer 这个配置项

在不想显示的x轴上写配置项

axisPointer type 为 none 即可

如下

 xAxis: [{
            type: 'category',
            position: 'bottom',
            data: [...]
        },{
            type: 'category',
            position: 'bottom',
            offset: 25,
            axisPointer: {
                type: 'none'
            },
            data: [...]
        }]

则第二个会隐藏

eg:2个x轴配置

  "xAxis": [
                {
                       "name":"xxxxA", "max":"400", "type": "value"
}, { "name":"xxxxB", "type": "value" } ],

 
  eg:多个x轴配置 
 

  "xAxis": [
                   {
                       "name":"xxxxA", "max":"400", "type": "value"}, { "name":"xxxxB", "type": "value" }, { "name":"xxxxC", "type": "value", "position":"top" "offset":30, } ],

最后在series中设置xAxisIndex为xaxis 的index 就可以了

              "series": [
                    {
                        "name":"学程数",
                        "type":"line", "xAxisIndex": 1, "data":[1,2,4,5, 8, 9.0, 8,6,5,9] }, { "name":"总题数", "type":"bar", "data":[20,10,20, 49, 70, 180,70,88,93,72] }, { "name":"错题数", "type":"bar", "data":[5, 9, 9,8,24,9,11,32,13,21] } ]

示例代码01：

 
     <!DOCTYPE html> 
    
     <html> 
    
     <head> 
    
      <meta charset="utf-8"> 
    
      <title>ECharts</title>

最低0.47元/天解锁文章

200万优质内容无限畅学