Echarts圖表下載爲圖片

如下圖的右上角顯示：將圖表保存爲圖片下載。 

點擊下載：

代碼部分：

總的柱狀圖代碼顯示：

	//柱狀圖start

				var dom = document.getElementById("columnar");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				// app.title = '嵌套環形圖';

				option = {
					title : {
						text : '歷史安全覈查',
					//subtext: '面積總數：970.00(㎡) 總藏書：51490(本)',
					// x: 'center'
					},
					tooltip : {
						trigger : 'axis',
						axisPointer : {
							type : 'cross',
							crossStyle : {
								color : '#999'
							}
						}
					},
					toolbox : {
						feature : {
							saveAsImage : {
								show : true
							}
						}
					},
					color : [ '#8fc31f', '#f35833', '#00ccff' ],
					legend : {
						data : [ '覈查臺數', '接收臺數', '反饋臺數' ],
					//bottom: 0
					},
					toolbox : { //工具欄(下載)
						feature : {
							saveAsImage : {}
						},
					right : '5%',  //下載圖標距右邊框5%
					},
					grid : {
						left : '3%',
						right : '4%',
						bottom : '3%',
						containLabel : true
					},
					xAxis : [ {

						/* axisLabel : {
							rotate : 5,
							interval : 0
						}, */
						type : 'category',
						// data: ['趙巷鎮', '徐涇鎮', '華新鎮', '重固鎮', '白鶴鎮', '朱家角鎮', '練塘鎮', '金澤鎮', '夏陽街道', '盈浦街道', '香花橋街道'],
						data : [ ${taskCheckSafeName} ],
						axisPointer : {
							type : 'shadow'
						}
					} ],
					yAxis : [ {
						type : 'value',
						name : '臺數',
						min : 0,
						//max: 50,
						//interval: 400,
						axisLabel : {
							formatter : '{value}'
						},
						nameLocation : 'center',
						nameGap : 65
					} ],
					series : [ {
						name : '覈查臺數',
						type : 'bar',
						// data: [229.6, 530, 684, 296, 707, 970, 796, 1366, 290, 60, 499],
						data : ${checkNumlist},
						barWidth : '25%'
					}, {
						name : '接收臺數',
						type : 'bar',
						//yAxisIndex: 1,
						//data: [13061, 17500, 32178, 13273, 33075, 51490, 47863, 34493, 13500, 3200, 23498],
						data : ${receiveNumlist},
						barWidth : '25%'
					}, {
						name : '反饋臺數',
						type : 'bar',
						//yAxisIndex: 1,
						//data: [13061, 17500, 32178, 13273, 33075, 51490, 47863, 34493, 13500, 3200, 23498],
						data : ${backNumlist},
						barWidth : '25%'
					}

					]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
				//柱狀圖end

工具欄下載代碼實現：

toolbox : { //工具欄(下載)
						feature : {
							saveAsImage : {}
						},
					right : '5%',  //下載圖標距右邊框5%
					},

所處位置：option中

 

附上後臺Action數據處理：

// 柱形圖（歷史安全覈查）start
		
		SecurityCheckData checkName = new SecurityCheckData();
		String taskCheckSafeName = "";
		List checkSafeSum = securityCheckService.queryCheckNumSum(check);
		List<Integer> checkNumlist = new ArrayList<Integer>();
		List<Integer> receiveNumlist = new ArrayList<Integer>();
		List<Integer> backNumlist = new ArrayList<Integer>();
		if (checkSafeSum.size() > 0) {
			if (checkSafeSum.size() > 0) {
				for (int i = 0; i < checkSafeSum.size(); i++) {
					Object[] task = (Object[]) checkSafeSum.get(i);
					// 覈查的name
					taskCheckName = String.valueOf(task[0].toString());
					taskCheckName = "'"+ taskCheckName.substring(0,taskCheckName.length() - 2) + "',";
					taskCheckSafeName += taskCheckName;
					checkNum = Integer.valueOf(task[1].toString());
					checkNumlist.add(checkNum);
					receiveNum = Integer.valueOf(task[2].toString());
					receiveNumlist.add(receiveNum);
					backNum = Integer.valueOf(task[3].toString());
					backNumlist.add(backNum);
				}
			}
			taskCheckSafeName = taskCheckSafeName.substring(0,
					taskCheckSafeName.length() - 1);
		}


		TerminalData task = new TerminalData();
		task.setStartDate(startDate);
		task.setEndDate(endDate);
		//柱形圖end

	// 柱形圖（數據傳送）

		request.setAttribute("taskCheckSafeName", taskCheckSafeName);
		request.setAttribute("checkNumlist", checkNumlist);
		request.setAttribute("receiveNumlist", receiveNumlist);
		request.setAttribute("backNumlist", backNumlist);

return "layout/nav";

	}

數據庫數據查詢：（總的數據前十的）

代碼：跳轉的參考折線圖的代碼跳轉：

	public List queryCheckNumSum(SecurityCheckData check) throws Exception {
		List<Object> params=new ArrayList<Object>();
		String sql="select  createtime,count(*),"
		+" SUM( CASE  WHEN sendflag =1 THEN 1  ELSE 0  END ) sendnum,"
		+"SUM( CASE  WHEN reflag =1 THEN 1 ELSE 0  END ) renum "
		+"from security_check  group by createtime"
		+" order by createtime DESC LIMIT 10";
		return baseDao.searchPaginated2(sql, params);
	}