如何在ECharts中实现带自定义渐变图例的地理地图？

完全可以实现你需要的「彩色方块 + 数值 + 标签」样式图例，默认的渐变条图例只是内置形式之一，ECharts支持通过自定义图例项实现这类需求，核心是利用legend组件的formatter配置与HTML样式渲染能力。

实现思路 #

• 将图例类型设为plain（普通图例，支持自定义单条项内容）
• 为每个图例项绑定对应颜色、数值和标签文本
• 通过formatter函数返回包含彩色方块（用HTML <span> 设置背景色）、数值、标签的组合字符串
• 可配合legend的布局属性或HTML样式调整方块大小、间距等细节

代码示例片段 #

option = {
  // 地图基础配置（geo/series等）
  legend: {
    type: 'plain',
    orient: 'vertical', // 可选horizontal改为横向布局
    left: 'right',
    top: 'center',
    data: [
      { name: 'PIEMONTE', value: -2.4, color: '#1f77b4' },
      { name: 'LOMBARDIA', value: 1.2, color: '#ff7f0e' },
      // 按需添加更多图例项
    ],
    formatter: function(params) {
      // 拼接自定义图例内容：彩色方块 + 数值 + 标签
      return `
        <span style="display:inline-block; width:16px; height:16px; background:${params.color}; margin-right:8px; border-radius:2px;"></span>
        <span style="margin-right:8px;">${params.value}</span>
        <span>${params.name}</span>
      `;
    },
    // 隐藏默认图例标记，用自定义HTML方块替代
    itemStyle: {
      opacity: 0
    }
  },
  // 地图系列配置...
};

注意事项 #

• 默认Canvas渲染模式下，图例的formatter支持HTML渲染，复杂样式可通过CSS微调
• 若需更精细的布局控制，也可结合ECharts的graphic组件手动绘制图例元素，完全自定义位置与样式
• 需保证图例数据与地图区域的颜色、数值对应，维持视觉一致性

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