import echarts from 'echarts';
export const convertBase64UrlToBlob = (base64) => {
  const parts = base64.dataURL.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; i++) {
    uInt8Array[i] = raw.charCodeAt(i);
  return new Blob([uInt8Array], { type: contentType });
export const exportImg = (id, name) => {
  const myChart = echarts.getInstanceByDom(
    document.getElementById(id)
  const url = myChart.getConnectedDataURL({
    pixelRatio: 1,
    backgroundColor: '#fff', // 图表背景色
    excludeComponents: [
      'toolbox', // 保存图表时忽略的工具组件,默认忽略工具栏
    type: 'png', // 图片类型支持png和jpeg
  const a = document.createElement('a');
  a.download = `${name}.png`;
  a.target = '_blank';
  a.href = url;
  // Chrome and Firefox
  if (typeof MouseEvent === 'function') {
    const evt = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: false,
    a.dispatchEvent(evt);
  } else {
    // IE
    const base64 = {
      dataURL: url,
      type: 'png',
      ext: 'png',
    const blob = convertBase64UrlToBlob(base64);
    // 下载
    window.navigator.msSaveBlob(
      blob,
      `${name}.png`
				
&lt;template&gt;
  &lt;div class="echarts"&gt;
    &lt;IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"&gt;&lt;/IEcharts&gt;
    &lt;button @cl
				
//保存图片前显示数据标记 保存完成后隐藏数据标记
echartsProto.showLabelBeforeSaveImage=function(mychart) {
        var option=mychart.getOption();
        this._zr.on('mousedown', function (params) {
            if (params...
				
文章目录需求分析开发准备实现思路效果图参考链接
实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。。。
通过查看Echarts网站，可以很快找到其自带的toolbox配置项，在f...
				
在使用echarts做统计表时,有用户需要将统计图下载成图片,使用echarts原来的按钮,发现在IE下没反应,而且在谷歌上需要点两次(第一次生成图片,第二次下载图片),于是上网搜了相关信息后,整合下,成了下面的代码.在本人的应用下,谷歌个IE都能下载
//注:使用[X]字段名[/X]并在事件规则中使用doc.s("字段名","数值")来动态修改报表数据
var myChart = echarts.init(document.getElementById('body')); 
option = {
				
echarts自定义导出图片
需求是希望在导出柱状图的时候在顶部展示label,但是图表本身不展示label。echarts自带的saveAsImage没有关于数据项方面的配置。于是使用自定义的导出图片方法。
第一步：在toolbox中加入自定义的工具方法。
	myTool1: {
              show: true,
              title: '保存图片',
              icon: 'path://M939.6 655.5c-12.2 0-20.4 8.1-2
				
要在 echarts 中使用 `saveAsImage` 方法保存图片并指定保存位置，可以在调用该方法时传入一个配置对象，其中可以设置保存图片的名称、格式和保存路径。示例代码如下：
```javascript
myChart.on('click', function(params) {
  // 点击事件触发保存图片
  myChart.saveAsImage({
    name: 'myChart',
    type: 'png',
    backgroundColor: '#fff',
    pixelRatio: 2,
    // 设置保存路径
    // 如果不设置，保存在默认路径下
    // 可以是相对路径或绝对路径
    // 注意：需要在服务器环境下运行才能保存成功
    // 本地运行将会报错：Uncaught (in promise) Error: Error occurred while saving image: Not Found
    filePath: './images/'
在上面的代码中，我们为 `saveAsImage` 方法传入了一个配置对象，其中：
- `name`：保存图片的名称，默认为 `echarts`；
- `type`：保存图片的格式，默认为 `png`；
- `backgroundColor`：保存图片的背景色，默认为 echarts 的 `backgroundColor`；
- `pixelRatio`：保存图片的像素比，默认为 `1`；
- `filePath`：保存图片的路径，可以是相对路径或绝对路径，默认为 `undefined`，即保存在默认路径下。
需要注意的是，如果要在服务器环境下运行，才能成功保存图片到指定路径，如果在本地运行，将会报错。