<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.12.3.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>
<body onload="loadData()">
<div id="demo" style="height: 300px;width: 300px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('demo'));
        var option = {
            title:{
                text:'Echarts实时更新数据'
            },
            tooltip:{
                show:true
            },
            legend:{
                data:['城市']
            },
            xAxis:[{
                type:'category'
            }],
            yAxis:[{
                type:'value'
            }],
            series:[{
                name:'次数',
                type:'bar'
            }]
        };
        function loadData(option) {
            $.post({
                // type:'post',
                async:false,
                url:'/servlet/CityServlet',
                data:{},
                dataType:'json',
                success:function (result) {
                    if (result){

                        option.xAxis[0].data = [];
                        for (var i = 0; i < result.length; i++){
                            option.xAxis[0].data.push(result[i].name);
                        }

                        option.series[0].data = [];
                        for (var i = 0; i < result.length; i++){
                            option.series[0].data.push(result[i].num);
                        }

                    }
                },
                error:function (errorMsg) {
                    alert("数据加载失败");
                }
            });
        }
        setInterval(function () {
            loadData(option);
            myChart.setOption(option);
        },500);

        window.onload = loadData;
    </script>
</body>
</html>

 

https://cloud.tencent.com/document/product/881/20207

最后修改于 2021-05-08 11:30:54
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇