ECharts_04_loading

1.说明

等待服务器数据时呈现友好界面
2.演示

这里写图片描述
3.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../js/echarts.js" ></script>
        <title></title>

    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>

        <script type="text/javascript">

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            function fetchData(cb) {
                // 通过 setTimeout 模拟异步加载
                setTimeout(function () {
                    cb({
                        categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                        data: [5, 20, 36, 10, 10, 20]
                    });
                }, 1000);
            }

            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '异步数据加载示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: []
                }]
            });
            myChart.showLoading();

            // 异步加载数据
            fetchData(function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '销量',
                        data: data.data
                    }]
                });
            });

        </script>

    </body>
</html>
1.说明

2.演示

3.代码

猜你喜欢
