java echarts 饼图_ECharts之饼图和柱形图demo

渠道分析

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({

title : {

text : '充值渠道分析',

x : 'center'

},

tooltip : {

trigger : 'item',

formatter : "{a}
{b} : {c} ({d}%)"

},

legend : {

orient : 'vertical',

x : 'left',

data : []

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {

show: true,

type: ['pie', 'funnel'],

option: {

funnel: {

x: '25%',

width: '50%',

funnelAlign: 'left',

max: 1548

}

}

},

restore : {show: true},

saveAsImage : {show: true}

}

},

series : [ {

name : '',

type : 'pie',

radius : '55%',

center : [ '50%', '60%' ],

data : []

} ]

});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var names = []; //类别数组

var nums = []; //数量数组

var array = [];

$.ajax({

type : "post",

url : "/api/payment/showEChartsData",

data : {},

cache : false, //禁用缓存

dataType : "json",

success : function(result) {

//请求成功时执行该函数内容，result即为服务器返回的json对象

if (result) {

for (var i = 0; i < result.length; i++) {

names.push(result[i].channelName); //挨个取出类别并填入类别数组

}

for (var i = 0; i < result.length; i++) {

nums.push(result[i].num); //挨个取出销量并填入销量数组

}

for (var i = 0; i < result.length; i++) {

var map ={};

map.name = result[i].channelName;

map.value = result[i].num;

array[i]=map;

}

myChart.hideLoading(); //隐藏加载动画

myChart.setOption({ //加载数据图表

legend : {

data : names

},

series : {

// 根据名字对应到相应的系列

name : ['数量'],

data : array

}

});

}

},

error : function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

myChart.hideLoading();

}

});

渠道分析

var myChart = echarts.init(document.getElementById('main'));

// 显示标题，图例和空的坐标轴

myChart.setOption({

title : {

text : '充值渠道分析'

},

tooltip : {},

legend : {

data : [ '数量' ]

},

xAxis : {

data : []

},

yAxis : {},

series : [ {

name : '数量',

type : 'bar',

data : []

} ]

});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var names = []; //类别数组(实际用来盛放X轴坐标值)

var nums = []; //销量数组(实际用来盛放Y坐标值)

$.ajax({

type : "post",

async : true, //异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)

url : "/api/payment/showEChartsData", //请求发送到TestServlet处

data : {},

dataType : "json", //返回数据形式为json

success : function(result) {

//请求成功时执行该函数内容，result即为服务器返回的json对象

if (result) {

for (var i = 0; i < result.length; i++) {

names.push(result[i].channelName); //挨个取出类别并填入类别数组

}

for (var i = 0; i < result.length; i++) {

nums.push(result[i].num); //挨个取出销量并填入销量数组

}

myChart.hideLoading(); //隐藏加载动画

myChart.setOption({ //加载数据图表

xAxis : {

data : names

},

series : [ {

// 根据名字对应到相应的系列

name : '数量',

data : nums

} ]

});

}

},

error : function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

myChart.hideLoading();

}

})