一、图表自带工具(下载)
如图:
//简单的在图表配置中添加这个工具配置
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
二、实例化按钮下载图表
//图表
<div id="monitor_cluster_source" ref="myChart"></div>
//下载图表
<button @click="ceshi">下载图表</button>
使用官方自带的方法实现外部按钮点击下载,官网中 getDataURL,有兴趣可以点击去查看
使用getDataURL 实现下载:
methods:{
ceshi() {
// let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
let myChart = this.$echarts.getInstanceByDom(document.getElementById('monitor_cluster_source'));
// 获取画布图表地址信息
const imgUrl = myChart.getDataURL({
type: "jpeg",
pixelRatio: 1,
backgroundColor: "#fff",
excludeComponents: [
//保存图表时忽略的工具组件,默认忽略工具栏
"toolbox",
],
});
// 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片
if (window.navigator.msSaveOrOpenBlob) {
// 截取base64的数据内容(去掉前面的描述信息,类似这样的一段:data:image/png;base64,)并解码为2进制数据
let bstr = atob(imgUrl.split(",")[1]);
// 获取解码后的二进制数据的长度,用于后面创建二进制数据容器
let n = bstr.length;
// 创建一个Uint8Array类型的数组以存放二进制数据
let u8arr = new Uint8Array(n);
// 将二进制数据存入Uint8Array类型的数组中
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 创建blob对象
let blob = new Blob([u8arr]);
// 调用浏览器的方法,调起IE的下载流程
window.navigator.msSaveOrOpenBlob(blob, "echarts下载" + ".jpg");
} else {
//类似chrome浏览器创建一个a标签并使用a标签的href属性下载
let tempA = document.createElement("a");
tempA.download = "echarts下载" + ".jpg";
tempA.href = imgUrl;
document.body.appendChild(tempA);
tempA.click();
tempA.remove();
// var url = myChart.getConnectedDataURL({
// pixelRatio: 5, //导出的图片分辨率比率,默认是1
// backgroundColor: '#fff', //图表背景色
// excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏
// 'toolbox'
// ],
// type: 'png' //图片类型支持png和jpeg
// });
}
},
}
总结
两个方法下载 都可以去配置相关信息,使用那个取决与当时的需求