自定义echarts下载按钮

使用ECharts导出图表功能的JavaScript示例

最新推荐文章于 2025-10-01 04:25:40 发布

原创最新推荐文章于 2025-10-01 04:25:40 发布 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

2 篇文章

订阅专栏

文章详细描述了如何在网页中使用ECharts库的下载功能，通过实例ID获取图表，设置导出参数（如分辨率、背景色），并提供兼容不同浏览器的下载实现方法。

这里举例line的下载按钮

template

<span class="btn green pointer" @click='downLoad'>导出</span>

<div id="echarts" class="echarts"></div>

method

download:function() {
      var myChart = echarts.getInstanceById ($("#echarts").attr("_echarts_instance_"));//通过实例id获取
      var url = myChart.getConnectedDataURL({
        pixelRatio: 5, //导出的图片分辨率比率,默认是1
        backgroundColor: '#fff', //图表背景色
        excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏
          'toolbox'
        ],
        type: 'png' //图片类型支持png和jpeg
      });
      var a = document.createElement('a');
      var type = 'png';
      a.download = myChart.getOption().title[0].text + '.' + type;
      a.target = '_blank';
      a.href = url;
      // Chrome and Firefox
      if (typeof MouseEvent === 'function') {
        var evt = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: false
        });
        a.dispatchEvent(evt);
      }
      // IE
      else {
        var html = ''
          + '<body style="margin:0;">'
          + '<img src="' + url + '" style="max-width:100%;" title="' + myChart.getOption().title[0].text + '" />'
          + '</body>';
        var tab = window.open();
        tab.document.write(html);
      }
    },