layui.define(['jquery','echarts','ajax','modal'],function(exports){
var $ = layui.jquery,
echarts = layui.echarts,
ajax = layui.ajax,
modal = layui.modal;
//初始化echarts實(shí)例
var order = echarts.init(document.getElementById('integralcount'));
order.showLoading({
text: '正在努力的讀取數(shù)據(jù)中...', //loading話術(shù)
});
//訂單統(tǒng)計(jì)
var option = {
title:{
text:'商戶積分統(tǒng)計(jì)',
sublink: 'http://e.weibo.com/1341556070/AizJXrAEa'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線,可選為:'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:'申請(qǐng)的積分',
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, //同步執(zhí)行
url : contextpath + '/merchantintegral/integralcountlist?&time='+ new Date().getTime(),
dataType : "json", //返回?cái)?shù)據(jù)形式為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(); //隱藏加載動(dòng)畫(huà)
order.setOption(option);
}
},
error: function(errorMsg) {
alert("圖表請(qǐng)求數(shù)據(jù)失敗啦!");
}
})
exports('integralcount',{});
});
echart動(dòng)態(tài)加載數(shù)據(jù)之柱狀圖--溫度計(jì)式圖表
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 下載地址:http://yunpan.cn/cdNRqJwmCNxnV 訪問(wèn)密碼 b2a0
- 現(xiàn)在已經(jīng)深夜12點(diǎn)了,拖著疲憊身體還是寫(xiě)完這篇簡(jiǎn)書(shū)吧,今天用了Echarts實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù),干貨還是要分享給大家...
- 昨晚美美地睡了一覺(jué),早上6點(diǎn)多被母上吵醒依然覺(jué)得很困哇。今天約了司機(jī)7點(diǎn)鐘在我們的民宿集合,他準(zhǔn)時(shí)地到了,我就匆忙...