ECharts ThemeRiver图表高级配置问题咨询

针对配置ThemeRiver图表遇到的4个问题，给出具体解决方法：

1. 移除左侧初始值为0/过小的扎堆图例 #

有两种可行方式：

• 数据源过滤：提前遍历主题数据，只保留包含非0有效数值的主题，将这些主题名加入legend.data数组，彻底剔除无意义的图例项
• 手动控制图例显示：通过legend.selected属性指定不显示的图例，示例：

legend: {
  data: [...],
  selected: {
    '需要隐藏的图例名称': false
  }
}

如果需要动态判断，可在初始化图表前遍历数据，生成selected对应的键值对。

2. 增加坐标轴刻度数量（interval:0无效的处理） #

由于你的singleAxis是数值类型，interval:0仅表示自动计算间隔，若要强制增加刻度，可采用以下两种配置：

• 设置splitNumber指定刻度分割段数，ECharts会自动基于该值计算刻度：

singleAxis: {
  // ...原有配置
  splitNumber: 20 // 可根据需求调整数值
}

• 直接设置固定间隔interval，比如每20年显示一个刻度：

singleAxis: {
  // ...原有配置
  interval: 20
}

3. 格式化坐标轴提示框顶部的年份数字 #

修改singleAxis.axisPointer.label.formatter，对数值取整并移除千位分隔符，与坐标轴刻度格式保持一致：

singleAxis: {
  // ...原有配置
  axisPointer: {
    animation: true,
    label: {
      show: true,
      formatter: function(value) {
        // 先取整，再移除千位分隔符
        return Math.round(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
      }
    }
  }
}

4. 应用Decal Pattern图案 #

在系列的itemStyle中配置decal属性即可，若使用按需引入的ECharts，需确保引入了decal模块；若为完整CDN引入则无需额外操作。示例配置：

series: [
  {
    type: 'themeRiver',
    emphasis: {
      itemStyle: {
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.8)'
      }
    },
    // 新增decal配置
    itemStyle: {
      decal: {
        symbol: 'circle', // 可选内置符号：rect, triangle, diamond等
        symbolSize: 6,
        color: 'rgba(255, 255, 255, 0.6)',
        spacing: 12,
        rotate: 0
      }
    },
    data: [...]
  }
]

也可使用自定义图案，将symbol设置为图片URL，比如symbol: 'url("pattern.png")'。

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