layui.define(['jquery','echarts','ajax','modal'],function(exports){
var $ = layui.jquery,
echarts = layui.echarts,
ajax = layui.ajax,
modal = layui.modal;
//初始化echarts实例
var order = echarts.init(document.getElementById('integralcount'));
order.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
//订单统计
var option = {
title:{
text:'商户积分统计',
sublink: 'http://e.weibo.com/1341556070/AizJXrAEa'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params){
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value + '<br/>'
+ params[1].seriesName + ' : ' + (params[1].value + params[0].value);
}
},
legend:{
selectedMode:false,
data:['已使用的积分','剩余的积分']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type : 'category',
data:[]
}],
yAxis : [
{
type : 'value',
boundaryGap: [0, 0.1]
}
],
series : [{
name : '剩余的积分',
type : 'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: 'tomato',
barBorderColor: 'tomato',
barBorderWidth: 2,
barBorderRadius:0,
label : {
show: true, position: 'insideTop'
}
}
},
data : []
},
{
name:'申请的积分',
type:'bar',
stack:'sum',
itemStyle:{
normal:{
color: '#fff',
barBorderColor: 'tomato',
barBorderWidth: 2,
barBorderRadius:0,
label : {
show: true,
position: 'top',
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params.name) {
return option.series[0].data[i] + params.value;
}
}
},
textStyle: {
color: 'tomato'
}
}
}
},
data:[]
}]
};
$.ajax({
type : "post",
async : false, //同步执行
url : contextpath + '/merchantintegral/integralcountlist?&time='+ new Date().getTime(),
dataType : "json", //返回数据形式为json
success : function(result) {
if(result){
//初始化option.xAxis[0]中的data
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].name);
}
//初始化option.series[0]中的data
option.series[0].data =[];
option.series[1].data =[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].integral_val);
option.series[1].data.push(result[i].count - result[i].integral_val);
}
order.hideLoading(); //隐藏加载动画
order.setOption(option);
}
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
})
exports('integralcount',{});
});
echart动态加载数据之柱状图--温度计式图表
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 现在已经深夜12点了,拖着疲惫身体还是写完这篇简书吧,今天用了Echarts实现动态加载数据,干货还是要分享给大家...