需求:svg轉img(郵件發送highcharts可視化圖表給用戶查看 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./highcharts.js"></script>
<body>
<div class="container" id="container">
</div>
<script>
var chart = Highcharts.chart('container', {
plotOptions:{
series:{
//動畫時間設置:false
animation:false
}
},
chart:{
events:{
load:function(e){
var curDiv=this.container;
//svg標籤轉img標籤,某些郵件客戶端支持img_svg,不支持svg標籤
var svg=curDiv.innerHTML;
var imgStr="<img src=\"data:image/svg+xml;base64,"+utoa(svg)+"\" >";
curDiv.outerHTML=imgStr;
}
},
},
series: [{
name: '安裝，實施人員',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
});
// 使用utf-8字符集進行base64編碼
function utoa(str) {
return window.btoa(unescape(encodeURIComponent(str)));
}
// 使用utf-8字符集解析base64字符串
function atou(str) {
return decodeURIComponent(escape(window.atob(str)));
}
</script>
</body>
</html>
echarts不採納原因:1.郵件客戶端不支持js腳本,canvas標籤渲染;
2.後臺通過JBrowserDriver爬取頁面,不支持echarts的圖片渲染完時事件:因此轉不了圖片
echarts轉圖片:
//echart轉圖片
var snapshotImage = new Image();
document.body.append(snapshotImage);
chart.on('finished', function () {
snapshotImage.src = chart.getDataURL();
});
當然echarts也支持svg渲染器,我沒進行測試
//import 'zrender/lib/svg/svg';
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});