springboot+echarts +mysql制作数据可视化大屏（四图）

news2024/11/22 16:17:27

作者水平低，如有错误，恳请指正！谢谢！！！！！

项目简单，适合大学生参考

分类专栏还有其它的可视化博客哦！

专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482

成果展示：

 一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。

4.1 区域销量统计条形图

4.1.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Big1 {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big1(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data")
    public Map<String, Object> getChartData() {
        String query = "SELECT region_name, COUNT(*) AS count FROM ads_area_topic GROUP BY region_name";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String regionName = (String) row.get("region_name");
            Integer count = ((Number) row.get("count")).intValue();

            labels.add(regionName);
            values.add(count);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data

4.1.2 前端

<!DOCTYPE html>
<html>
<head>
    <title>区域销量统计</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--    <script src="static/js/echarts.min.js"></script>-->
<!--    <script src="static/js/jquery-3.6.0.min.js"></script>-->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #chart {
            width: 100%;
            height: 100%;
            min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */
        }
    </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
    var chart = echarts.init(document.getElementById('chart'));

    // 监听窗口大小变化事件
    window.addEventListener('resize', function() {
        chart.resize(); // 调整图表大小
    });

    // 使用Ajax异步获取数据
    $.ajax({
        url: '/chart-data',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var option = {
                title: {
                    text: '区域销量统计',
                    textStyle: {
                        textAlign: 'center'
                    }
                },
                tooltip: {},
                xAxis: {
                    data: data.labels
                },
                yAxis: {},
                series: [{
                    name: 'Count',
                    type: 'bar',
                    data: data.values,
                    itemStyle: {
                        color: function(params) {
                            // 设置背景颜色
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
                            return colorList[params.dataIndex];
                        }
                    }
                }]
            };
            chart.setOption(option);
        }
    });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问http://localhost:8080/big1.html

4.2  订单金额折线图

4.2.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Big2Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big2Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data2")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, order_amount FROM ads_order_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();

            labels.add(dt);
            values.add(orderAmount);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​http://localhost:8080/chart-data2

4.2.2 前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>折线图</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart-container {
      width: 100%;
      height: 100%;
      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart-container"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // 使用 Axios 发送 AJAX 请求
  axios.get('/chart-data2')
          .then(function (response) {
            // 处理从后端返回的数据
            const data = response.data;

            // 提取 X 轴和 Y 轴数据
            const xData = data.labels;
            const yData = data.values;

            // 创建图表
            const chartContainer = document.getElementById('chart-container');
            const chart = echarts.init(chartContainer);

            // 监听窗口大小变化事件
            window.addEventListener('resize', function() {
              chart.resize(); // 调整图表大小
            });

            const option = {
              title: {
                text: '订单金额折线图'
              },
              xAxis: {
                type: 'category',
                data: xData
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                type: 'line',
                data: yData,
                areaStyle: {
                  color: 'rgba(0, 128, 255, 0.3)' // 设置背景颜色
                }
              }]
            };

            // 渲染图表
            chart.setOption(option);

          })
          .catch(function (error) {
            console.log(error);
          });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/big2.html

4.3  平均支付时间统计

4.3.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Big3Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big3Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data3")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();

            labels.add(dt);
            values.add(paymentAvgTime);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data3

4.3.2 前端

<!DOCTYPE html>
<html>
<head>
  <title>平均支付时间统计</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart {
      width: 100%;
      height: 100%;
      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
  var chart = echarts.init(document.getElementById('chart'));

  // 监听窗口大小变化事件
  window.addEventListener('resize', function() {
    chart.resize(); // 调整图表大小
  });

  // 使用Ajax异步获取数据
  $.ajax({
    url: '/chart-data3',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var option = {
        title: {
          text: '平均支付时间统计',
          textStyle: {
            textAlign: 'center'
          }
        },
        tooltip: {},
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          data: data.labels
        },
        polar: {},
        series: [{
          name: 'Avg Time',
          type: 'bar',
          data: data.values,
          coordinateSystem: 'polar',
          itemStyle: {
            color: function(params) {
              // 设置背景颜色
              var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
              return colorList[params.dataIndex % colorList.length];
            }
          }
        }]
      };
      chart.setOption(option);
    }
  });
</script>
</body>
</html>

 验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big3.html

4.4  订单金额统计

4.4.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Big4Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big4Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data4")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, order_amount FROM ads_payment_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();

            labels.add(dt);
            values.add(orderAmount);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data4

4.4.2 前端

<!DOCTYPE html>
<html>
<head>
  <title>订单金额统计</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart {
      width: 100%;
      height: 100%;
      min-height: 300px;
    }
  </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
  var chart = echarts.init(document.getElementById('chart'));

  // 监听窗口大小变化事件
  window.addEventListener('resize', function() {
    chart.resize(); // 调整图表大小
  });

  // 使用Ajax异步获取数据
  $.ajax({
    url: '/chart-data4',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var option = {
        title: {
          text: '订单金额统计',
          textStyle: {
            textAlign: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          name: '订单金额',
          type: 'pie',
          radius: '50%',
          data: data.values.map(function(value, index) {
            return {
              name: data.labels[index],
              value: value
            };
          })
        }]
      };
      chart.setOption(option);
    }
  });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big4.html

五、大屏编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>大屏可视化</title>
    <style>
        /* CSS样式 */
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #header {
            width: 100%;
            height: 8%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-size: 20px;
            font-weight: bold;
        }
        #content {
            width: 100%;
            height: 92%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
        }
        .chart-container {
            width: 49%;
            height: 48%;
            background-color: #ffffff;
            margin-bottom: 20px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        }
        .chart-container:not(:last-child) {
            margin-right: 5px;
        }
    </style>
</head>
<body style="background-color: bisque">
    <div id="header"><h2>销售数据平面一览大屏</h2></div>

    <div id="content">
        <div class="chart-container" id="chart1">
            <iframe src="big1.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart2">
            <iframe src="big2.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart3">
            <iframe src="big3.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart4">
            <iframe src="big4.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/d3@7.0.0/dist/d3.min.js"></script>
    <script>
    </script>
</body>
</html>

运行项目，浏览器访问​​​​​​​http://localhost:8080/large%20screen.html

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用​​​​​​​。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/708864.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++类和对象——（对象的赋值拷贝构造函数）

C++类和对象——（对象的赋值拷贝构造函数）

目录 对象的赋值 目录 对象的赋值 1、提出问题&#xff1a; 2、解决办法&#xff1a; 拷贝构造函数 1、拷贝构造函数的原型&#xff1a; 2、调用机制&#xff1a; 3、使用例程代码 总代码工程&#xff1a; 对象的赋值 1、提出问题&#xff1a; 能否使用一个已经构造…
阅读更多...
Java——《面试题——网络篇》

Java——《面试题——网络篇》

前文 java——《面试题——基础篇》 Java——《面试题——JVM篇》 Java——《面试题——多线程&并发篇》 Java——《面试题——Spring篇》 Java——《面试题——SpringBoot篇》 Java——《面试题——MySQL篇》​​​​​​ Java——《面试题——SpringCloud》 Java…
阅读更多...
Java——《面试题——设计模式篇》

Java——《面试题——设计模式篇》

前文 java——《面试题——基础篇》 Java——《面试题——JVM篇》 Java——《面试题——多线程&并发篇》 Java——《面试题——Spring篇》 Java——《面试题——SpringBoot篇》 Java——《面试题——MySQL篇》​​​​​​ Java——《面试题——SpringCloud》 Java…
阅读更多...
QThread

QThread

QThread的执行从run()函数的执行开始; 在Qt中建立线程的主要目的就是为了用线程来处理那些耗时的后台操作&#xff0c;从而让主界面能及时响应用户的请求操作。 QThread的使用 链接 work对象 1&#xff0c;继承Qobject&#xff1b; 2&#xff0c;dowork()&#xff1b; 使…
阅读更多...
（stm32）Unix时间戳

（stm32）Unix时间戳

时间戳计时系统和常用的年月日时分秒计时系统有很大差别 时间戳&#xff1a;只计算从1970年1月1日0点整为0秒&#xff0c;只用最基本的秒来计时&#xff0c;用不进位。 常用计时系统&#xff1a;60秒进位1分钟&#xff0c;60分钟进位1小时&#xff0c;24小时进位1天&#xff…
阅读更多...
Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库

介绍 Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库&#xff0c;基于 ECMA-376&#xff0c;ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Microsoft Excel™ 2007 及以上版本创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&a…
阅读更多...
电子器件系列44：IGBT的内部电容

电子器件系列44：IGBT的内部电容

对两款igbt进行比较&#xff0c;确定两者是否可以互换 A: B: 一、 从电路图上分析&#xff0c;在启动的时候&#xff0c;电路会提供一个15v的电压&#xff0c;两者都能顺利导通&#xff0c;可以替换 二、 开关时间 从实际使用电路上分析&#xff0c;这些参数对于本电路的功能…
阅读更多...
随机数检测（二）

随机数检测（二）

随机数检测&#xff08;二&#xff09;- 扑克检测、重叠子序列、游程总数、游程分布 3.4 扑克检测方法3.5 重叠子序列检测方法3.6 游程总数检测3.7 游程分布检测 3.4 扑克检测方法 扑克检测方法如下图。 以下实现代码供参考。 def alterOffsetBit(m, offset, listSub:list)…
阅读更多...
HoloLens2与Unity的Socket通信踩坑日记

HoloLens2与Unity的Socket通信踩坑日记

最近想让Hololens中获取电脑中更新的数据&#xff0c;打算使用套接字的方式进行通信&#xff0c;明明在unity中模拟测试可以进行正常通信&#xff0c;但是将软件部署到HoloLens上通信总是失败&#xff0c;找了很久的原因&#xff0c;找了很久的原因&#xff0c;终于能够正常通信…
阅读更多...
国产自研开源大数据管理平台DataSophon

国产自研开源大数据管理平台DataSophon

【背景】 几天在朋友圈看到开源社区Datavane发布了一个新开源项目DataSophon&#xff1b;一个致力于快速实现部署、管理、监控以及自动化运维大数据云原生平台&#xff0c;帮助快速构建起稳定、高效、可弹性伸缩的大数据云原生平台&#xff1b;从介绍内容来看非常优秀&#xff…
阅读更多...
事务管理-@TransActional

事务管理-@TransActional

事务 概念&#xff1a;一组操作集合&#xff0c;是一个不可分割的单位&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 事务操作 开启事务&#xff08;一组操作开始前&#xff0c;开启事务&#xff09;&#xff1a;start transaction / begin;提交事务(操作全部成…
阅读更多...
AutoSAR系列讲解（入门篇）4.8-BSW的OS功能

AutoSAR系列讲解（入门篇）4.8-BSW的OS功能

一、OS架构和术语解释 OS&#xff1a; 操作系统。就仅仅位于系统服务层&#xff0c;由于OS是需要直接操作硬件的一些功能的&#xff0c;所以系统服务层才会贯穿三层结构至达硬件。AutoSAR OS是基于OSEK OS开发出来的&#xff0c;OSEK也是早期ECU上的OS标准了&#xff0c;现在也…
阅读更多...
matplotlib 区域填充

matplotlib 区域填充

import matplotlib.pyplot as plt import numpy as npx np.linspace(0, 8 * np.pi, 1000) siny np.sin(x) cosy np.cos(x / 2) / 2 plt.plot(x, siny, cskyblue, labelsin-X) plt.plot(x, cosy, corangered, label1/2 cos 1/2x )# 填充颜色 plt.fill_between(x, cosy, siny,…
阅读更多...
TiDB 多租户方案和原理

TiDB 多租户方案和原理

作者&#xff1a; li_zhenhuan 原文来源&#xff1a; https://tidb.net/blog/a55c1d14 使用多租户 有很多文章介绍技术上如何使用多租户&#xff0c;在这里简单说明&#xff1a; CREATE RESOURCE GROUP rg_oltp RU_PER_SEC4000; ALTER USER app1 RESOURCE GROUP "r…
阅读更多...
java——Collection、Map 深度理解

java——Collection、Map 深度理解

Collection <类型>&#x1f349; List(Conllection的实现类) 可以重复&#xff0c;有顺序 可存放多个null值&#x1f95d; ArrayList 主选 &#x1f353; 结构&#xff1a;数组 特点&#xff1a;查找快&#xff0c;增删慢 线程不安全&#xff0c;效率高 Vector&#…
阅读更多...
第十三章 原理篇：SWIN-transformer

第十三章 原理篇：SWIN-transformer

累了&#xff0c;没写完 面试完了再来写 参考教程&#xff1a; swin-transformer/model.py 文章目录 概述transformer blockswindow_partionW-MSAwindow-reversePatch Merging 概述 在前面介绍了vision transformer的原理&#xff0c;加入transformer的结构后&#xff0c;这种…
阅读更多...
HCIP（HCIA回顾）

HCIP（HCIA回顾）

OSI/RM 七层 应用层 表示层 会话层 传输层 区分不同的流量&#xff0c;定义传输方式。 端口号由16位二进制构成&#xff0c;范围为0~65535(其中0不作为传输层的端口使用)&#xff0c;所以真实取值范围为1~65535&#xff1b;其中&#xff0c;1~1023称为知名端口号。 1、可靠…
阅读更多...
React Native 集成到iOS原有的项目上

React Native 集成到iOS原有的项目上

1.官方说明地址&#xff1a; 集成到现有原生应用 2. 主要步骤说明 把 React Native 组件集成到 iOS 应用中有如下几个主要步骤&#xff1a; 配置好 React Native 依赖和项目结构。了解你要集成的 React Native 组件。使用 CocoaPods&#xff0c;把这些组件以依赖的形式加入到项…
阅读更多...
【推式子 二项式定理】Wannafly挑战赛 B

【推式子 二项式定理】Wannafly挑战赛 B

B-求值2_Wannafly挑战赛17 (nowcoder.com) 题意&#xff1a; 思路&#xff1a; Code&#xff1a; #include <bits/stdc.h>#define int long longusing namespace std;const int mxn2e610; const int mxe2e510; const int Inf0x3f3f3f3f; const int mod998244353;int N;…
阅读更多...
碳排放预测模型 | Python实现基于RF随机森林的碳排放预测模型

碳排放预测模型 | Python实现基于RF随机森林的碳排放预测模型

文章目录 效果一览文章概述研究内容源码设计参考资料效果一览 文章概述 碳排放预测模型 | Python实现基于RF随机森林的碳排放预测模型 研究内容 碳排放被认为是全球变暖的最主要原因之一。 该项目旨在提供各国碳排放未来趋势的概述以及未来十年的全球趋势预测。 其方法是分析这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023