jquery+echarts初体验 _跨域问题解决方案
使用echarts
1、柱状图
2、折线图
3、饼状图
4、中国地图
1. 跨域请求：在不同源的页面/资源中进行请求。
2. 同源策略：如果两个页面的协议(http/https)，端口（如果有指定）和主机(IP地址)都相同，则两个页面具有相同的源，如果中间有一个不同，则源不同。
3. 如何解决跨域请求问题，需要在前后端一起处理。
a) 前端：使用jsonp解决跨域请求的问题。
ECharts是由百度打造的一个纯javascript的图标库，很好用。
一、创建一个实体类来存数据,先把数据存在集合里面
@Setter
@Getter
@ToString
public class HistogramDto implements Serializable{
List<String> data = new ArrayList<String>();
List<String> category = new ArrayList<String>();
//数据添加到集合
public void addCategory(String categoryName){
this.category.add(categoryName);
}
public void addData(String dataName){
this.data.add(dataName);
}
}
二、创建controllen响应页面的请求,这些是假的模拟数据，可以自己从数据库获取
//可以实现跨域请求
@Controller
public class EchartsController {
@CrossOrigin(origins = "*", maxAge = 3600)
@ResponseBody
@RequestMapping(value = "getDataJsonp",method = RequestMethod.GET)
public Object getDataJsonp(String callback){//此处参数callback与 前端jsonp属性名callback一致
System.out.println("inner getDataJsonp");
System.out.println(callback);
//把数据添加的到对象中去
HistogramDto dto = new HistogramDto();
dto.addCategory("苹果");
dto.addCategory("梨子");
dto.addCategory("香蕉");
dto.addCategory("菠萝");
dto.addCategory("芒果");
dto.addData("100");
dto.addData("50");
dto.addData("120");
dto.addData("40");
dto.addData("170");
//注意返回值类型应该为JSONPObject所封装
JSONPObject jsonpObject = new JSONPObject(callback,dto);
System.out.println(jsonpObject+":::");
return jsonpObject;
}
}
、
三、导入标签
<script src="echarts/js/echarts.min.js"></script>
<script src="jquery/jquery-2.1.1.min.js"></script>
<!--json处理包-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.6</version>
</dependency>
四、创建一个容器
<div id="pic1" style="width:800px;height:400px; margin: 20px auto;"></div>
五、写echarts,注释的是静态页面的测试数据
<script>
var myChart = echarts.init(document.getElementById("pic1"));
// //获取X轴数据
// function getXAxis() {
// var list = new Array();
// for(var i=1;i<=12;i++){
// list.push(i);
// }
// return list;
// }
//
// //定义选项
// var option = {
// backgroundColor: '#FBFBFB',
// //工具提示
// tooltip : {
// trigger: 'axis'
// },
// //说明；图例
// legend: {
// data:['充值','消费']
// },
// //可计算的
// calculable : true,
// //x轴
// xAxis : [
// {
// axisLabel:{
// //旋转
// rotate: 30,
// interval:0
// },
// axisLine:{
// lineStyle :{
// color: '#CECECE'
// }
// },
// type : 'category',
// boundaryGap : false,
// data : getXAxis()
// }
// ],
// yAxis : [
// {
// type : 'value',
// axisLine:{
// lineStyle :{
// color: '#CECECE'
// }
// }
// }
// ],
// //系列(数据折线集合)
// series : [
// //折线数据
// {
// name:'充值',
// type:'line',//折线图
// symbol:'yes',//有没有圆点
// smooth: 0.2,//折线的圆滑程度
// color:['#66AEDE'],//折线的颜色
// data:[800, 300, 500, 800, 300, 600,500,600,1000,100,400,800]//折线的数据
// },
// {
// name:'消费',
// type:'line',
// symbol:'yes',
// smooth: 0.2,
// color:['#90EC7D'],
// data:[600, 300, 400, 200, 300, 300,200,400,800,500,300,1000]
// },
// {
// name:'消费1',
// type:'line',
// symbol:'yes',
// smooth: 0.2,
// color:['#90EC7D'],
// data:[200, 500, 300, 200, 300, 400,200,400,800,500,300,1000]
// }
// ]
// };
//
// //设置选项
// myChart.setOption(option);
$.ajax(
{
url: "http://localhost:8081/getDataJsonp",
type: "GET",
jsonp: "callback",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
alert(data.data)
console.log(data);
//使用返回的数据填充myChart的选项
myChart.setOption(
{
backgroundColor: '#FBFBFB',
//工具提示
tooltip : {
trigger: 'axis'
},
//说明；图例
legend: {
data:['充值','消费']
},
//可计算的
calculable : true,
//x轴
xAxis : [
{
axisLabel:{
//旋转
rotate: 30,
interval:0
},
axisLine:{
lineStyle :{
color: '#CECECE'
}
},
type : 'category', //x抽的数据
boundaryGap : false,
data : data.category //x抽的数据
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle :{
color: '#CECECE'
}
}
}
],
//系列(数据折线集合)
series : [
//折线数据
{
name:'充值',
type:'line',//折线图
symbol:'yes',//有没有圆点
smooth: 0.2,//折线的圆滑程度
color:['#66AEDE'],//折线的颜色
data:data.data //y轴的数据
}
]
})
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("服务器异常");
console.log(XMLHttpRequest.status);//200 400 404 415 500
console.log(XMLHttpRequest.readyState);//0-4
console.log(XMLHttpRequest.responseText);//响应文本
console.log(textStatus);
console.log(errorThrown);
console.log(textStatus);
}
});
</script>
- 至此，springmvc+jquery+echarts集成完毕，注意要点是前后端都必须支持跨域和使用jsonp
- 实际上，跨域问题还有另外一种解决方案。但是不推荐使用。即在页面a.html同一个项目下，新建Control A，在A里面请求另外一个非同源的Control B(使用httpClient)获取到返回值，再返回给前端页面a.html