Echarts + ajax dynamic access to database information

Outline

Requirements: Use Echartsdynamically obtain registrations in each city in the database, and display reports.
This article will 略去control the development layer , directly on the front-end development Echarts layer.

premise

• Table 4 there is a database of known fields, namely id, , name(registrationtimes number), date(Updated)
  has developed a good back end.

eCharts

Related reference:
https://www.cnblogs.com/zhaoyingjie/p/5963056.html

<script>
    $(function () {
             //简单的echarts
            var myChart = echarts.init(document.getElementById('user_flow'));

                myChart.setOption({
                    title: {
                        text: '城市注册量 + 时间坐标轴'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },

                    xAxis: [
                        {
                            data: []
                        },
                        {

                            data:[]
                        }

                    ],
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [],
                        type: 'bar'
                    }]
                });
            //展示加载动画
            myChart.showLoading()

        //发送AJAX请求，获取数据
        setInterval(function () {
            $.post(
                "/flow/get",
                function (data) {
                    //设置变量
                    var city = [];
                    var click=[];
                    var dates=[];
                    for(var i=0;i<data.length;i++){
                        //向城市数组中添加
                        city.push(data[i].name);
                        click.push(data[i].times);
                        dates.push(data[i].date);
                    }
                    //开始展示数据
                    myChart.hideLoading();
                    myChart.setOption({
                        xAxis: [
                            {
                           		data: city
                      		},
                            {
                                data: dates
                            }
                        ],
                        series: [{
                            name: "注册量",
                            data: click
                        }]
                    });
                }
            )
        },3000) //每3s请求一次服务器

        })

</script>
<div id="user_flow" style="width: 100%;height: 100%" ></div>

effect