echarts loading加載頁&工具欄

echarts的loading加載和工具欄

1.toolbox：這是ECharts中的工具欄。内置有導出圖檔、資料視圖、動态類型切換、資料區域縮放、重置五個工具。

2.toolbox中的屬性，不包含五個工具。裡面最主要的就是feature這個，這是toolbox的配置項，五個工具的配置就是在這個裡面實作的。

屬性          類型          說明
show        boolean     預設值為true，是否顯示工具欄元件
orient      stirng      預設值為horizontal，工具欄 icon 的布局朝向。可選項為“horizontal”和“vertical”
itemSize    number      預設值為，工具欄 icon 的大小。
itemGap     number      預設值為，工具欄 icon 每項之間的間隔。橫向布局時為水準間隔，縱向布局時為縱向間隔。
showTitle   boolean     預設值為true，是否在滑鼠 hover 的時候顯示每個工具 icon 的标題。
                        各工具配置項。
feature     Object      除了各個内置的工具按鈕外，還可以自定義工具按鈕。
                        注意，自定義的工具名字，隻能以 my 開頭。
           

3.下面來分别介紹這五個工具

3.1

saveAsImage：這個工具可以把圖表儲存為圖檔。裡面有些常用的參數，type->儲存圖檔的格式，name->儲存檔案的名字，backgroundColor->儲存圖檔的背景色，show->是否顯示該工具，還有一些别的屬性可以自己再使用的時候查詢API文檔。

3.2

restore：配置項還原。主要屬性是show->是否顯示該工具。

3.3

dataView：資料視圖工具，可以展現目前圖表所用的資料，編輯後可以動态更新。show->是否顯示該工具，readOnly->是否不可編輯，optionToContent->自定義 dataView 展現函數，用以取代預設的 textarea 使用更豐富的資料編輯。可以傳回 dom 對象或者 html 字元串，backgroundColor->資料視圖浮層背景色。

3.4

dataZoom：資料區域縮放。目前隻支援直角坐标系的縮放（這裡的含義就是柱狀體，折線圖可以縮放，但是像餅狀圖就不能縮放）。show->是否顯示該工具。

3.5

magicType：動态類型切換。show->是否顯示該工具，type->這是個數組，啟用的動态類型，包括’line’（切換為折線圖）, ‘bar’（切換為柱狀圖）, ‘stack’（切換為堆疊模式）, ‘tiled’（切換為平鋪模式）。

4.echarts loading核心代碼

在調用請求之前打卡加載圖

//showLoading遮蓋層顯示
        myChart.showLoading({
            text: '資料正在努力加載...',
            textStyle: { fontSize :  , color: '#444' },
            effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
        }); 
           

在調用請求拿到資料之後，調用隐藏

//showLoading遮蓋層隐藏
        myChart.hideLoading();
           

6.echarts幹貨

<script type="text/javascript">
function createLendingRate(){
        var date = $("#date").val();
        // 基于準備好的dom，初始化echarts執行個體
        var myChart = echarts.init(document.getElementById('LendingRate'));
        // 指定圖表的配置項和資料
        var titleTxt = "貸款投向筆數分析";
        $("#titleTxt").html(date+"年"+titleTxt);

        //showLoading遮蓋層顯示
        myChart.showLoading({
            text: '資料正在努力加載...',
            textStyle: { fontSize :  , color: '#444' },
            effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
        }); 
        $.ajax({
            url:'admin/queryChart/performingLoan',
            type: 'POST',
            data : {
                "name":$("#searchName").val(),
                "date":date,
            },
            success:function(data) {
                if(data!=null){
                    if (data.msg == ) {
                        $.alert({title : "提示:",content : "查詢資料為空"});
                    }
                    var legend = [];
                    var series = [];
                    var resultMap = data.resultMap;
                    for(var key in resultMap){
                        var data = [];
                        var money = [];
                        legend.push(key);
                        for(var i=; i<; i++){
                            var value = resultMap[key][i];
                            if(typeof(value) == "undefined"||value!=null){
                                data.push(resultMap[key][i]);
                                money.push();
                            }else{
                                data.push();
                                money.push();
                            }
                        }
                        series.push({
                            name: key,
                            type: 'bar',
                            data:data,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        });
                    }

                    var option = {
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data: legend
                        },
                        toolbox: {
                            x:'right',
                            y:,
                            show : true,
                            feature : {
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : series
                    };
                    myChart.setOption(option);
                    //showLoading遮蓋層隐藏
                    myChart.hideLoading();
                }
            }
        });
    }
</script>