1.? ? 什么是echarts
https://echarts.baidu.com/官網(wǎng)
ECharts簡(jiǎn)單來說是互聯(lián)網(wǎng)開發(fā)程序過程中，后臺(tái)數(shù)據(jù)庫用以實(shí)現(xiàn)數(shù)據(jù)到圖形的映射的一個(gè)插件百宇。
具體來說一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫虱黄，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上镇辉，兼容當(dāng)前絕大部分瀏覽器将宪，底層依賴輕量級(jí)的矢量圖形庫?ZRender苞七，提供直觀器予，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表浙芙。
2.? ? 為什么要使用echarts
為了更直觀的看數(shù)據(jù)之間的比例 變化
3.? ? 如何使用echarts
1.將echarts文件夾和jquery文件夾中的內(nèi)容導(dǎo)入到項(xiàng)目中登刺。
2.在頁面中導(dǎo)入核心文件中。
<script src="echarts/js/echarts.min.js"></script>
3.聲明一個(gè)容器
<div id="pic1" style=”width:400px;height:400px;margin: 20px auto;”></div>
4.創(chuàng)建餅圖
</script>
? //創(chuàng)建echarts對(duì)象在哪個(gè)節(jié)點(diǎn)上
? ? var myCharts1 = echarts.init(document.getElementById('pic1'));
? ? //設(shè)置選項(xiàng)
? ? var option1 = {
? ? ?//背景顏色
? ? ? ? backgroundColor:'white',
? ? ? ? //標(biāo)題
? ? ? ? title: {
? ? ? ? ? ?text:'用戶有效性占比',
? ? ? ? ? ? left:'center',
? ? ? ? ? ? top:20,
? ? ? ? ? ? textStyle: {
color:'#ccc'
? ? ? ? ? ? }
},
? ? ? ? //工具提示
? ? ? ? tooltip : {
? ? ? ? ? ? trigger:'item',
? ? ? ? ? ? formatter:"{a}
? ? ? ? ? ? 嗡呼 : tu753ca%"
? ? ? ? },
? ? ? ? //圖表屬性
? ? ? ? series : [
{
name:'用戶有效性占比',//名稱
? ? ? ? ? ? ? ? type:'pie',//聲明這是一個(gè)餅圖
? ? ? ? ? ? ? ? clockwise:'true',
? ? ? ? ? ? ? ? startAngle:'0',
? ? ? ? ? ? ? ? radius :'40%',//半徑
? ? ? ? ? ? ? ? center: ['50%', '50%'],//居中
? ? ? ? ? ? ? ? //數(shù)據(jù)-->ajax
? ? ? ? ? ? ? ? data:[
/* {
? ? ? ? ? ? ? ? ? ? ? ? "name": "無效用戶",
"value": 1
},
{
? ? ? ? ? ? ? ? ? ? ? ? "name": "有效用戶",
"value": 7
}*/
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? }
]
};
$.ajax(
{
url:"getUserDataa",
? ? ? ? ? ? type:"GET",
? ? ? ? ? ? dataType:"json", //指定服務(wù)器返回的數(shù)據(jù)類型
? ? ? ? ? ? success:function (data) {
console.log(data);
? ? ? ? ? ? ? ? //使用返回的數(shù)據(jù)填充myChart的選項(xiàng)
? ? ? ? ? ? ? option1.series[0].data=data;
? ? ? ? ? ? ? ? //將選項(xiàng)對(duì)象賦值給echarts對(duì)象纸俭。
? ? ? ? ? ? ? ? myCharts1.setOption(option1,true);
? ? ? ? ? ? },
? ? ? ? ? ? error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("服務(wù)器異常");
? ? ? ? ? ? ? ? alert(XMLHttpRequest.status);//200 400? 404? 415? 500
? ? ? ? ? ? ? ? alert(XMLHttpRequest.readyState);//0-4
? ? ? ? ? ? ? ? alert(XMLHttpRequest.responseText);//響應(yīng)文本
? ? ? ? ? ? ? ? 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;
}
效果圖
跨域請(qǐng)求：在不同源的頁面/資源中進(jìn)行請(qǐng)求。
1.????? 同源策略：如果兩個(gè)頁面的協(xié)議(http/https)南窗，端口（如果有指定）和主機(jī)(IP地址)都相同揍很，則兩個(gè)頁面具有相同的源，如果中間有一個(gè)不同万伤，則源不同窒悔。
2.????? 如何解決跨域請(qǐng)求問題，需要在前后端一起處理敌买。
前端：使用jsonp解決跨域請(qǐng)求的問題简珠。
<script>
? ? //創(chuàng)建echarts對(duì)象在哪個(gè)節(jié)點(diǎn)上
? ? var myCharts1 = echarts.init(document.getElementById('pic1'));
? ? //設(shè)置選項(xiàng)
? ? var option1 = {
//背景顏色
? ? ? ? backgroundColor:'white',
? ? ? ? //標(biāo)題
? ? ? ? title: {
text:'用戶有效性占比',
? ? ? ? ? ? left:'center',
? ? ? ? ? ? top:20,
? ? ? ? ? ? textStyle: {
color:'#ccc'
? ? ? ? ? ? }
},
? ? ? ? //工具提示
? ? ? ? tooltip : {
trigger:'item',
? ? ? ? ? ? formatter:"{a}
: ug7xehn%"
? ? ? ? },
? ? ? ? //圖表屬性
? ? ? ? series : [
{
name:'用戶有效性占比',//名稱
? ? ? ? ? ? ? ? type:'pie',//聲明這是一個(gè)餅圖
? ? ? ? ? ? ? ? clockwise:'true',
? ? ? ? ? ? ? ? startAngle:'0',
? ? ? ? ? ? ? ? radius :'40%',//半徑
? ? ? ? ? ? ? ? center: ['50%', '50%'],//居中
? ? ? ? ? ? ? ? //數(shù)據(jù)-->ajax
? ? ? ? ? ? ? ? data:[
/* {
? ? ? ? ? ? ? ? ? ? ? ? "name": "無效用戶",
"value": 1
},
{
? ? ? ? ? ? ? ? ? ? ? ? "name": "有效用戶",
"value": 7
}*/
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? }
]
};
$.ajax(
{
url:"http://localhost:8080/getUserDataa",
? ? ? ? ? ? type:"GET",
? ? ? ? ? ? jsonp:"callback",
? ? ? ? ? ? dataType:"jsonp",
? ? ? ? ? ? //指定服務(wù)器返回的數(shù)據(jù)類型
? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ?console.log(data);
? ? ? ? ? ? ? ? //使用返回的數(shù)據(jù)填充myChart的選項(xiàng)
? ? ? ? ? ? ?option1.series[0].data=data;
? ? ? ? ? ? ? ? //將選項(xiàng)對(duì)象賦值給echarts對(duì)象虹钮。
? ? ? ? ? ? ?myCharts1.setOption(option1,true);
? ? ? ? ? ? },
? ? ? ? ? ? ?error:function(XMLHttpRequest, textStatus, errorThrown){
? ? ? ? ? ? ? console.log("服務(wù)器異常");
? ? ? ? ? ? ? alert(XMLHttpRequest.status);//200 400? 404? 415? 500
? ? ? ? ? ? ? ?alert(XMLHttpRequest.readyState);//0-4
? ? ? ? ? ? ? ?alert(XMLHttpRequest.responseText);//響應(yīng)文本
? ? ? ? ? ? ? ?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;
}
