echarts loading加载页&工具栏

echarts的loading加载和工具栏

1.toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

2.toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。

属性          类型          说明show        boolean     默认值为true，是否显示工具栏组件orient      stirng      默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”itemSize    number      默认值为15，工具栏 icon 的大小。itemGap     number      默认值为10，工具栏 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 : 30 , 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 : 30 , 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 == 1) {                        $.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=1; i<13; i++){                            var value = resultMap[key][i];                            if(typeof(value) == "undefined"||value!=null){                                data.push(resultMap[key][i]);                                money.push(0);                            }else{                                data.push(0);                                money.push(0);                            }                        }                        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:35,                            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>