Echarts + ajax 動態獲取數據庫信息

概述

需求：使用 Echarts 動態獲取數據庫中的，每個城市的註冊量，並展示報表。
本文將略去 控制層開發，直接上 Echarts圖層的前端開發。

前提

• 已知數據庫中存在一張4個字段的表，即id、name、times（註冊次數）、date（更新時間）
  已開發好的後端。

Echarts

相關參考：
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>

效果