需求：使用百度的echarts生成雷达图，并上传到服务器端然后处理

使用各个工具：

一、echarts实例及文档，请查看官方地址链接地址

二、html2canvas

代码示例：

一、jsp页面：

ECharts radar

.radar {

width: 450px;

height: 450px;

}

二、showChart.js代码：

// 基于准备好的容器(这里的容器是id为main的div)，初始化echarts实例

var myChart = echarts.init(document.getElementById('radar'), 'dark');

// 指定图表的配置项和数据

var option = {

// rgba设置透明度0.1

backgroundColor : 'rgba(128, 128, 128, 0)',

title : {

textStyle : {

fontStyle : 'normal',

fontWeight : 'normal',

fontSize : '14'

}

},

polar : [ {

indicator : [ {

text : '速度',

max : 100

}, {

text : '力量',

max : 100

}, {

text : '防守',

max : 100

}, {

text : '技术',

max : 100

}, {

text : '耐力',

max : 100

} ],

radius : 100

} ],

series : [ {

name : '球员指数',

type : 'radar',

itemStyle : {

normal : {

areaStyle : {

opacity : '0.9',

color : new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ {

color : 'rgba(255, 215, 0, 0.9)',

offset : 0

}, {

color : '#72ACD1',

offset : 1

} ])

},

lineStyle : {

color : 'rgba(255, 215, 0, 0.9)'

}

}

}

}

]

};

myChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画

var values = []; // 满意度数组

$.ajax({

type : "post",

async : true, // 异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)

url : "http://localhost/qiuyuan/canvas/data", // 获取数据

data : {},

dataType : "json", // 返回数据形式为json

success : function(result) {

// 请求成功时执行该函数内容，result即为服务器返回的json对象

if (result) {

for (var i = 0; i < result.length; i++) {

values.push(result[i]); // 挨个取出并填入数组

}

myChart.hideLoading(); // 隐藏加载动画

myChart.setOption({ // 加载数据图表

series : [ {

data : [ {

value : values,

label : {

normal : {

show : true,

formatter : function(params) {

return params.value;

}

}

}

} ]

} ]

});

}

},

error : function(errorMsg) {

// 请求失败时执行该函数

alert("图表请求数据失败!");

myChart.hideLoading();

}

})

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

//等待0.5秒后传送到服务器

setTimeout(function() {

$(function() {

html2canvas(document.getElementById('radar'), {

// 允许跨域

// allowTaint : true,

onrendered : function(canvas) {

var dataUrl = canvas.toDataURL("image/png");

//console.log(dataUrl);

$.ajax({

url : 'http://localhost/qiuyuan/canvas/',

type : 'POST',

data : {

base64ImgData : JSON.stringify(dataUrl)

},

error : function(XMLHttpRequest) {

alert("Error: " + XMLHttpRequest.responseText);

}

});

}

});

})

}, 500);

三、server端代码：

package com.qiuyuan.web;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.codec.binary.Base64;

import org.apache.commons.lang3.StringUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;

@Controller

@RequestMapping(value = "/canvas")

public class CanvasController {

@RequestMapping("/")

public void canvas(PrintWriter writer, String base64ImgData, HttpServletResponse response) {

// 设定编码

response.setCharacterEncoding("UTF-8");

// 表示是json类型的数据

response.setContentType("application/json");

Map map = new HashMap();

boolean flag = false;

String msg = "下载失败";

try {

// 保存

String filePath = decodeBase64(base64ImgData, new File("e:\\canvas.png"));

if (StringUtils.isNotBlank(filePath)) {

flag = true;

msg = "下载成功";

}

} catch (Exception e) {

e.printStackTrace();

flag = false;

msg = "下载失败!失败原因:" + e.getMessage();

}

map.put("success", flag);

map.put("msg", msg);

writer.write(JSON.toJSONString(map));

}

@ResponseBody

@RequestMapping("/data")

public String data( HttpServletResponse response) {

// 设定编码

response.setCharacterEncoding("UTF-8");

// 表示是json类型的数据

response.setContentType("application/json");

List list = new ArrayList();

list.add(95);

list.add(80);

list.add(48);

list.add(70);

list.add(85);

Map map = new HashMap();

boolean flag = false;

String msg = "获取数据失败";

try {

// 保存

flag = true;

msg = "获取数据成功";

} catch (Exception e) {

e.printStackTrace();

flag = false;

msg = "下载失败!失败原因:" + e.getMessage();

}

map.put("success", flag);

map.put("msg", msg);

return JSON.toJSONString(list);

}

/**

* 解析Base64位信息并输出到某个目录下面.

*

* @param base64Info

* base64串

* @param file

* 生成的文件路径

* @return 文件地址

* @throws IOException

*/

private String decodeBase64(String base64Info, File file) throws IOException {

if (StringUtils.isEmpty(base64Info)) {

return null;

}

String picPath = "";

if (file != null) {

picPath = file.getPath();

}

if (StringUtils.isNotBlank(base64Info) && StringUtils.isNotBlank(picPath)) {

// base64Info数据中：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA

// ... 在"base64,"之后的才是图片信息

String[] arr = base64Info.split("base64,");

// 将图片输出到系统某目录.

OutputStream out = null;

try {

// 使用了Apache commons codec的包来解析Base64

byte[] buffer = Base64.decodeBase64(arr[1]);

out = new FileOutputStream(file);

out.write(buffer);

} catch (IOException e) {

System.out.println("解析Base64图片信息并保存到某目录下出错!");

e.printStackTrace();

} finally {

if (out != null) {

out.close();

}

}

}

return picPath;

}

}