zoukankan      html  css  js  c++  java
  • Echarts 折线图y轴标签值太长时显示不全的解决办法 (Markdown使用示范文)

    前言:相信 Echarts 用的比较多的童鞋都会遇到,Y 轴的标签太长,以至于显示不下的情况。

    我的尝试:试过改容器的大小,也是过设置 option.grid.left ,总觉得不太好,因为 Y 轴的标签的长度是不确定的,一味的用 left 去推,页面的排版总是控制不好。

    目前比较好的解决办法: 设置: option.grid.containLabel = true

    option: {
        grid: {
            containLabel: true
        }
    }
    

    看一下官方对这个属性的解释:

    grid. containLabel

    grid 区域是否包含坐标轴的刻度标签。

    containLabel 为 false 的时候:

    • grid.leftgrid.rightgrid.topgrid.bottomgrid.widthgrid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
    • 这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。

    containLabel 为 true 的时候:

    • grid.leftgrid.rightgrid.topgrid.bottomgrid.widthgrid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
    • 这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。

    后语:这下小伙伴们知道,以后遇到这个问题,该先做什么了吧

  • 相关阅读:
    最长上升子序列(实验回顾)
    数据库应用开发一、vs
    全文检索
    mangtomant 增删改查
    django
    SQLAlchemy 增删改查 一对多 多对多
    Flask-Sqlalchemy—常用字段类型说明
    flask
    文件下载
    python连接mongodb
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/12512210.html
Copyright © 2011-2022 走看看