Echarts获取数据绘制图表

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这次是利用mui框架实现一个手机移动端的项目。基本的框架已经实现，主要来获取数据实现一个图表的展示。

首先引入插件：echarts.js

然后再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);
})