1. 什么是echarts
ECharts简单来说是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。
具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
2. 为什么要使用echarts
为了更直观的看数据之间的比例 变化
3. 如何使用echarts
1.将echarts文件夹和jquery文件夹中的内容导入到项目中。
2.在页面中导入核心文件中。
<script src="echarts/js/echarts.min.js"></script>
3.声明一个容器
<div id="pic1" style=”width:400px;height:400px;margin: 20px auto;”></div>
4.创建饼图
</script>
//创建echarts对象在哪个节点上
var myCharts1 = echarts.init(document.getElementById('pic1'));
//设置选项
var option1 = {
//背景颜色
backgroundColor:'white',
//标题
title: {
text:'用户有效性占比',
left:'center',
top:20,
textStyle: {
color:'#ccc'
}
},
//工具提示
tooltip : {
trigger:'item',
formatter:"{a}
{b} : {d}%"
},
//图表属性
series : [
{
name:'用户有效性占比',//名称
type:'pie',//声明这是一个饼图
clockwise:'true',
startAngle:'0',
radius :'40%',//半径
center: ['50%', '50%'],//居中
//数据-->ajax
data:[
/* {
"name": "无效用户",
"value": 1
},
{
"name": "有效用户",
"value": 7
}*/
],
}
]
};
$.ajax(
{
url:"getUserDataa",
type:"GET",
dataType:"json", //指定服务器返回的数据类型
success:function (data) {
console.log(data);
//使用返回的数据填充myChart的选项
option1.series[0].data=data;
//将选项对象赋值给echarts对象。
myCharts1.setOption(option1,true);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("服务器异常");
alert(XMLHttpRequest.status);//200 400 404 415 500
alert(XMLHttpRequest.readyState);//0-4
alert(XMLHttpRequest.responseText);//响应文本
alert(textStatus);
alert(errorThrown);
console.log(textStatus);
}
});
</script>
5.Controller
@ResponseBody
@RequestMapping(value ="/getUserDataa")
public ObjectgetUserData(){
UserData userData =new UserData();
userData.setName("有效用户");
userData.setValue(5);
UserData userData1 =new UserData();
userData1.setName("无效效用户");
userData1.setValue(5);
List userData2 =new ArrayList<>();
userData2.add(userData);
userData2.add(userData1);
System.out.println("吃屎123");
return userData2;
}
效果图
跨域请求：在不同源的页面/资源中进行请求。
1. 同源策略：如果两个页面的协议(http/https)，端口（如果有指定）和主机(IP地址)都相同，则两个页面具有相同的源，如果中间有一个不同，则源不同。
2. 如何解决跨域请求问题，需要在前后端一起处理。
前端：使用jsonp解决跨域请求的问题。
<script>
//创建echarts对象在哪个节点上
var myCharts1 = echarts.init(document.getElementById('pic1'));
//设置选项
var option1 = {
//背景颜色
backgroundColor:'white',
//标题
title: {
text:'用户有效性占比',
left:'center',
top:20,
textStyle: {
color:'#ccc'
}
},
//工具提示
tooltip : {
trigger:'item',
formatter:"{a}
{b} : {d}%"
},
//图表属性
series : [
{
name:'用户有效性占比',//名称
type:'pie',//声明这是一个饼图
clockwise:'true',
startAngle:'0',
radius :'40%',//半径
center: ['50%', '50%'],//居中
//数据-->ajax
data:[
/* {
"name": "无效用户",
"value": 1
},
{
"name": "有效用户",
"value": 7
}*/
],
}
]
};
$.ajax(
{
url:"http://localhost:8080/getUserDataa",
type:"GET",
jsonp:"callback",
dataType:"jsonp",
//指定服务器返回的数据类型
success:function (data) {
console.log(data);
//使用返回的数据填充myChart的选项
option1.series[0].data=data;
//将选项对象赋值给echarts对象。
myCharts1.setOption(option1,true);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("服务器异常");
alert(XMLHttpRequest.status);//200 400 404 415 500
alert(XMLHttpRequest.readyState);//0-4
alert(XMLHttpRequest.responseText);//响应文本
alert(textStatus);
alert(errorThrown);
console.log(textStatus);
}
});
</script>
controller代码
@ResponseBody
@RequestMapping(value ="/getUserDataa")
public ObjectgetUserData(String callback){
UserData userData =new UserData();
userData.setName("有效用户");
userData.setValue(5);
UserData userData1 =new UserData();
userData1.setName("无效效用户");
userData1.setValue(5);
List userData2 =new ArrayList<>();
userData2.add(userData);
userData2.add(userData1);
System.out.println("吃屎123");
JSONPObject jsonpObject =new JSONPObject(callback,userData2);
return jsonpObject;
}
