自定义echarts下载按钮

发布时间:2024年01月12日

这里举例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);
      }
    },

文章来源:https://blog.csdn.net/weixin_59017683/article/details/135544638
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。