如何让面积图下方的绘图线在非hover状态下保持可见？

核心原因 #

仅通过MUI alpha 方法给面积区域设置半透色时，没有单独配置折线描边的常驻显示规则：绝大多数图表库的area类型系列，默认会把非hover状态下的折线描边透明度设为0，且填充层渲染层级高于折线层，直接导致未悬停时折线完全被遮挡。

实现方案 #

• 拆分填充区域和折线描边的样式配置，不要用单一color属性同时控制两类元素样式
  不要给系列根节点直接设置带透明度的color，要单独指定填充区域、折线描边的颜色和透明度，强制折线在非hover状态下保持可见。
  搭配MUI最常用的Recharts库配置示例：

  <Area
    type="area"
    dataKey="yourDataKey"
    // 折线描边单独配置，保持不透明常驻显示
    stroke={palette.primary.main}
    strokeWidth={2}
    strokeOpacity={1}
    // 面积填充单独设置50%透明度
    fill={palette.background.paper}
    fillOpacity={0.5}
  />
  

  ECharts对应配置示例：

  series: [{
    type: 'line',
    areaStyle: {
      color: palette.background.paper,
      opacity: 0.5 // 填充层单独设半透
    },
    lineStyle: {
      color: palette.primary.main,
      width: 2,
      opacity: 1 // 强制折线常驻显示
    },
    // 关闭hover才高亮折线的默认逻辑
    emphasis: {
      lineStyle: { opacity: 1 }
    },
    z: 3 // 抬高折线渲染层级，避免被填充层覆盖
  }]
  

• 关闭默认的非激活元素淡出逻辑
  部分图表库默认开启交互淡出规则：非当前hover命中的元素会被自动降低透明度，可通过全局配置关闭：
  • Recharts：给图表根组件添加inactiveOpacity={1}属性
  • Chart.js：配置项添加plugins.legend.onHover: null，同时设置elements.line.borderWidth: 2，避免默认描边宽度为0

问题效果对照 #

内容的提问来源于stack exchange，提问作者laxytt