点击ECharts下载图标时能否动态显示内置标题与图例？

完全可以实现，整个过程用户无感知，不会影响你日常用自定义组件渲染标题、图例的展示效果。核心思路是临时切换ECharts内置标题、图例的显隐状态，导出完成后立刻还原配置。
不要依赖默认的保存事件回调改配置，默认保存逻辑触发时已经开始生成图片，时序上会来不及，直接接管按钮点击逻辑是最稳定的方案。

实现步骤 #

• 初始化图表时，在配置项里提前写好和页面自定义组件样式、位置完全一致的title、legend配置，默认设置show: false，日常渲染时这两个内置组件不会显示，完全不影响原有自定义组件的逻辑。
• 重写toolbox中saveAsImage按钮的点击响应，走自定义导出流程：
  1. 点击保存按钮时，先调用setOption将title、legend的show属性设为true，同时临时关闭动画避免界面闪烁
  2. 等待ECharts完成重绘（用requestAnimationFrame等一帧渲染周期即可），调用实例的getDataURL方法获取包含内置标题、图例的完整图片base64数据
  3. 手动触发浏览器下载，将base64数据转为图片文件保存，命名规则可和ECharts默认保存规则保持一致
  4. 下载触发后立刻再次调用setOption，把title、legend的show改回false，还原动画配置，图表回到日常展示状态

参考代码 #

// 图表初始化基础配置
const baseOption = {
  // 其余业务图表配置...
  animation: true,
  title: {
    text: '对应业务图表标题',
    // 字号、颜色、边距、位置完全对齐自定义组件效果
    show: false
  },
  legend: {
    // 图例数据、样式、位置完全对齐自定义组件效果
    show: false
  },
  toolbox: {
    feature: {
      saveAsImage: {
        // 接管默认点击逻辑
        onclick: (ecModel, api) => {
          const chartInstance = api.getModel().ecModel.ecInstance
          // 临时显示内置标题图例，关闭动画防闪烁
          chartInstance.setOption({
            animation: false,
            title: { show: true },
            legend: { show: true }
          })
          // 等待重绘完成后生成高清导出图
          requestAnimationFrame(() => {
            const exportImg = chartInstance.getDataURL({
              type: 'png',
              pixelRatio: 2,
              backgroundColor: '#ffffff'
            })
            // 触发浏览器下载
            const downloadNode = document.createElement('a')
            downloadNode.href = exportImg
            downloadNode.download = `图表导出_${Date.now()}.png`
            downloadNode.click()
            // 还原回日常展示配置
            chartInstance.setOption({
              animation: true,
              title: { show: false },
              legend: { show: false }
            })
          })
        }
      }
    }
  }
}

注意事项 #

• 内置title、legend的样式参数一定要和页面自定义组件完全对齐，避免导出图片和用户日常看到的页面效果有差异
• 如果自定义组件用到了特殊字体、自定义图标，要同步在ECharts对应配置项里声明，确保导出时资源加载正常
• 临时切换配置时仅修改show和animation属性即可，不要改动原有数据、系列配置，避免图表渲染异常

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