echart動(dòng)態(tài)加載數(shù)據(jù)之柱狀圖--溫度計(jì)式圖表


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',{});
});

最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容