XIAO MAN

主题

Echarts常见问题 ​

TOOD ​

  • 折线图中间没数据的点用直线连起来
  • 鼠标滚轮滚动缩放 echarts

tooltip 显示不全 ​

tooltip. confine (boolean)

是否将 tooltip 框限制在图表的区域内。

js
tooltip: {
  confine: true
}

X 轴显示不全 ​

1️⃣ 解决办法一 ​

grid.containLabel (boolean)

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

  • containLabel 为 false 的时候：

    • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
    • 这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。

  • containLabel 为 true 的时候：

    • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
    • 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
js
grid: {
  containLabel: true
}

2️⃣ 解决办法二 ​

倾斜文字

js
xAxis: {
  axisLabel: {
    // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
    interval:0,
    // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
    rotate:-20
  }
}