2024年 10月大数据可视化展示作业大数据数据展示的前端页面，包括软件安装服务器相关配置，表格展示，聚类展示，

软件安装

安装 mysql

windows 安装

【手把手教你安装MySQL(最新版本安装)】 www.bilibili.com/video/BV1jc…

#net start mysql80
#net stop mysql80

linux 安装

【Ubuntu下安装MySQL数据库】 www.bilibili.com/video/BV12q…

sudo apk update
sudo apk install mysql-server
yes
sudo mysql_secure_installation
y
0
y
y
n
y
systemctl status mysql.service
sudo mysql -u root -p
123456

mysql 远程访问

为了开启MySQL的远程连接，你需要进行几个步骤来确保服务器配置正确，并且安全措施得当。以下是开启MySQL远程连接的基本步骤：

1. 确认MySQL服务运行状态

首先，确保MySQL服务正在运行。你可以在服务器上使用如下命令来检查MySQL服务状态：

sudo systemctl status mysql

或者使用老的系统V命令：

sudo service mysql status

2. 修改MySQL配置文件

编辑MySQL的配置文件（一般位于/etc/mysql/mysql.conf.d/mysqld.cnf或/etc/my.cnf），修改bind-address参数。默认情况下，这个参数设置为127.0.0.1（只允许本地连接）：

bind-address = 0.0.0.0

设置为0.0.0.0表示接受所有IPv4地址的连接。如果你想要更加精确地控制，可以设置为特定的IP地址。

3. 重启MySQL服务

修改配置后，需要重启MySQL服务使改动生效：

sudo systemctl restart mysql

或者使用老的命令：

sudo service mysql restart

4. 创建允许远程连接的用户

你需要创建一个用户并授权这个用户从远程访问数据库。可以使用MySQL命令行工具来完成：

CREATE USER 'username'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

这里'username'@'%'中的%表示允许从任何IP地址连接。如果你想限制只能从特定IP地址连接，可以将%替换为具体的IP地址。

查看系统用户

select * from mysql.user \G;

5. 配置防火墙（如果有的话）

如果服务器运行了防火墙，你需要开放MySQL的默认端口（通常是3306）以允许外部访问：

sudo ufw allow 3306

或者，如果使用的是iptables：

sudo iptables -A INPUT -p tcp --dport 3306 -j ACCEPT

6. 测试远程连接

使用MySQL客户端软件或命令行工具测试远程连接是否成功：

mysql -h server_ip -u username -p

这里server_ip是MySQL服务器的IP地址。

确保在进行这些操作时考虑到安全性，尤其是在生产环境中。避免使用root用户远程访问，限制可访问IP，并使用强密码。这些步骤应该帮助你成功设置MySQL的远程连接。

安装 vscode

用vue作为网站的前端展示

- 两个vue插件
Vue - Official
Vue 3 Snippets

安装 node

vue 运行环境

用cmd运行

npm config set registry https://registry.npmmirror.com
npm cache clean --force
npm install -g yarn

新建后端项目

服务器安装 .net core 6

ssh链接linux
【.Net6极速部署Linux（.Net Core发布技巧/Linux基础教学）】 www.bilibili.com/video/BV1pS…
- Microsoft PPA命令配置：wget packages.microsoft.com/config/ubun…
- sudo dpkg -i packages-microsoft-prod.deb
- sudo apt-get update
- 安装.net core运行时： sudo apt install aspnetcore-runtime-6.0
- 启动dotnet服务： nohup dotnet AuthServer.Host.dll &
守护进程防止 shell 关闭
- nohup dotnet xxx.dll

新建前端项目

用管理员身份运行vscode

允许本地无签名脚本运行

Set-ExecutionPolicy RemoteSigned

vite

npm install -g npm

npm create vite@latest

npm install element-plus --save
npm install axios

cd my-project 
npm install npm run dev

axios 配置

Axios中文文档 | Axios中文网 (axios-http.cn)

server: {
    port: 8080,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://serverip:8461', // 替换为你的后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, 'api'),
      },
    },
  },

网页安装

表格展示

聚类展示

前端发送请求，后端生成图片并且发送回前端展示。

部分代码展示

import seaborn as sns
import matplotlib.pyplot as plt
from matplotlib import font_manager
import pandas as pd
from sklearn.cluster import KMeans

font_path = "C:/Windows/Fonts/simsun.ttc"  # 在Windows系统上
font_prop = font_manager.FontProperties(fname=font_path)

# Load and preprocess data
df = pd.read_excel("高校评分数据集.xlsx")
k = [
    "办学层次",
    "学科水平",
    "办学资源",
    "师资规模与结构",
    "科学研究",
    "服务社会",
    "高端人才",
    "重大项目与成果",
    "国际竞争力",
    "人才培养",
]
df = df.loc[:, k]

# Perform clustering
estimator = KMeans(n_clusters=5)
estimator.fit(df.iloc[:, 0:10])
df["label"] = estimator.labels_

# Create pairplot
pairplot = sns.pairplot(data=df, hue="label", vars=k)

# Save each subplot
for i, x_var in enumerate(k):
    for j, y_var in enumerate(k):
        plt.figure(figsize=(5, 5))
        sns.scatterplot(data=df, x=x_var, y=y_var, hue="label")
        plt.title(f"{k[i]}-{k[j]}", fontproperties=font_prop)
        plt.xlabel(k[i], fontproperties=font_prop)  # Set x-axis label
        plt.ylabel(k[j], fontproperties=font_prop)  # Set y-axis label
        plt.savefig(f"{k[i]}-{k[j]}.png")
        plt.close()

聚类总图展示

省份分布展示

前端发送请求，后端汇总数据返回前端展示。

使用echarts做图表，echarts的cdn的引入在index.html中引入

部分代码如下

<template>
  <div><el-radio-group v-model="radio1">
      <el-radio value="办学层次" size="large">办学层次</el-radio>
      <el-radio value="师资规模与结构" size="large">师资规模与结构</el-radio>
      <el-radio value="人才培养" size="large">人才培养</el-radio>
      <el-radio value="国际竞争力" size="large">国际竞争力</el-radio>
      <el-radio value="办学资源" size="large">办学资源</el-radio>
      <el-radio value="学科水平" size="large">学科水平</el-radio>
      <el-radio value="科学研究" size="large">科学研究</el-radio>
      <el-radio value="服务社会" size="large">服务社会</el-radio>
      <el-radio value="高端人才" size="large">高端人才</el-radio>
      <el-radio value="重大项目与成果" size="large">重大项目与成果</el-radio>
    </el-radio-group></div>
  <div>
    <el-button type="primary" @click="handleClick">生成中国地图分布</el-button>
  </div>
  <div ref="chart" style="width: 800px; height: 800px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const radio1 = ref('办学层次');
const chart = ref(null);
const maxValue = ref()

let handleClick = () => {
  axios.get('/src/assets/bigdata.json')
    .then(response => {

      jsonData.value = response.data.map((a) => {
        return { "name": a.省市, "value": Number(a[radio1.value]) }
      })

      const groupedData = response.data.reduce((acc, curr) => {
        const 省市 = curr.省市
        const 总分 = curr[radio1.value]
        if (!acc[省市]) {
          acc[省市] = { name: 省市, value: 0 };
        }
        acc[省市].value += Number(总分);
        return acc;
      }, {});
      // 提取每个省市的总分数组
      const totalScores = Object.values(groupedData);
      // 找到最大总分
      maxValue.value = Math.max(...totalScores.map(item => item.value));

      initChart();
    })
    .catch(error => {
      console.log(error);
    });
}

let jsonData = ref()


const initChart = () => {
  const chartDom = chart.value;
  const myChart = echarts.init(chartDom);

  const option = {
    title: {
      text: radio1.value,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      min: 0,
      max: maxValue.value,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true
    },
    series: [
      {
        name: radio1.value,
        type: 'map',
        map: 'china',
        roam: true,
        label: {
          show: true
        },
        data: jsonData.value
      }
    ]
  };

  myChart.setOption(option);
};

</script>

2024年 10月 大数据 可视化展示 作业