這次是利用mui框架實現一個手機移動端的項目。基本的框架已經實現，主要來獲取數據實現一個圖表的展示。
首先引入插件：echarts.js
<script src="../resources/js/echarts.js" type="text/javascript" charset="utf-8" ></script>
然后再html頁面，給圖表一個空間，以便放置圖表:
<div class="pie_menu"> <div class="left_menu" id="left_menu"></div> </div> <div class="pie_menu"> <div class="right_menu" id="right_menu"></div> </div>
需要做兩個圖表，所以就開了兩個空間
接下來是獲取數據部分：
$(function(){
mui.init();//初始化mui
var leftPie;//部門:第一個空間
var rightPie;//類型:第二個空間
var data = [];//第一個空間的數據配置
var data2 = [];//第二個空間的數據配置
function setOption(data){
var leftMenu = echarts.init(document.getElementById('left_menu'));
var rightMenu = echarts.init(document.getElementById('right_menu'));
window.onresize = (leftMenu.resize && rightMenu.resize);//圖表隨着屏幕變化而變化
//類型圖表配置
rightOption = { //類型
title : {
text: '點統計(按類型)',//圖表標題
x:'center' //圖表位置樣式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠標懸浮顯示數據
},
legend: { //圖標，圖示
orient: 'vertical',
bottom:30,
left: 'left',
data: data //此數據和series內的數據相同（此項是獲取之后的數據）
},
color:[ '#EB7C30' , '#5A99D3'], //顏色指定
series : [
{
name: '點統計',
type: 'pie',
radius : '55%',
center: ['55%', '50%'],
label: {
normal: {
formatter: "{c}\n({d}%)", //在圖標上顯示的數據
show: true,
position: 'inner',//文字顯示位置
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
}
},
data:data,//此項同是獲取的數據
itemStyle: {
emphasis: { //餅圖或柱狀圖顯示的樣式
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
//部門圖表數據配置
leftOption = { //部門
title : {
text: '點統計(按部門)',//標題
x:'center' //樣式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" //懸浮顯示數據 a:代表標題;b代表name值；c代表name的value值；d代表百分比數值;這四個各有各的好處，可嘗試，主要是數據顯示啦
},
legend: { //圖標，圖示
orient: 'vertical',
bottom:30,
left: 'left',
data: data2
},
color:['#5A99D3', '#FFBF00','#A5A5A5','#EB7C30'], //顏色指定
series : [
{
name: '監控點統計',
type: 'pie',
radius : '55%',
center: ['55%', '50%'],
label: {
normal: {
formatter: "{c}\n({d}%)", //在圖標上顯示的數據
show: true,
position: 'inner',//文字顯示位置
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
}
},
data:data2,
itemStyle: {
emphasis: { //餅圖或柱狀圖顯示的樣式
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
leftMenu.setOption(leftOption);//部門配置設置
rightMenu.setOption(rightOption);//類型
}
//獲取數據
function getMapData(limit){
$.buslongAjax({
url : $.operaData.monitorypoint.url,
data : $.operaData.monitorypoint.param,
dataType:'JSON',
success:function(objdata){
var label = [];
var allData = []
if(objdata){
$.each(objdata,function(i,p){
console.log(objdata);//可打印獲取的數據
label = i ;//
allData ={'name':i,'value':p};//設置鍵值對形式
//以下是做的一個判斷，兩個空間放置不同的數據，因后台數據傳過來的是一整套，就自己判斷來顯示數據了。
leftPie = $("#left_menu");
rightPie = $("#right_menu");
if(rightPie){ //如果按照類型
if(allData.name == "applicationnum" || allData.name == "platformnum"){
if(allData.name == "applicationnum" ){
allData.name = "平台類";
}if(allData.name == "platformnum"){
allData.name = "應用類";
}
var oneData = {};
var oneData = {name:allData.name,value:allData.value};
data.push(oneData);//將數據填到data里面
}
}
if(leftPie){ //如果按照部門
if(allData.name == "itzhicheng" || allData.name == "jingfen" || allData.name == "xitong" || allData.name == "yewuyunying"){
if(allData.name == "itzhicheng" ){
allData.name = "IT支撐中心";
}if(allData.name == "jingfen"){
allData.name = "經分支撐中心";
}if(allData.name == "xitong" ){
allData.name = "系統維護中心";
}if(allData.name == "yewuyunying"){
allData.name = "業務運營中心";
}
var oneData = {};
var oneData = {name:allData.name,value:allData.value};
data2.push(oneData);//將數據添到另一個空間的data2里面
}
}
});
}
//option.series[0].data=data;
setOption(data);//執行setOption函數。傳參，將數據傳到配置信息內
}
});
}
getMapData(2);
})
好了，到了此處數據也獲取下來了，也顯示到頁面中了，最終效果為：
雖然有點丑，哈哈，但是后邊再調節吧，第一次做這種圖表，還挺有意思的，圖表還有另外一個插件，Highcharts,這個也挺有意思，有時間可以去學習玩玩。
整的來說，就是引入插件，寫入HTML以及樣式，配置圖表信息（網上有很多解析），獲取數據並且加以顯示。哦啦
大神們有更好的方法，求推薦呀~~~！