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

最新推荐文章于 2024-06-05 09:34:51 发布

weixin_30608503

最新推荐文章于 2024-06-05 09:34:51 发布

阅读量4k

点赞数

文章标签： javascript ViewUI

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

版权

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>

最低0.47元/天解锁文章

weixin_30608503

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Echarts曲线设置多条X轴和Y轴

Echarts曲线设置多条X轴和Y轴效果图如下：1.2.xAxis 是一个数组,当横坐标数量小于等于2的时候,默认显示下上两个坐标轴,如果大于2,则可以指定位置,并使用 offset 参数修正位置,不重叠。但，当echarts 有2个或者2个以上x轴时，tooltip trigger：axis的情况下会出现2条或者2条以上的指示线。但是我只希望其中一个x轴触发toolti...
复制链接

扫一扫