echarts 柱状图 从数据库中获得数据并实时更新(定时器)

<!--left图表-->
<div class="left-1">
    <div id="main"></div>
</div>

js

 // 基于准备好的dom,初始化echarts实例
        function craetBar(result){
            // console.log(result);
            var tempTimeOut = setTimeout(function () {
                clearTimeout(tempTimeOut);
                // console.log(result);
                    var myChartmain = echarts.init(document.getElementById('main'));


                    // 指定图表的配置项和数据
                    var optionmain = {
                        title: {
                            text: '民生数据分类',
                            textStyle: {
                                color: '#ffb'
                            }
                        },
                        grid: {
                            x: 40,
                            x2: 30,
                            y: 30,
                            height: 80
                        },    //去掉边
                        tooltip: {},
                        legend: {
                            data: ['分站'],
                            textStyle: {
                                color: '#ffb'
                            }
                        },
                        xAxis: {
                            data: ["交通", "养老", "教育", "就医", "住房"]
                        },
                        // yAxis: {},
                        yAxis: [

                            {
                                type: 'value'
                            }

                        ],
                        axisLabel: {
                            color: "#fff" //刻度线标签颜色
                        },
                        /*series: [{
                     name: '分站',
                     type: 'bar',
                     data: [5, 20, 36, 10, 20]
                 }]*/
                        series: [{
                            'name': '分站',

                            'type': 'bar',

                            'data': (function () {
                                // console.log(result);
                                var arr = [];
                                $.ajax({
                                    type: "post",
                                    async: false, //同步执行
                                    url: "/tian/index.php/Home/Index/show",
                                    data: {result:result},
                                    dataType: "json", //返回数据形式为json
                                    success: function (json) {
                                        console.log(json);
                                        if (json) {
                                            for (var i = 0; i < json.length; i++) {
                                                // console.log(json[i].num);
                                                arr.push(json[i].num);
                                            }
                                        }
                                        clearTimeout(tempTimeOut);
                                        
                                            craetBar(json);
                                        


                                    },
                                    error: function (errorMsg) {
                                        alert("不好意思,图表请求数据失败啦!");
                                        myChart.hideLoading();
                                    }
                                });
                                return arr;
                            })()

                        }]
                    };
                    myChartmain.setOption(optionmain);

            },3000);
        }

        $(function(){
            craetBar('');
        });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值