本文是对 Echarts 自定义工具栏的总结.
1. 图表刷新
- function reflowChart(id) {
- var mychart = echarts.init(document.getElementById(id));
- mychart.resize();
- }
2. 导出图片
通过定义的 getDataURL() 方法获取到下载图片 的 base64 的 URL, 难点在与 base64 转图片, 找了好多参考文档尝试终于解决了.
- function exportChart(id,format) {
- var mychart = echarts.init(document.getElementById(id));
- var img = new Image();
- if (format == "png") {
- img.src = mychart.getDataURL({
- type: 'png'
- });// 获取图片 url
- } else if (format == "jpg") {
- img.src = mychart.getDataURL({
- type: 'jpeg',
- backgroundColor: '#fff'
- });
- }
- downloadFile('chart', img.src);
- }
- // 下载
- function downloadFile(fileName, content) {
- var aLink = document.createElement('a');
- var blob = base64ToBlob(content); //64 位转图片
- aLink.download = fileName;
- aLink.href = content;
- aLink.click();
- }
base64 转图片的代码:
- //base64 编码转图片, 方法一
- function base64ToBlob(urlData) {
- var parts = urlData.split(';base64,');
- var contentType = parts[0].split(':')[1];
- var raw = window.atob(parts[1]); // 解码
- var rawLength = raw.length;
- var uInt8Array = new Uint8Array(rawLength);
- for (var i = 0; i < rawLength; ++i) {
- uInt8Array[i] = raw.charCodeAt(i);
- }
- return new Blob([uInt8Array], {
- type: contentType
- });
- }
- //base64 编码转图片, 方法二
- function base64ToBlob(urlData) {
- var arr = urlData.split(','),mine = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n=bstr.length,uInt8Array = new Uint8Array(n);
- while (n--) {
- uInt8Array[n] = bstr.charCodeAt(n);
- }
- return new Blob([uInt8Array], {
- type: contentType
- });
- }
来源: https://www.2cto.com/kf/201805/747843.html