1. 什么是echarts

https://echarts.baidu.com/官网

ECharts简单来说是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。

具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2. 为什么要使用echarts

为了更直观的看数据之间的比例变化

3. 如何使用echarts

1.将echarts文件夹和jquery文件夹中的内容导入到项目中。

2.在页面中导入核心文件中。

3.声明一个容器

4.创建饼图

//创建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);

}

});

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解决跨域请求的问题。

controller代码