Python基础之数字化大屏（上）-阿里云开发者社区

在公司内部或前台，有时需要展示数字化看板，展示公司的业务信息。看着别的公司展示的炫酷的数字化大屏，是否很羡慕？本文以Python+flask+jQuery+eCharts，简述如何开发数字化大屏进行数据展示，仅供学习分享使用，如有不足之处，还请指正。

涉及知识点

Python+flask开发web系统，实现数据传输。
jQuery通过ajax技术，实现数据的异步通信，局部刷新。
eCharts进行图表的展示（包括柱状图，折线图，地图等）。
html+css页面布局等技术。

示例效果图

在本例中，主要展示某公司的产品累计趋势，产品新增趋势，销售柱状图，地图等内容，包括数字，图表等方式，具体如下所示：

页面设计

为了数据展示，将数字化大屏页面分为8个部分（标题，时间，左1，左2，中1，中2，右1，右2）如下所示：

页面布局核心代码，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字化大屏</title>
    <link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
<header class="head">
    <div class="title">
        <h1>某某公司数字化大屏</h1>
    </div>
    <div class="time"></div>
</header>
<aside class="left">
    <div id="left1" class="left1">这里是左侧边栏1</div>
    <div id="left2" class="left2">这里是左侧边栏2</div>
</aside>
<section class="center">
    <div class="center1">
        <div class="num">1123</div>
        <div class="num">234</div>
        <div class="num">1345</div>
        <div class="num">456</div>
        <div class="txt">累计生产</div>
        <div class="txt">剩余生产</div>
        <div class="txt">累计销售</div>
        <div class="txt">累计返厂</div>
    </div>
    <div class="center2" id="center2"></div>
</section>
<aside class="right">
    <div id="right1" class="right1">这里是右侧边栏1</div>
    <div id="right2" class="right2">这里是右侧边栏2</div>
</aside>
</body>
</html>

核心代码

后台数据

在本例中，flask做为web开发框架，提供了一个轻量级的实现web服务的功能。另本为了演示，实现了部分功能，其他则为静态数据，如下所示：

from flask import Flask
from flask import request
from flask import render_template
from flask import jsonify
import random
app = Flask(__name__)
@app.route('/main')
def main():
    return render_template('main.html')
@app.route('/get_c1_data', methods=['get', 'post'])
def get_c1_data():
    """获取C1数据"""
    total_confirmed = random.randint(0, 10000)  # 累计生产
    remain_suspect = random.randint(0, 5000)  # 剩余生产
    total_cure = random.randint(0, 10000)  # 累计销售
    total_dead = random.randint(0, 200)  # 累计返厂
    return jsonify({"total_confirmed": total_confirmed, "remain_suspect": remain_suspect, "total_cure": total_cure,
                    "total_dead": total_dead})
if __name__ == '__main__':
    app.run()

注意：jQuery进行ajax数据访问，返回的json格式的数据，所以引入flask中的jsonify模块，进行数据转换。

ajax访问

在本例中，为了实现局部刷新，采用ajax的方式进行访问，如下所示：

<script type="text/javascript">
        function get_time() {
            var cur_time = new Date();
            var str_time = cur_time.getFullYear() + "年" + ((cur_time.getMonth() + 1) > 9 ? (cur_time.getMonth() + 1) : "0" + (cur_time.getMonth() + 1)) + "月" + (cur_time.getDate() > 9 ? cur_time.getDate() : "0" + cur_time.getDate()) + "日" + " " + (cur_time.getHours() > 9 ? cur_time.getHours() : "0" + cur_time.getHours()) + ":" + (cur_time.getMinutes() > 9 ? cur_time.getMinutes() : "0" + cur_time.getMinutes()) + ":" + (cur_time.getSeconds() > 9 ? cur_time.getSeconds() : "0" + cur_time.getSeconds());
            $(".time").text(str_time);
        }
        function get_c1_data() {
            $.ajax({
                url: "/get_c1_data",
                type: "post",
                success: function (data) {
                    $(".num").eq(0).text(data.total_confirmed);
                    $(".num").eq(1).text(data.remain_suspect);
                    $(".num").eq(2).text(data.total_cure);
                    $(".num").eq(3).text(data.total_dead);
                },
                error: function () {
                }
            });
        }
        $(document).ready(function () {
            get_time();
            get_c1_data();
            setInterval(get_time, 1000);
            setInterval(get_c1_data,1000);
        });
    </script>

图表展示

在本例中，展示了多种图表，且各自独立，为了方便起见，将各个模块的图表，单独保存在js文件中。

折线图（累计趋势图）

var left1 = document.getElementById('left1');
var ec_left1 = echarts.init(left1,'dark');
var ec_left1_option;
ec_left1_option = {
  title: {
    text: '某某产品累计趋势',
    left:'left'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['累计生产', '剩余生产', '累计销售', '累计返厂'],
    left:'right'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['09-24', '09-25', '09-26', '09-27', '09-28', '09-29', '09-30']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '累计生产',
      type: 'line',
      //stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '剩余生产',
      type: 'line',
      //stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '累计销售',
      type: 'line',
      //stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '累计返厂',
      type: 'line',
      //stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    }
  ]
};
ec_left1_option && ec_left1.setOption(ec_left1_option);

折线（新增趋势图）

var left2 = document.getElementById('left2');
var ec_left2 = echarts.init(left2,'dark');
var ec_left2_option;
ec_left2_option = {
  title: {
    text: '某某公司产品新增趋势',
    left:'left'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['每日数量', '每日累计'],
    left:'right'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['09-24', '09-25', '09-26', '09-27', '09-28', '09-29', '09-30']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '每日数量',
      type: 'line',
      //stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '每日累计',
      type: 'line',
      //stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    }
  ]
};
ec_left2_option && ec_left2.setOption(ec_left2_option);

柱状图

var right1 = document.getElementById('right1');
var ec_right1 = echarts.init(right1,'dark');
var ec_right1_option;
ec_right1_option = {
    title: {
    text: '非重点城市销售Top5',
    left:'center'
  },
  xAxis: {
    type: 'category',
    data: ['广东', '河南', '江苏', '湖南', '河北', '沈阳', '吉林']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
ec_right1_option && ec_right1.setOption(ec_right1_option);

圆盘转速图

var right2 = document.getElementById('right2');
var ec_right2 = echarts.init(right2,'dark');
var ec_right2_option;
ec_right2_option = {
  backgroundColor: '#333',
  // tooltip: {
  //   formatter: '{a} <br/>{b} : {c}%'
  // },
  // toolbox: {
  //   feature: {
  //     restore: {},
  //     saveAsImage: {}
  //   }
  // },
  series: [
    // left
    {
      name: 'gauge 0',
      type: 'gauge',
      min: -200,
      max: 250,
      startAngle: -30,
      endAngle: -315,
      splitNumber: 9,
      radius: '35%',
      center: ['21%', '55%'],
      axisLine: {
        lineStyle: {
          color: [[1, '#AE96A6']]
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      anchor: {},
      pointer: {
        show: false
      },
      detail: {
        show: false
      },
      title: {
        fontSize: 8,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#fff',
        offsetCenter: [0, '-60%']
      },
      progress: {
        show: true,
        width: 3,
        itemStyle: {
          color: '#fff'
        }
      },
      data: [
        {
          value: 250,
          name: 'km/h'
        }
      ]
    },
    {
      name: 'gauge 1',
      type: 'gauge',
      min: 0,
      max: 250,
      startAngle: -140,
      endAngle: -305,
      splitNumber: 5,
      radius: '35%',
      center: ['21%', '55%'],
      axisLine: {
        lineStyle: {
          color: [[1, '#AE96A6']]
        }
      },
      splitLine: {
        distance: -7,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisTick: {
        distance: -8,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        distance: 14,
        fontSize: 10,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#fff'
      },
      anchor: {},
      pointer: {
        icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
        width: 5,
        length: '40%',
        offsetCenter: [0, '-58%'],
        itemStyle: {
          color: '#f00',
          shadowColor: 'rgba(255, 0, 0)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      },
      title: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 800,
        fontFamily: 'Arial',
        offsetCenter: [0, 0]
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 0,
          name: '当前位置：\n \n 中科路'
        }
      ]
    },
    // middle
    {
      name: 'gauge 2',
      type: 'gauge',
      min: 0,
      max: 8,
      z: 10,
      startAngle: 210,
      endAngle: -30,
      splitNumber: 8,
      radius: '50%',
      center: ['50%', '50%'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 0,
          color: [
            [0.825, '#fff'],
            [1, '#f00']
          ]
        }
      },
      splitLine: {
        distance: 20,
        length: 15,
        lineStyle: {
          color: 'auto',
          width: 4,
          shadowColor: 'rgba(255, 255, 255, 0.5)',
          shadowBlur: 15,
          shadowOffsetY: -10
        }
      },
      axisTick: {
        distance: 20,
        length: 8,
        lineStyle: {
          color: 'auto',
          width: 2,
          shadowColor: 'rgba(255, 255, 255)',
          shadowBlur: 10,
          shadowOffsetY: -10
        }
      },
      axisLabel: {
        distance: 10,
        fontSize: 15,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#fff'
      },
      anchor: {},
      pointer: {
        icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
        width: 10,
        offsetCenter: [0, '-10%'],
        length: '75%',
        itemStyle: {
          color: '#f00',
          shadowColor: 'rgba(255, 0, 0)',
          shadowBlur: 5,
          shadowOffsetY: 3
        }
      },
      title: {
        color: '#fff',
        fontSize: 12,
        fontWeight: 800,
        fontFamily: 'Arial',
        offsetCenter: [0, '-30%']
      },
      data: [
        {
          value: 0.6,
          name: '1/min x 1000'
        }
      ],
      detail: {
        show: false
      }
    },
    {
      name: 'gauge 3',
      type: 'gauge',
      min: 0,
      max: 8,
      z: 10,
      splitNumber: 8,
      radius: '50%',
      axisLine: {
        lineStyle: {
          width: 14,
          color: [[1, '#000']]
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      anchor: {},
      pointer: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        offsetCenter: ['25%', '50%'],
        formatter: '{a|{value}}{b|km/h}',
        rich: {
          a: {
            fontSize: 20,
            fontWeight: 800,
            fontFamily: 'Arial',
            color: '#fff',
            align: 'center',
            padding: [0, 5, 0, 0]
          },
          b: {
            fontSize: 14,
            fontWeight: 800,
            fontFamily: 'Arial',
            color: '#fff',
            padding: [0, 0, 20, 0]
          }
        }
      },
      // value is speed
      data: [
        {
          value: 0,
          name: ''
        }
      ]
    },
    //right
    {
      name: 'gauge 4',
      type: 'gauge',
      min: 0,
      max: 8,
      startAngle: 135,
      endAngle: -150,
      splitNumber: 8,
      radius: '35%',
      center: ['79%', '55%'],
      axisLine: {
        lineStyle: {
          color: [[1, '#AE96A6']]
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      anchor: {},
      pointer: {
        show: false
      },
      title: {},
      detail: {
        offsetCenter: ['-15%', 0],
        formatter: [
          '{a|                  00:00}',
          '{a|行驶时间       0:00}{b| h}',
          '{a|行驶距离        0.0}{b| km}',
          '{a|平均耗能        ---}{b| 1/100km}',
          '{a|平均速度        ---}{b| km/h}'
        ].join('\n'),
        rich: {
          a: {
            fontSize: 10,
            fontWeight: 800,
            fontFamily: 'Arial',
            lineHeight: 22,
            color: '#fff',
            align: 'left'
          },
          b: {
            fontWeight: 600,
            fontFamily: 'Arial',
            lineHeight: 22,
            color: '#fff',
            align: 'left'
          }
        }
      },
      progress: {
        show: true,
        width: 3,
        itemStyle: {
          color: '#fff'
        }
      },
      data: [
        {
          value: 250,
          name: ''
        }
      ]
    },
    {
      name: 'gauge 5',
      type: 'gauge',
      min: 0,
      max: 1,
      startAngle: 125,
      endAngle: 55,
      splitNumber: 2,
      radius: '34%',
      center: ['79%', '55.3%'],
      axisLine: {
        lineStyle: {
          width: 9,
          color: [
            [0.15, '#f00'],
            [1, 'rgba(255, 0, 0, 0)']
          ]
        }
      },
      splitLine: {
        distance: -14,
        length: 16,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisTick: {
        distance: -14,
        length: 10,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        distance: 12,
        fontSize: 10,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#fff',
        formatter: function (value) {
          if (value === 0.5) {
            return '2/4';
          }
          if (value === 1) {
            return '4/4';
          }
          return value + '';
        }
      },
      progress: {
        show: true,
        width: 5,
        itemStyle: {
          color: '#fff'
        }
      },
      anchor: {
        show: true,
        itemStyle: {},
        offsetCenter: ['-22%', '-57%'],
        size: 18,
        icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 16.6753472,8.3914275 16.6753472,7.77777779 L16.6753472,3.79333333 L15.6197917,2.73777777 C15.1859413,2.30392741 15.1859413,1.60051702 15.6197917,1.16666667 L15.6197917,1.16666667 C16.053642,0.732816318 16.7570524,0.732816318 17.1909028,1.16666667 L21.9053472,5.88111112 C22.1140468,6.08922811 22.2312072,6.37193273 22.2309028,6.66666667 L22.2309028,16.6666667 C22.2309028,18.5076158 20.7385186,20 18.8975695,20 C17.0566203,20 15.5642361,18.5076158 15.5642361,16.6666667 L15.5642361,12.2222222 L13.3420139,12.2222222 L13.3420139,17.7777778 L13.3420139,17.7777778 C13.9556636,17.7777778 14.453125,18.2752392 14.453125,18.8888889 L14.453125,18.8888889 C14.453125,19.5025386 13.9556636,20 13.3420139,20 L1.11979165,20 C0.506141934,20 0.00868054688,19.5025386 0.00868054687,18.8888889 L0.00868054687,18.8888889 C0.00868054688,18.2752392 0.506141934,17.7777778 1.11979165,17.7777778 L1.11979167,17.7777778 L1.11979167,1.11111112 Z M3.34201388,2.22222221 L3.34201388,8.88888888 L11.1197917,8.88888888 L11.1197917,2.22222221 L3.34201388,2.22222221 Z'
      },
      pointer: {
        show: false
      },
      title: {},
      detail: {
        offsetCenter: ['10%', '-56%'],
        formatter: '{a|831}{b| km}',
        rich: {
          a: {
            fontSize: 15,
            fontWeight: 800,
            fontFamily: 'Arial',
            color: '#fff'
          },
          b: {
            fontWeight: 600,
            fontFamily: 'Arial',
            color: '#fff'
          }
        }
      },
      data: [
        {
          value: 0.85,
          name: ''
        }
      ]
    },
    {
      name: 'gauge 6',
      type: 'gauge',
      min: -120,
      max: -60,
      startAngle: 230,
      endAngle: 310,
      clockwise: false,
      splitNumber: 2,
      radius: '35%',
      center: ['79%', '55%'],
      axisLine: {
        lineStyle: {
          color: [
            [1, '#AE96A6'],
            [1.1, '#f00']
          ]
        }
      },
      splitLine: {
        distance: -8,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisTick: {
        splitNumber: 3,
        length: 8,
        distance: -8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        distance: 14,
        fontSize: 10,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#fff',
        formatter: function (value) {
          return -value + '';
        }
      },
      anchor: {
        show: true,
        itemStyle: {},
        offsetCenter: [0, '55%'],
        size: 20,
        icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0.4,0.2-1.4-0.9-0.9-1.3c0.6-0.4,1.3-0.6,2-0.7c0.8,0,1.5,0.2,2.2,0.5c0.4,0.3,0.9,0.4,1.3,0.4c0.6,0,1.1-0.2,1.5-0.6s1.6,0.7,0.9,1.3S-44,11.6-44.9,11.6L-44.9,11.6z M-34.3,11.6c-0.7,0-1.4-0.3-2-0.7c-0.6-0.4,0.5-1.6,0.9-1.3s0.8,0.4,1.2,0.4c0.5,0,1-0.1,1.4-0.4c0.6-0.3,1.3-0.5,2-0.6h0c0.9,0,1.7,0.3,2.4,0.9c0.7,0.5-0.5,1.6-0.9,1.3c-0.4-0.3-1-0.6-1.5-0.6h0c-0.5,0-0.9,0.2-1.3,0.4c-0.6,0.3-1.3,0.5-2,0.6H-34.3z M-33.5,16.3c-0.7,0-1.4-0.3-1.9-0.8c-0.4-0.3-0.6-0.5-1-0.5c-0.4,0-0.7,0.2-1,0.4c-0.6,0.5-1.3,0.7-2,0.7c-0.7,0-1.4-0.3-1.9-0.8c-0.2-0.3-0.6-0.4-0.9-0.4c-0.4,0-0.7,0.1-1.1,0.5c-0.6,0.5-1.3,0.7-2.1,0.7c-0.7-0.1-1.4-0.4-1.9-0.9c-0.4-0.3-0.6-0.5-1-0.5c-0.3,0-0.6,0.2-0.9,0.4s-1.6-0.7-1.1-1.2c0.5-0.5,1.2-0.8,1.9-0.9c1-0.1,1.6,0.4,2.1,0.8c0.3,0.3,0.6,0.5,1,0.5c0.4,0,0.6-0.1,1-0.4c0.6-0.5,1.4-0.8,2.1-0.8c0.7,0,1.4,0.3,1.9,0.8c0.2,0.2,0.6,0.4,0.9,0.4c0.4,0,0.6-0.1,1-0.4c0.6-0.5,1.3-0.7,2-0.7c0.8,0,1.5,0.3,2,0.9c0.4,0.3,0.6,0.4,0.9,0.4c0.3,0,0.7-0.2,1.1-0.5c0.5-0.4,1.2-0.9,2.3-0.8c0.7,0,1.4,0.3,1.9,0.7c0.5,0.4-0.7,1.5-1,1.3s-0.6-0.4-1-0.4c-0.4,0-0.7,0.2-1.2,0.5C-32,15.9-32.7,16.2-33.5,16.3L-33.5,16.3z'
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 15,
        length: '4',
        offsetCenter: [0, '-90%'],
        itemStyle: {
          color: '#f00'
        }
      },
      title: {},
      detail: {
        show: false
      },
      data: [
        {
          value: -120,
          name: ''
        }
      ]
    }
  ]
};
ec_right2_option && ec_right2.setOption(ec_right2_option);

Python基础之数字化大屏（上）

涉及知识点

示例效果图

页面设计

核心代码

后台数据

ajax访问

图表展示

热门文章

最新文章

相关课程

相关电子书

相关实验场景