echarts y轴太多，导致数据看上去很乱，该如何处理，使数据看的清晰一些

option = option = {
    "title": {
        "left": "center",
        "top": 10
    },
    "legend": {
        "top": 40,
        "itemWidth": 10,
        "itemHeight": 5,
        "data": []
    },
    "tooltip": {
        "trigger": "axis",
    },
    "grid": {
        "left": "7%",
        "right": "7%",
        "bottom": "11%",
        "top": "12%",
        "show": true
    },
    "xAxis": {
        "type": "category",
        "data": ["1994-01", "1994-02", "1994-03", "1994-04", "1994-05"],
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed"
            }
        },
        "boundaryGap": false,
        "min": "dataMin",
        "max": "dataMax",
    },
    "yAxis": [
      {
        "type": "log",
        "name": "原油(吨/月)",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 10, 10, -10],
            "opacity": true
        },
        "axisLabel": {
            "rotate": 90,
            "showMaxLabel": false,
            "rich": {
                "d": {
                    "fontSize": 8,
                    "top": 20,
                    "verticalAlign": "top"
                }
            },
            "show": true
        },
        "logBase": 10,
        "position": "left",
        "offset": 0,
        "axisLine": {
            "show": false,
            onZero: false,
            "lineStyle": {
                "color": "#008000"
            }
        },
        "minorTick": {
            "show": true,
            "count": 5
        },
        "minorSplitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        }
    }, {
        "type": "log",
        "name": "天然气(万方/月)",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 10, 30, -10],
            "opacity": true
        },
        "axisLabel": {
            "rotate": 90,
            "padding": [0, 0, 20, 0],
            "showMaxLabel": false,
            "rich": {
                "dd": {
                    "fontSize": 8,
                    "top": 20,
                    "verticalAlign": "top"
                }
            },
            "show": true
        },
        "logBase": 10,
        "axisLine": {
            "show": false,
            onZero: false,
            "lineStyle": {
                "color": "#ff0000"
            }
        },
        "position": "left",
        "offset": 0,
        "minorTick": {
            "show": true,
            "count": 5
        },
        "minorSplitLine": {
            "show": false,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        }
    }, {
        "type": "log",
        "logBase": 10,
        "name": "产水(万方/月)",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 10, 50, -10],
            "opacity": true
        },
        "axisLabel": {
            "rotate": 90,
            "padding": [0, 0, 40, 0],
            "showMaxLabel": false,
            "rich": {
                "ds": {
                    "fontSize": 8,
                    "top": 20,
                    "verticalAlign": "top"
                }
            },
            "show": true
        },
        "axisLine": {
            "show": false,
            onZero: false,
            "lineStyle": {
                "color": "#0000ff"
            }
        },
        "position": "left",
        "offset": 0,
        "minorTick": {
            "show": true,
            "count": 5
        },
        "minorSplitLine": {
            "show": false,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "type": "dashed",
                "color": "#e1e1e1"
            }
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "平均单井产量",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -15, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: false,
            "show": false,
            "lineStyle": {
                "color": "#ca09c4"
            }
        },
        "axisLabel": {
            "padding": [-5, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}",
            "show": true
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "name": "含水率(%)",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -45, 20],
            "opacity": true
        },
        "position": "right",
        "offset": 0,
        "axisLine": {
          onZero: false,
            "show": false,
            "lineStyle": {
                "color": "#FF8C00"
            }
        },
        "axisLabel": {
            "rotate": 90,
            "padding": [25, 0, 0, 0],
            "showMaxLabel": false,
            "show": true,
            "formatter": "{value}"
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "开油井数",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -30, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: false,
            "show": false,
            "lineStyle": {
                "color": "#d7c825"
            }
        },
        "axisLabel": {
            "padding": [10, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}",
            "show": true
        },
        "splitLine": {
            "show": true
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "产液量",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -60, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: false,
            "show": false,
            "lineStyle": {
                "color": "#51e881"
            }
        },
        "axisLabel": {
            "padding": [40, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}",
            "show": true
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "平均单井产液量",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -75, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: false,
            "show": false,
            "lineStyle": {
                "color": "black"
            }
        },
        "axisLabel": {
            "padding": [55, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}",
            "show": true
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "气油比",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -90, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: true,
            "show": false,
            "lineStyle": {
                "color": "#095738"
            }
        },
        "axisLabel": {
            "padding": [70, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}",
            "show": true
        },
        "splitLine": {
            "show": false
        }
    }, {
        "type": "value",
        "position": "right",
        "name": "开井数",
        "nameLocation": "end",
        "nameRotate": 90,
        "nameTextStyle": {
            "baseline": "middle",
            "align": "right",
            "verticalAlign": "bottom",
            "padding": [0, 20, -105, 0],
            "opacity": true
        },
        "offset": 0,
        "axisLine": {
          onZero: true,
            "show": false,
            "lineStyle": {
                "color": "#00d9ff"
            }
        },
        "axisLabel": {
            "show": true,
            "padding": [85, 0, 0, 0],
            "rotate": 90,
            "showMaxLabel": false,
            "formatter": "{value}"
        },
        "splitLine": {
            "show": false
        }
    }],
    "dataZoom": [{
        "type": "inside",
        "startValue": "2015-01",
        "endValue": "2035-01",
        "filterMode": "filter",
        "show": false
    }, {
        "show": false,
        "type": "slider",
        "bottom": 30,
        "start": 0,
        "end": 100,
        "filterMode": "filter"
    }],
    "series": [
      {
        "name": "原油(吨/月)",
        "type": "line",
        "stack": "yy",
        "data": [120, 170, 200, 220, 206],
        "encode": {
            "x": 0,
            "y": 1
        },
        "yAxisIndex": 0,
        "itemStyle": {
            "color": "#008000"
        },
        "symbolSize": 5,
        "symbol": "circle",
        "lineStyle": {
            "width": 1
        },
        "xAxisIndex": 0,
        "markPoint": {
            "silent": true,
            "data": []
        }
    }, {
        "name": "含水率(%)",
        "type": "line",
        "data": [120, 230, 360, 403, 403],
      "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "#FF8C00"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "产水(吨/月)",
        "type": "line",
        "stack": "dcs",
        "data": [340, 340, 230, 403, 540],
        "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 2,
        "itemStyle": {
            "color": "#0000ff"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "开油井数(口)",
        "type": "line",
        "data": [23, 34, 23, 23, 12],
      "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "#d7c825"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "平均单井产量(吨)",
        "type": "line",
        "data": [12, 32, 23, 34, 11],
          "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 3,
        "itemStyle": {
            "color": "#ca09c4"
        },
        "symbolSize": 4,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "天然气(万方/月)",
        "type": "line",
        "stack": "trq",
        "data": [12, 32, 34, 32, 31],
        "encode": {
            "x": 0,
            "y": 2
        },
        "yAxisIndex": 1,
        "itemStyle": {
            "color": "#ff0000"
        },
        "symbolSize": 4,
        "symbol": "circle",
        "lineStyle": {
            "width": 1
        },
        "markPoint": {
            "silent": true,
            "data": []
        }
    }, {
        "name": "产液量(吨)",
        "type": "line",
        "data": [12, 23, 12, 32, 43],
          "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "#51e881"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "平均单井产液量(吨)",
        "type": "line",
        "data": [23, 23, 12, 12, 14],
          "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "black"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "气油比(m³/t)",
        "type": "line",
        "data": [34, 23, 67, 45, 87],
          "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "#095738"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }, {
        "name": "开井数(口)",
        "type": "line",
        "data": [78, 67, 56, 67, 67],
      "symbol": "circle",
        "encode": {
            "x": 0,
            "y": 3
        },
        "yAxisIndex": 4,
        "itemStyle": {
            "color": "#00d9ff"
        },
        "symbolSize": 5,
        "lineStyle": {
            "width": 1
        }
    }]
}

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

7条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
阿里嘎多学长 2025-05-09 16:27
关注
阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

echarts y轴太多，导致数据看上去很乱，可以通过以下方法来处理：

使用 categoryAxis：如果你的数据是分类数据，可以使用 categoryAxis 将 y 轴分割成多个小区间，每个小区间对应一个类别，这样可以减少 y 轴的数量。

option = { "xAxis": { "type": "category", "data": ["类别1", "类别2", "类别3", ...] }, "yAxis": { "type": "value", "splitLine": { "show": false } } };

使用 logScale：如果你的数据是数值数据，可以使用 logScale 将 y 轴转换为对数坐标系，这样可以减少 y 轴的数量。

option = { "yAxis": { "type": "log", "splitLine": { "show": false } } };

使用 grid：可以使用 grid 将图表分割成多个小区间，每个小区间对应一个 y 轴，这样可以减少 y 轴的数量。

option = { "grid": { "left": "3%", "right": "4%", "bottom": "3%", "containLabel": true } };

使用 tooltip：可以使用 tooltip 将数据的详细信息显示在 tooltip 中，这样可以减少 y 轴的数量。

option = { "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } } };

使用 legend：可以使用 legend 将数据的类别显示在图表的右侧，这样可以减少 y 轴的数量。

option = { "legend": { "data": ["类别1", "类别2", "类别3", ...], "orient": "vertical", "left": "center", "bottom": "10%" } };

这些方法可以单独使用，也可以组合使用以达到最佳的效果。
解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
2021-01-13 14:24

季文冬的博客问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。分析先贴一下页面代码...
Echarts 折线图y轴标签值太长时显示不全的解决办法
2018-02-06 14:54

Dandelion_drq的博客所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。分析先贴一下页面代码 HTML div class="row-wrapper"> ...
echarts 折线图设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
2020-11-20 01:48

weixin_39726131的博客作者丨夙言来源丨前端大牛爱好者(Web-2017)https://segmentfault.com/a/1190000018993981本文章篇幅略长，内容有点多，大佬可根据目录选择性查阅，新人可一步步来阅读。1、前言1.1 业务场景突然接到产品说要做一个...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
2020-03-16 17:04

我叫航航航的博客 Echarts——实现折线图Y轴不等距百分比（最终解决方案）出现背景解决思路出现背景最近公司有一个需求，主要是想展示近7日产品的一个良品率（百分率制）。但是呢，基本上每天这个百分比率在90%~100%之间，很少...
Echarts设置y轴值间隔
2019-03-21 16:56

祈澈菇凉的博客需求：如图，y轴之间的距离太小，这样就太过于拥挤了，现在要修改echarts里面的属性，设置y轴值间隔让图表看上去舒服一些。其实很多问题，真的只是因为自己没有好好的看文档，很多文档上面都写的清清楚楚的...
echarts折线图tooltip中如何仅展示鼠标当前位置相应的指标数据
2020-12-04 16:08

Rocky_zs的博客第一次发文章，主要是今天同事提个需求，说一个比较复杂的折线图(大概有10几条线)的线图，tooltip显示的太多,没有办法找到当前要看的线条的数据。我查了echarts的文档只是说把trigger设置为’item‘后才可以自定义...
Echarts设置y轴之间的空隙问题
2019-04-04 10:57

编程微刊(祈澈菇凉)的博客需求：如图，y轴之间的距离太小，这样就太过于拥挤了，现在要修改echarts里面的属性，设置y轴值间隔让图表看上去舒服一些。其实很多问题，真的只是因为自己没有好好的看文档，很多文档上面都写的清清楚楚的，...
【数据可视化】Echarts官方文档及常用组件
2024-03-18 21:10

zxctscl的博客【数据可视化】Echarts最常用图表，但是没有介绍在遇到问题时如何寻求帮助，也没有详细介绍图表中组件的使用。这次来介绍ECharts中官方文档、常用组件的使用方法，可以更加快捷地创建清晰明了、实用的图表。以下代码...
基于ECharts和腾讯疫情数据接口的全球疫情地图（超全）
2021-03-20 15:47

天际线上的猪的博客在学了Echarts之后，也在看到官网上有很多包括地图的实例，于是想着如何创建一个能够动态更新的疫情地图，鉴于国内疫情情势总体向好，而全球的疫情并不乐观的情况下，便制作了全球的疫情地图，这篇博客的教程也是...
echarts 折线图设置y轴最小刻度_详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化...
2020-11-20 23:59

weixin_39586395的博客 1.1、ECharts 简介个人很喜欢Echarts这个图表库，就先给大家介绍一下，方便大家更好的了解。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 5月9日

echarts y轴太多，导致数据看上去很乱，该如何处理，使数据看的清晰一些

7条回答 默认 最新

解决方案

问题事件

7条回答默认最新