Echarts 3.0 Y轴数值移动端显示不全问题求助

Hey there, let's get that Y-axis display sorted for your mobile screens in ECharts 3.0! First, I spotted a couple of syntax issues in your media configuration that are likely preventing your mobile settings from taking effect, plus some tweaks we can make to fit the smaller screen space better.

Step 1: Fix the Syntax Errors in Your Mobile Media Config #

Your current media block has incorrect syntax (using = instead of : for property assignments) and duplicate properties that are overriding each other. Let's clean that up first:

let option = { 
  baseOption: { 
    yAxis: { 
      name: 'Concentração', 
      nameRotate: 90, 
      nameLocation: "center", 
      nameGap: 30, 
      type: 'log', 
      scale: true 
    } 
  }, 
  media: [{
    // Target mobile screens explicitly with a query
    query: {
      maxWidth: 768
    },
    option: {
      yAxis: { 
        nameLocation: "end", 
        nameRotate: 0, // Rotate name to horizontal to save vertical space
        nameGap: 15, // Narrow gap to avoid overlapping with labels
        axisLabel: {
          fontSize: 10, // Shrink label font for mobile screens
          margin: 8 // Add extra space between labels and axis line
        }
      }
    }
  }] 
}

Step 2: Additional Optimizations for Mobile Y-Axis Display #

Here are a few more tweaks to ensure your Y-axis values show up fully:

• Explicit media query: Adding query: {maxWidth: 768} tells ECharts exactly when to apply the mobile-specific settings, so you don't have to rely on automatic detection.
• Horizontal axis name: Setting nameRotate: 0 makes the Y-axis name display horizontally, which avoids vertical space cramping that often cuts off labels on narrow screens.
• Smaller label font: Reducing axisLabel.fontSize ensures numerical labels fit within the mobile screen width without getting clipped.
• Adjust spacing: Tweaking nameGap and axisLabel.margin creates enough breathing room between the axis name, labels, and line so nothing overlaps or gets hidden.
• Log scale fine-tuning: For log-type axes, you can add explicit min/max values in the mobile Y-axis config to control the tick range, preventing overly crowded labels on small screens.

Test these changes across different mobile screen sizes to fine-tune values like fontSize or nameGap to match your specific chart layout.

内容的提问来源于stack exchange，提问作者Sávio Raires