Echarts + ajax 动态获取数据库信息

最新推荐文章于 2021-05-05 18:17:22 发布

原创

最新推荐文章于 2021-05-05 18:17:22 发布 · 1.5k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍如何结合Echarts和Ajax从数据库动态获取每个城市的注册量，展示直观的报表。在已有的数据库表结构和后端接口基础上，重点讲述前端Echarts图层的开发方法。

概述

需求：使用 Echarts 动态获取数据库中的，每个城市的注册量，并展示报表。
本文将略去 控制层开发，直接上 Echarts图层的前端开发。

前提

已知数据库中存在一张4个字段的表，即id、name、times（注册次数）、date（更新时间）
已开发好的后端。

Echarts

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

                myChart.setOption({
   
   
                    title: {
   
   
                        text: '城市注册量 + 时间坐标轴'
                    },
                    tooltip: {