echarts简单图表使用(二)-异步加载数据

之前数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

可以先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

前端代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Simple jsp page</title></head>
<!-- 引入 ECharts 文件 -->
<script src="plug_in/js/echarts/echarts.js"></script>
<script src="plug_in/js/jquery/jquery-1.9.1.js"></script>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" onclick="fetchData()" value="加载数据"/>
</body>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
//            data: [12, 24, 1, 10, 2, 4]
            data:[]
        }]
    });
    myChart.showLoading();      //展示loading 动画


    function fetchData(cb) {
        // 异步加载数据
        $.get('mainTest.do?test2').done(function (jsonData) {
            // 填入数据
            var data = $.parseJSON(jsonData);
            myChart.hideLoading();    //隐藏loading 动画
            myChart.setOption({
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: data
//                    data:[5, 10, 36, 10, 10, 20]
                }]
            });
        });
    }
</script>
</html>

后端代码:

    @ResponseBody
    @RequestMapping(params = "test2")
    public String test2(HttpServletRequest request, HttpServletResponse response, Model model) {
        //1、使用JSONObject
        Object json = JSONArray.toJSON(new Integer[]{5, 10, 36, 10, 10, 20});
        System.out.println(json.toString());
        return json.toString();
    }

测试项目运行之后的页面展示效果:

点击按钮之后展示效果:

echarts简单图表使用(二)-异步加载数据

猜你喜欢