如何在TypeScript的render函数中返回Apache ECharts生成的HTML字符串

你可以直接使用ECharts官方提供的服务端渲染（SSR）模式实现需求，该模式不需要依赖真实存在的DOM节点，可直接生成可直接使用的SVG图表字符串，完全适配你返回HTML字符串的场景。

实现步骤 #

1. 选择SVG作为渲染器（只有SVG渲染模式支持直接导出字符串）
2. 初始化ECharts实例时开启ssr配置，不需要传入DOM节点，提前指定图表宽高
3. 正常传入图表配置项后调用renderToSVGString()方法获取生成的SVG字符串
4. 将SVG字符串包装到你需要的HTML结构中返回即可

代码示例 #

import * as echarts from 'echarts';

renderHTML(): string {
  // 初始化ECharts SSR实例，无需传入DOM节点
  const myChart = echarts.init(null, null, {
    renderer: 'svg', // 必须使用SVG渲染器
    ssr: true, // 开启服务端渲染模式
    width: 500, // 提前指定图表宽度
    height: 400 // 提前指定图表高度
  });

  // 正常填写你的ECharts配置项
  const option = {
    // 你的图表配置，和常规使用方式完全一致
    title: {
      text: '示例图表'
    },
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150],
      type: 'bar'
    }]
  };

  myChart.setOption(option);
  // 获取生成的SVG字符串
  const svgContent = myChart.renderToSVGString();
  // 包装为最终的HTML字符串返回
  return `<div class="chart-container" style="width: 500px; height: 400px;">${svgContent}</div>`;
}

注意事项 #

• 开启SSR模式时必须手动指定宽高，无法通过自适应获取真实DOM尺寸
• 生成的静态SVG默认不支持交互，如果后续需要图表hover、点击等交互能力，可在HTML插入真实DOM后，再调用echarts.init()绑定对应DOM节点，传入相同的配置项即可恢复交互，不会重复渲染
• 如果必须使用Canvas渲染模式，可在Node环境下借助node-canvas模拟DOM环境，将生成的Canvas转为base64图片字符串，包装到<img>标签中返回

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