如何为Apache ECharts的detail.formatter配置第二个变量（如date）？

安全阿岳

2026-8-15

解决Apache ECharts仪表盘detail自定义date变量不显示的问题

问题出在ECharts的模板字符串formatter只默认解析内置的{value}变量，自定义的date属性不会被自动识别替换。要让date正常显示，你需要改用函数式formatter，直接在函数里访问你的数据变量，拼接出带样式的文本。

修改后的核心代码

把原来的字符串数组formatter替换成：

detail: {
  formatter: function() {
    // 直接访问gaugeData里的date属性
    return `{header|${gaugeData.value}}\n{subHeader|${gaugeData.date}}`;
  },
  // 定义对应富文本样式
  rich: {
    header: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#333'
    },
    subHeader: {
      fontSize: 14,
      color: '#666',
      marginTop: 8
    }
  }
}

完整示例代码

// 你的数据变量
const gaugeData = {
  value: 75,
  date: '2024-05-20'
};

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('main'));

// 图表配置项
const option = {
  series: [
    {
      type: 'gauge',
      detail: {
        formatter: function() {
          return `{header|${gaugeData.value}}\n{subHeader|${gaugeData.date}}`;
        },
        rich: {
          header: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#2f4554'
          },
          subHeader: {
            fontSize: 16,
            color: '#939393',
            lineHeight: 20
          }
        }
      },
      data: [
        {
          value: gaugeData.value,
          name: '完成率'
        }
      ]
    }
  ]
};

// 渲染图表
myChart.setOption(option);