今天在做一個圖形報表，有個需求是要把展現的統計圖保存為圖片， 圖形報表用的Echarts-2.2.7，
以前有用過 Echarts，記得echarts插件是可以幫助我們把統計圖保存為圖片的。
只是不記得是怎么配置了，查看API文檔很久也沒有找到，最后在 文檔/配置項手冊 里面找到了配置方法 和配置 參數。
下圖是 Echarts官網 實例中的配置：
下面來說說配置保存圖片的步驟：
1.保存圖片是Echarts的一個工具，先找到工具箱
工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
2. 然后再找到 各工具的配置項
各工具配置項。
除了各個內置的工具按鈕外，還可以自定義工具按鈕。
3. 再找到保存圖片的配置
保存為圖片。
4. 再看到了保存圖片的配置項有的屬性 和可填 參數
保存的圖片格式。支持 'png' 和 'jpeg'。
保存的圖片背景色，默認使用 backgroundColor，如果backgroundColor不存在的話會取白色。
保存為圖片時忽略的組件列表，默認忽略工具欄。
是否顯示該工具。
Icon 的 path 字符串，ECharts 3 中支持使用自定義的 svg path 作為 icon，格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。
保存為圖片 icon 樣式設置。
保存圖片的分辨率比例，默認跟容器相同大小，如果需要保存更高分辨率的，可以設置為大於 1 的值，例如 2。
5. 然后根據 自己的需求去配置就好了
6.查看文檔庫 截圖
7. 項目的 JS 代碼
require(
[
'echarts',
'echarts/chart/bar' // 按需加載所需圖表
],
function (ec) {
// 基於准備好的dom，初始化echarts圖表
var myChart1 = ec.init(document.getElementById('pro-price-main'));
option1 = {
title : {
text: '文檔數量（單位：個）',
textStyle: {
fontWeight: 'normal',
fontSize: '15',
color: '#999'
},
x: 54
},
tooltip : {
show: true,
trigger: 'item',
},
legend: {
x: 'center',
y: 0,
orient : 'horizontal',
itemGap: 20,
itemWidth: 30,
itemHeight : 20,
textStyle: {
color: '#999'
},
data:['文庫總數','文庫增長數']
},
toolbox: {
show: true,
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {show:true},
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
show: true,
splitLine: false,
axisLine: {
lineStyle: {
width: 1,
color: '#f2f2f2'
}
},
axisLabel: {
textStyle: {
align: 'center',
color: '#999'
}
},
axisTick: {
show: false
},
data : result.results["docMonthData"]
}
],
yAxis : [
{
type : 'value',
show: true,
splitLine: {
lineStyle: {
color: ['#f2f2f2'],
width: 1,
}
},
axisLine: {
lineStyle: {
width: 1,
color: '#f2f2f2'
}
},
axisLabel: {
textStyle: {
color: '#999'
}
}
}
],
series : [
{
name:'文庫總數',
type:'bar',
stack: '總量',
data: result.results["docTotalData"],
itemStyle: {
normal: {
color: '#7266ba'
}
}
},
{
name:'文庫增長數',
type:'bar',
stack: '總量',
itemStyle: { // 系列級個性化
normal: {
color: '#f9d21a'
}
},
data: result.results["growthNumData"]
}
]
};
// 為echarts對象加載數據
myChart1.setOption(option1);
}
);