• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    vue+d3js+fastapi实现天气柱状图折线图饼图的示例

    发布者: 404号房间 | 发布时间: 2025-6-16 07:41| 查看数: 116| 评论数: 0|帖子模式

    说明：
    vue+d3js+fastapi实现天气柱状图折线图饼图
    效果图：

    step0:postman
    1. 生成天气数据（POST请求）：
    1. URL: http://localhost:8000/generate-data/?year=2024&month=3&seed=42
    复制代码
    方法: POST
    1. Headers:
    2.   Content-Type: application/json
    复制代码
    成功响应示例：
    1. {
    2.     "status": "success",
    3.     "message": "成功生成31条天气数据",
    4.     "year": 2024,
    5.     "month": 3
    6. }
    复制代码
    2. 查询天气数据（GET请求）：
    1. URL: http://localhost:8000/weather-data/?year=2024&month=4
    复制代码
    方法: GET
    成功响应示例：
    1. {
    2.     "status": "success",
    3.     "count": 31,
    4.     "year": 2024,
    5.     "month": 3,
    6.     "data": [
    7.         {
    8.             "record_date": "2024-03-01",
    9.             "temperature": 16.4,
    10.             "humidity": 72,
    11.             "precipitation": 0.0,
    12.             "wind_speed": 7.2,
    13.             "weather_condition": "Cloudy"
    14.         },
    15.         
    16.         {
    17.             "record_date": "2024-03-31",
    18.             "temperature": 17.3,
    19.             "humidity": 62,
    20.             "precipitation": 3.8,
    21.             "wind_speed": 1.4,
    22.             "weather_condition": "Rain"
    23.         }
    24.     ]
    25. }
    复制代码
    step1:sql
    1. CREATE TABLE weather_data (
    2.     id INT AUTO_INCREMENT PRIMARY KEY,
    3.     record_date DATE NOT NULL,
    4.     temperature DECIMAL(4,1) NOT NULL,  -- 格式：-99.9 到 99.9
    5.     humidity TINYINT UNSIGNED NOT NULL,  -- 范围：0-100
    6.     precipitation DECIMAL(5,1) NOT NULL, -- 最大999.9mm
    7.     wind_speed DECIMAL(4,1) NOT NULL,   -- 最大99.9m/s
    8.     weather_condition VARCHAR(50) NOT NULL,  -- 修改列名
    9.     INDEX (record_date)
    10. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

    12. select *from weather_data;
    复制代码
    step2:python test
    C:\Users\wangrusheng\PycharmProjects\FastAPIProject1\hello.py
    1. import random
    2. from datetime import date
    3. from decimal import Decimal
    4. import calendar
    5. import pymysql.cursors
    6. import json
    7. # 数据库配置（根据实际情况修改）
    8. DB_CONFIG = {
    9.     'host': 'localhost',
    10.     'user': 'root',
    11.     'password': '123456',
    12.     'db': 'db_school',
    13.     'charset': 'utf8mb4',
    14.     'cursorclass': pymysql.cursors.DictCursor
    15. }


    18. def generate_temperature(rng, min_temp=10.0, max_temp=20.0):
    19.     """生成温度数据（均匀分布）"""
    20.     temp = rng.uniform(min_temp, max_temp)
    21.     return round(temp, 1)


    24. def generate_humidity(rng):
    25.     """生成湿度数据（正态分布）"""
    26.     humidity = rng.gauss(60, 15)
    27.     humidity = max(0, min(humidity, 100))
    28.     return int(round(humidity))


    31. def generate_precipitation(rng):
    32.     """生成降水量数据（20%概率下雨）"""
    33.     if rng.random() < 0.2:
    34.         amount = rng.expovariate(1 / 5.0)  # 平均5mm
    35.         amount = max(0.1, min(amount, 30.0))
    36.         return round(amount, 1)
    37.     return 0.0


    40. def generate_wind_speed(rng):
    41.     """生成风速数据（伽马分布）"""
    42.     speed = rng.gammavariate(2, 2)
    43.     speed = max(0.0, min(speed, 20.0))
    44.     return round(speed, 1)


    47. def get_weather_condition(temperature, precipitation, humidity, rng):
    48.     """根据天气参数判断天气状况"""
    49.     if precipitation > 0:
    50.         return 'Snow' if temperature < 3.0 else 'Rain'
    51.     if humidity >= 70:
    52.         return 'Cloudy'
    53.     if humidity <= 30:
    54.         return 'Sunny'
    55.     return rng.choice(['Partly Cloudy', 'Mostly Cloudy'])


    58. def generate_monthly_weather_data(year, month, rng=None):
    59.     """生成整月天气数据"""
    60.     if rng is None:
    61.         rng = random.Random()

    63.     _, num_days = calendar.monthrange(year, month)
    64.     data = []

    66.     for day in range(1, num_days + 1):
    67.         record_date = date(year, month, day)
    68.         temperature = generate_temperature(rng)
    69.         humidity = generate_humidity(rng)
    70.         precipitation = generate_precipitation(rng)
    71.         wind_speed = generate_wind_speed(rng)
    72.         condition = get_weather_condition(
    73.             temperature, precipitation, humidity, rng
    74.         )

    76.         data.append({
    77.             'record_date': record_date,
    78.             'temperature': temperature,
    79.             'humidity': humidity,
    80.             'precipitation': precipitation,
    81.             'wind_speed': wind_speed,
    82.             'weather_condition': condition
    83.         })

    85.     return data


    88. def insert_weather_data(data):
    89.     """批量插入天气数据到数据库"""
    90.     connection = pymysql.connect(**DB_CONFIG)
    91.     try:
    92.         with connection.cursor() as cursor:
    93.             sql = """
    94.                 INSERT INTO weather_data
    95.                 (record_date, temperature, humidity, precipitation, wind_speed, weather_condition)
    96.                 VALUES (%s, %s, %s, %s, %s, %s)
    97.             """
    98.             params = [
    99.                 (
    100.                     d['record_date'],
    101.                     d['temperature'],
    102.                     d['humidity'],
    103.                     d['precipitation'],
    104.                     d['wind_speed'],
    105.                     d['weather_condition']
    106.                 )
    107.                 for d in data
    108.             ]
    109.             cursor.executemany(sql, params)
    110.         connection.commit()
    111.         return len(data)
    112.     except Exception as e:
    113.         connection.rollback()
    114.         raise e
    115.     finally:
    116.         connection.close()


    119. def get_weather_data(year: int, month: int) -> list:
    120.     """从数据库获取指定年月的天气数据并转换为JSON兼容格式"""
    121.     connection = pymysql.connect(**DB_CONFIG)
    122.     try:
    123.         with connection.cursor() as cursor:
    124.             sql = """
    125.                 SELECT record_date, temperature, humidity,
    126.                        precipitation, wind_speed, weather_condition
    127.                 FROM weather_data
    128.                 WHERE YEAR(record_date) = %s AND MONTH(record_date) = %s
    129.                 ORDER BY record_date
    130.             """
    131.             cursor.execute(sql, (year, month))
    132.             results = cursor.fetchall()

    134.             # 转换日期和数值类型
    135.             for record in results:
    136.                 record['record_date'] = record['record_date'].isoformat()
    137.                 # 处理Decimal类型（如果存在）
    138.                 for key in ['temperature', 'precipitation', 'wind_speed']:
    139.                     if isinstance(record[key], Decimal):
    140.                         record[key] = float(record[key])
    141.             return results
    142.     finally:
    143.         connection.close()


    146. if __name__ == '__main__':
    147.     # 示例：生成并插入2024年4月的天气数据
    148.     year = 2024
    149.     month = 4

    151.     # 创建带种子的随机生成器（保证结果可复现）
    152.     rng = random.Random(42)

    154.     try:
    155.         # 生成模拟数据
    156.         weather_data = generate_monthly_weather_data(year, month, rng)

    158.         # 插入数据库
    159.         # inserted_count = insert_weather_data(weather_data)
    160.         # print(f"成功插入{inserted_count}条天气数据")
    161.         # 获取并打印JSON数据
    162.         weather_json = get_weather_data(year, month)
    163.         print(json.dumps(weather_json, indent=2, ensure_ascii=False))

    165.     except Exception as e:
    166.         print(f"操作失败: {str(e)}")
    复制代码
    step3:python fastapi
    C:\Users\wangrusheng\PycharmProjects\FastAPIProject1\main.py
    1. from fastapi import FastAPI, HTTPException, Query
    2. from datetime import date
    3. from decimal import Decimal
    4. from typing import Optional
    5. import random
    6. import calendar
    7. import pymysql.cursors
    8. import json
    9. from fastapi.middleware.cors import CORSMiddleware
    10. app = FastAPI()
    11. # CORS配置
    12. app.add_middleware(
    13.     CORSMiddleware,
    14.     allow_origins=["*"],
    15.     allow_credentials=True,
    16.     allow_methods=["*"],
    17.     allow_headers=["*"],
    18. )
    19. # 数据库配置（根据实际情况修改）
    20. DB_CONFIG = {
    21.     'host': 'localhost',
    22.     'user': 'root',
    23.     'password': '123456',
    24.     'db': 'db_school',
    25.     'charset': 'utf8mb4',
    26.     'cursorclass': pymysql.cursors.DictCursor
    27. }

    29. # 以下保持原有函数定义不变（generate_temperature、generate_humidity等）
    30. # [原有函数定义区，保持与问题中完全相同的函数实现]


    33. def generate_temperature(rng, min_temp=10.0, max_temp=20.0):
    34.     """生成温度数据（均匀分布）"""
    35.     temp = rng.uniform(min_temp, max_temp)
    36.     return round(temp, 1)


    39. def generate_humidity(rng):
    40.     """生成湿度数据（正态分布）"""
    41.     humidity = rng.gauss(60, 15)
    42.     humidity = max(0, min(humidity, 100))
    43.     return int(round(humidity))


    46. def generate_precipitation(rng):
    47.     """生成降水量数据（20%概率下雨）"""
    48.     if rng.random() < 0.2:
    49.         amount = rng.expovariate(1 / 5.0)  # 平均5mm
    50.         amount = max(0.1, min(amount, 30.0))
    51.         return round(amount, 1)
    52.     return 0.0


    55. def generate_wind_speed(rng):
    56.     """生成风速数据（伽马分布）"""
    57.     speed = rng.gammavariate(2, 2)
    58.     speed = max(0.0, min(speed, 20.0))
    59.     return round(speed, 1)


    62. def get_weather_condition(temperature, precipitation, humidity, rng):
    63.     """根据天气参数判断天气状况"""
    64.     if precipitation > 0:
    65.         return 'Snow' if temperature < 3.0 else 'Rain'
    66.     if humidity >= 70:
    67.         return 'Cloudy'
    68.     if humidity <= 30:
    69.         return 'Sunny'
    70.     return rng.choice(['Partly Cloudy', 'Mostly Cloudy'])


    73. def generate_monthly_weather_data(year, month, rng=None):
    74.     """生成整月天气数据"""
    75.     if rng is None:
    76.         rng = random.Random()

    78.     _, num_days = calendar.monthrange(year, month)
    79.     data = []

    81.     for day in range(1, num_days + 1):
    82.         record_date = date(year, month, day)
    83.         temperature = generate_temperature(rng)
    84.         humidity = generate_humidity(rng)
    85.         precipitation = generate_precipitation(rng)
    86.         wind_speed = generate_wind_speed(rng)
    87.         condition = get_weather_condition(
    88.             temperature, precipitation, humidity, rng
    89.         )

    91.         data.append({
    92.             'record_date': record_date,
    93.             'temperature': temperature,
    94.             'humidity': humidity,
    95.             'precipitation': precipitation,
    96.             'wind_speed': wind_speed,
    97.             'weather_condition': condition
    98.         })

    100.     return data


    103. def insert_weather_data(data):
    104.     """批量插入天气数据到数据库"""
    105.     connection = pymysql.connect(**DB_CONFIG)
    106.     try:
    107.         with connection.cursor() as cursor:
    108.             sql = """
    109.                 INSERT INTO weather_data
    110.                 (record_date, temperature, humidity, precipitation, wind_speed, weather_condition)
    111.                 VALUES (%s, %s, %s, %s, %s, %s)
    112.             """
    113.             params = [
    114.                 (
    115.                     d['record_date'],
    116.                     d['temperature'],
    117.                     d['humidity'],
    118.                     d['precipitation'],
    119.                     d['wind_speed'],
    120.                     d['weather_condition']
    121.                 )
    122.                 for d in data
    123.             ]
    124.             cursor.executemany(sql, params)
    125.         connection.commit()
    126.         return len(data)
    127.     except Exception as e:
    128.         connection.rollback()
    129.         raise e
    130.     finally:
    131.         connection.close()


    134. def get_weather_data(year: int, month: int) -> list:
    135.     """从数据库获取指定年月的天气数据并转换为JSON兼容格式"""
    136.     connection = pymysql.connect(**DB_CONFIG)
    137.     try:
    138.         with connection.cursor() as cursor:
    139.             sql = """
    140.                 SELECT record_date, temperature, humidity,
    141.                        precipitation, wind_speed, weather_condition
    142.                 FROM weather_data
    143.                 WHERE YEAR(record_date) = %s AND MONTH(record_date) = %s
    144.                 ORDER BY record_date
    145.             """
    146.             cursor.execute(sql, (year, month))
    147.             results = cursor.fetchall()

    149.             # 转换日期和数值类型
    150.             for record in results:
    151.                 record['record_date'] = record['record_date'].isoformat()
    152.                 # 处理Decimal类型（如果存在）
    153.                 for key in ['temperature', 'precipitation', 'wind_speed']:
    154.                     if isinstance(record[key], Decimal):
    155.                         record[key] = float(record[key])
    156.             return results
    157.     finally:
    158.         connection.close()



    162. @app.post("/generate-data/")
    163. async def generate_weather_data(
    164.     year: int = Query(..., ge=2000, le=2100, description="年份"),
    165.     month: int = Query(..., ge=1, le=12, description="月份"),
    166.     seed: Optional[int] = Query(None, description="随机种子（可选）")
    167. ):
    168.     """生成并插入指定月份的天气数据"""
    169.     try:
    170.         rng = random.Random(seed) if seed else random.Random()
    171.         weather_data = generate_monthly_weather_data(year, month, rng)
    172.         inserted_count = insert_weather_data(weather_data)
    173.         return {
    174.             "status": "success",
    175.             "message": f"成功生成{inserted_count}条天气数据",
    176.             "year": year,
    177.             "month": month
    178.         }
    179.     except ValueError as e:
    180.         raise HTTPException(status_code=400, detail=str(e))
    181.     except Exception as e:
    182.         raise HTTPException(status_code=500, detail=f"数据库操作失败: {str(e)}")

    184. @app.get("/weather-data/")
    185. async def get_weather(
    186.     year: int = Query(..., ge=2000, le=2100, description="年份"),
    187.     month: int = Query(..., ge=1, le=12, description="月份")
    188. ):
    189.     """获取指定月份的天气数据"""
    190.     try:
    191.         data = get_weather_data(year, month)
    192.         return {
    193.             "status": "success",
    194.             "count": len(data),
    195.             "year": year,
    196.             "month": month,
    197.             "data": data
    198.         }
    199.     except Exception as e:
    200.         raise HTTPException(status_code=500, detail=f"数据查询失败: {str(e)}")

    202. if __name__ == "__main__":
    203.     import uvicorn
    204.     uvicorn.run(app, host="0.0.0.0", port=8000)
    复制代码
    step4:vue
    C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\Lottery.vue
    1. <template>
    2.   <div>
    3.     <div class="controls">
    4.       <input v-model.number="year" type="number" placeholder="年份">
    5.       <input v-model.number="month" type="number" placeholder="月份" min="1" max="12">
    6.       <button @click="fetchData">查询</button>
    7.       <button @click="generateData">生成数据</button>
    8.     </div>

    10.     <div class="charts-container">
    11.       <div class="chart-box">
    12.         <h3>每日温度柱状图</h3>
    13.         <div ref="barChart" class="chart"></div>
    14.       </div>

    16.       <div class="chart-box">
    17.         <h3>温度趋势折线图</h3>
    18.         <div ref="lineChart" class="chart"></div>
    19.       </div>

    21.       <div class="chart-box">
    22.         <h3>天气状况分布饼图</h3>
    23.         <div ref="pieChart" class="chart"></div>
    24.       </div>
    25.     </div>
    26.   </div>
    27. </template>

    29. <script>
    30. import * as d3 from 'd3';
    31. import axios from 'axios';

    33. export default {
    34.   data() {
    35.     return {
    36.       weatherData: [],
    37.       year: null,
    38.       month: null
    39.     };
    40.   },
    41.   methods: {
    42.     async fetchData() {
    43.       if (!this.validateInput()) return;

    45.       try {
    46.         const response = await axios.get('http://localhost:8000/weather-data/', {
    47.           params: { year: this.year, month: this.month }
    48.         });
    49.         this.weatherData = response.data.data;
    50.         this.redrawCharts();
    51.       } catch (error) {
    52.         this.handleError(error, '查询');
    53.       }
    54.     },

    56.     async generateData() {
    57.       if (!this.validateInput()) return;

    59.       try {
    60.         const response = await axios.post('http://localhost:8000/generate-data/', null, {
    61.           params: { year: this.year, month: this.month, seed: 42 },
    62.           headers: { 'Content-Type': 'application/json' }
    63.         });
    64.         alert(`生成成功：${response.data.message}`);
    65.         await this.fetchData();
    66.       } catch (error) {
    67.         this.handleError(error, '生成');
    68.       }
    69.     },

    71.     validateInput() {
    72.       if (!this.year || !this.month) {
    73.         alert('请填写年份和月份');
    74.         return false;
    75.       }
    76.       if (this.month < 1 || this.month > 12) {
    77.         alert('月份必须为1-12');
    78.         return false;
    79.       }
    80.       return true;
    81.     },

    83.     handleError(error, operation) {
    84.       console.error(`${operation}失败:`, error);
    85.       alert(`${operation}失败，请检查控制台`);
    86.     },

    88.     redrawCharts() {
    89.       this.clearCharts();
    90.       this.drawBarChart();
    91.       this.drawLineChart();
    92.       this.drawPieChart();
    93.     },

    95.     clearCharts() {
    96.       [this.$refs.barChart, this.$refs.lineChart, this.$refs.pieChart]
    97.         .forEach(ref => ref.innerHTML = '');
    98.     },

    100.     // 各图表绘制方法（保持原有实现，开头添加清除逻辑）
    101.     // 绘制柱状图
    102.     drawBarChart() {
    103.       const margin = { top: 30, right: 30, bottom: 50, left: 60 };
    104.       const width = 800 - margin.left - margin.right;
    105.       const height = 400 - margin.top - margin.bottom;

    107.       const svg = d3.select(this.$refs.barChart)
    108.         .append('svg')
    109.         .attr('width', width + margin.left + margin.right)
    110.         .attr('height', height + margin.top + margin.bottom)
    111.         .append('g')
    112.         .attr('transform', `translate(${margin.left},${margin.top})`);

    114.       // 创建比例尺
    115.       const x = d3.scaleBand()
    116.         .domain(this.weatherData.map(d => d.record_date))
    117.         .range([0, width])
    118.         .padding(0.2);

    120.       const y = d3.scaleLinear()
    121.         .domain([0, d3.max(this.weatherData, d => d.temperature)])
    122.         .range([height, 0]);

    124.       // 添加柱状
    125.       svg.selectAll("rect")
    126.         .data(this.weatherData)
    127.         .join("rect")
    128.           .attr("x", d => x(d.record_date))
    129.           .attr("y", d => y(d.temperature))
    130.           .attr("width", x.bandwidth())
    131.           .attr("height", d => height - y(d.temperature))
    132.           .attr("fill", "#4CAF50");

    134.       // 添加坐标轴
    135.       svg.append("g")
    136.         .attr("transform", `translate(0,${height})`)
    137.         .call(d3.axisBottom(x).tickValues(x.domain().filter((d,i) => !(i%5))));

    139.       svg.append("g")
    140.         .call(d3.axisLeft(y));

    142.       // 添加标签
    143.       svg.append("text")
    144.         .attr("transform", `translate(${width/2}, ${height + 40})`)
    145.         .style("text-anchor", "middle")
    146.         .text("日期");

    148.       svg.append("text")
    149.         .attr("transform", "rotate(-90)")
    150.         .attr("y", 0 - margin.left)
    151.         .attr("x",0 - (height / 2))
    152.         .attr("dy", "1em")
    153.         .style("text-anchor", "middle")
    154.         .text("温度(℃)");
    155.     },



    159.     // 绘制折线图
    160.     drawLineChart() {
    161.       const margin = { top: 30, right: 30, bottom: 50, left: 60 };
    162.       const width = 800 - margin.left - margin.right;
    163.       const height = 400 - margin.top - margin.bottom;

    165.       const svg = d3.select(this.$refs.lineChart)
    166.         .append('svg')
    167.         .attr('width', width + margin.left + margin.right)
    168.         .attr('height', height + margin.top + margin.bottom)
    169.         .append('g')
    170.         .attr('transform', `translate(${margin.left},${margin.top})`);

    172.       // 创建比例尺
    173.       const x = d3.scaleBand()
    174.         .domain(this.weatherData.map(d => d.record_date))
    175.         .range([0, width]);

    177.       const y = d3.scaleLinear()
    178.         .domain([d3.min(this.weatherData, d => d.temperature) - 2, d3.max(this.weatherData, d => d.temperature) + 2])
    179.         .range([height, 0]);

    181.       // 创建折线生成器
    182.       const line = d3.line()
    183.         .x(d => x(d.record_date) + x.bandwidth()/2)
    184.         .y(d => y(d.temperature));

    186.       // 绘制折线
    187.       svg.append("path")
    188.         .datum(this.weatherData)
    189.         .attr("fill", "none")
    190.         .attr("stroke", "#2196F3")
    191.         .attr("stroke-width", 2)
    192.         .attr("d", line);

    194.       // 添加坐标轴
    195.       svg.append("g")
    196.         .attr("transform", `translate(0,${height})`)
    197.         .call(d3.axisBottom(x).tickValues(x.domain().filter((d,i) => !(i%5))));

    199.       svg.append("g")
    200.         .call(d3.axisLeft(y));
    201.     },

    203.     // 绘制饼图
    204.     drawPieChart() {
    205.       const width = 400;
    206.       const height = 400;
    207.       const radius = Math.min(width, height) / 2;

    209.       const svg = d3.select(this.$refs.pieChart)
    210.         .append('svg')
    211.         .attr('width', width)
    212.         .attr('height', height)
    213.         .append('g')
    214.         .attr('transform', `translate(${width/2},${height/2})`);

    216.       // 统计天气状况
    217.       const data = Array.from(
    218.         d3.rollup(this.weatherData,
    219.           v => v.length,
    220.           d => d.weather_condition
    221.         ),
    222.         ([name, value]) => ({name, value})
    223.       );

    225.       // 创建颜色比例尺
    226.       const color = d3.scaleOrdinal()
    227.         .domain(data.map(d => d.name))
    228.         .range(d3.schemeCategory10);

    230.       // 饼图生成器
    231.       const pie = d3.pie()
    232.         .value(d => d.value);

    234.       // 弧形生成器
    235.       const arc = d3.arc()
    236.         .innerRadius(0)
    237.         .outerRadius(radius);

    239.       // 绘制扇形
    240.       const arcs = svg.selectAll("arc")
    241.         .data(pie(data))
    242.         .enter()
    243.         .append("g")
    244.         .attr("class", "arc");

    246.       arcs.append("path")
    247.         .attr("d", arc)
    248.         .attr("fill", d => color(d.data.name))
    249.         .attr("stroke", "white")
    250.         .style("stroke-width", "2px");

    252.       // 添加标签
    253.       arcs.append("text")
    254.         .attr("transform", d => `translate(${arc.centroid(d)})`)
    255.         .attr("text-anchor", "middle")
    256.         .text(d => d.data.name);
    257.     }


    260.   }
    261. };
    262. </script>

    264. <style>
    265. .controls {
    266.   padding: 1rem;
    267.   display: flex;
    268.   gap: 1rem;
    269.   align-items: center;
    270. }

    272. .controls input {
    273.   padding: 0.5rem;
    274.   border: 1px solid #ddd;
    275.   border-radius: 4px;
    276.   width: 120px;
    277. }

    279. .controls button {
    280.   padding: 0.5rem 1rem;
    281.   background: #2196F3;
    282.   color: white;
    283.   border: none;
    284.   border-radius: 4px;
    285.   cursor: pointer;
    286. }

    288. .controls button:hover {
    289.   background: #1976D2;
    290. }

    292. .charts-container {
    293.   display: flex;
    294.   flex-direction: column;
    295.   gap: 2rem;
    296.   padding: 2rem;
    297. }

    299. .chart-box {
    300.   background: white;
    301.   padding: 1rem;
    302.   border-radius: 8px;
    303.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    304.   width: 100%;
    305. }

    307. .chart-box h3 {
    308.   margin: 0 0 1rem;
    309.   color: #333;
    310. }

    312. .chart {
    313.   width: 100%;
    314.   height: 400px;
    315. }
    316. </style>
    复制代码
    end
    //我是分割线
    step101: old vue
    1. 下面的代码修改：1.年份 月份 改为可选，2.新增两个按钮，查询和添加3.查询和添加，需要做网络请求4.三个图表 需要垂直排列1. 生成天气数据（POST请求）：URL: http://localhost:8000/generate-data/?year=2024&month=3&seed=42方法: POSTHeaders:
    2.   Content-Type: application/json成功响应示例：{
    3.     "status": "success",
    4.     "message": "成功生成31条天气数据",
    5.     "year": 2024,
    6.     "month": 3
    7. }<template>  <div class="charts-container">    <div class="chart-box">      <h3>每日温度柱状图</h3>      <div ref="barChart" class="chart"></div>    </div>    <div class="chart-box">      <h3>温度趋势折线图</h3>      <div ref="lineChart" class="chart"></div>    </div>    <div class="chart-box">      <h3>天气状况分布饼图</h3>      <div ref="pieChart" class="chart"></div>    </div>  </div></template><script>import * as d3 from 'd3';import axios from 'axios';export default {  data() {    return {      weatherData: []    };  },  async mounted() {    try {      const response = await axios.get('http://localhost:8000/weather-data/?year=2024&month=4');      this.weatherData = response.data.data;      this.drawBarChart();      this.drawLineChart();      this.drawPieChart();    } catch (error) {      console.error('数据获取失败:', error);    }  },  methods: {    // 绘制柱状图    drawBarChart() {      const margin = { top: 30, right: 30, bottom: 50, left: 60 };      const width = 800 - margin.left - margin.right;      const height = 400 - margin.top - margin.bottom;      const svg = d3.select(this.$refs.barChart)        .append('svg')        .attr('width', width + margin.left + margin.right)        .attr('height', height + margin.top + margin.bottom)        .append('g')        .attr('transform', `translate(${margin.left},${margin.top})`);      // 创建比例尺      const x = d3.scaleBand()        .domain(this.weatherData.map(d => d.record_date))        .range([0, width])        .padding(0.2);      const y = d3.scaleLinear()        .domain([0, d3.max(this.weatherData, d => d.temperature)])        .range([height, 0]);      // 添加柱状      svg.selectAll("rect")        .data(this.weatherData)        .join("rect")          .attr("x", d => x(d.record_date))          .attr("y", d => y(d.temperature))          .attr("width", x.bandwidth())          .attr("height", d => height - y(d.temperature))          .attr("fill", "#4CAF50");      // 添加坐标轴      svg.append("g")        .attr("transform", `translate(0,${height})`)        .call(d3.axisBottom(x).tickValues(x.domain().filter((d,i) => !(i%5))));      svg.append("g")        .call(d3.axisLeft(y));      // 添加标签      svg.append("text")        .attr("transform", `translate(${width/2}, ${height + 40})`)        .style("text-anchor", "middle")        .text("日期");      svg.append("text")        .attr("transform", "rotate(-90)")        .attr("y", 0 - margin.left)        .attr("x",0 - (height / 2))        .attr("dy", "1em")        .style("text-anchor", "middle")        .text("温度(℃)");    },    // 绘制折线图    drawLineChart() {      const margin = { top: 30, right: 30, bottom: 50, left: 60 };      const width = 800 - margin.left - margin.right;      const height = 400 - margin.top - margin.bottom;      const svg = d3.select(this.$refs.lineChart)        .append('svg')        .attr('width', width + margin.left + margin.right)        .attr('height', height + margin.top + margin.bottom)        .append('g')        .attr('transform', `translate(${margin.left},${margin.top})`);      // 创建比例尺      const x = d3.scaleBand()        .domain(this.weatherData.map(d => d.record_date))        .range([0, width]);      const y = d3.scaleLinear()        .domain([d3.min(this.weatherData, d => d.temperature) - 2, d3.max(this.weatherData, d => d.temperature) + 2])        .range([height, 0]);      // 创建折线生成器      const line = d3.line()        .x(d => x(d.record_date) + x.bandwidth()/2)        .y(d => y(d.temperature));      // 绘制折线      svg.append("path")        .datum(this.weatherData)        .attr("fill", "none")        .attr("stroke", "#2196F3")        .attr("stroke-width", 2)        .attr("d", line);      // 添加坐标轴      svg.append("g")        .attr("transform", `translate(0,${height})`)        .call(d3.axisBottom(x).tickValues(x.domain().filter((d,i) => !(i%5))));      svg.append("g")        .call(d3.axisLeft(y));    },    // 绘制饼图    drawPieChart() {      const width = 400;      const height = 400;      const radius = Math.min(width, height) / 2;      const svg = d3.select(this.$refs.pieChart)        .append('svg')        .attr('width', width)        .attr('height', height)        .append('g')        .attr('transform', `translate(${width/2},${height/2})`);      // 统计天气状况      const data = Array.from(        d3.rollup(this.weatherData,          v => v.length,          d => d.weather_condition        ),        ([name, value]) => ({name, value})      );      // 创建颜色比例尺      const color = d3.scaleOrdinal()        .domain(data.map(d => d.name))        .range(d3.schemeCategory10);      // 饼图生成器      const pie = d3.pie()        .value(d => d.value);      // 弧形生成器      const arc = d3.arc()        .innerRadius(0)        .outerRadius(radius);      // 绘制扇形      const arcs = svg.selectAll("arc")        .data(pie(data))        .enter()        .append("g")        .attr("class", "arc");      arcs.append("path")        .attr("d", arc)        .attr("fill", d => color(d.data.name))        .attr("stroke", "white")        .style("stroke-width", "2px");      // 添加标签      arcs.append("text")        .attr("transform", d => `translate(${arc.centroid(d)})`)        .attr("text-anchor", "middle")        .text(d => d.data.name);    }  }};</script><style>.charts-container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));  gap: 2rem;  padding: 2rem;}.chart-box {  background: white;  padding: 1rem;  border-radius: 8px;  box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.chart-box h3 {  margin: 0 0 1rem;  color: #333;}.chart {  width: 100%;  height: 400px;}</style>
    复制代码
    step102：c++ 模拟数据
    C:\Users\wangrusheng\source\repos\CMakeProject1\CMakeProject1\CMakeProject1.cpp
    1. #include <iostream>
    2. #include <random>
    3. #include <vector>
    4. #include <string>
    5. #include <iomanip>
    6. #include <cmath>

    8. struct WeatherData {
    9.     int day;
    10.     double temperature;
    11.     int humidity;
    12.     double precipitation;
    13.     double wind_speed;
    14.     std::string condition;
    15. };

    17. // 生成温度（可指定范围）
    18. double generate_temperature(std::mt19937& gen, double min_temp = 10.0, double max_temp = 20.0) {
    19.     std::uniform_real_distribution<double> dist(min_temp, max_temp);
    20.     return std::round(dist(gen) * 10) / 10.0; // 保留1位小数
    21. }

    23. // 生成湿度（正态分布）
    24. int generate_humidity(std::mt19937& gen) {
    25.     std::normal_distribution<double> dist(60.0, 15.0);
    26.     double humidity = dist(gen);
    27.     humidity = std::clamp(humidity, 0.0, 100.0);
    28.     return static_cast<int>(std::round(humidity));
    29. }

    31. // 生成降水量（20%概率下雨）
    32. double generate_precipitation(std::mt19937& gen) {
    33.     std::bernoulli_distribution rain_dist(0.2);
    34.     if (rain_dist(gen)) {
    35.         std::exponential_distribution<double> amount_dist(1.0 / 5.0); // 平均5mm
    36.         double amount = amount_dist(gen);
    37.         amount = std::clamp(amount, 0.1, 30.0);
    38.         return std::round(amount * 10) / 10.0; // 保留1位小数
    39.     }
    40.     return 0.0;
    41. }

    43. // 生成风速（伽马分布）
    44. double generate_wind_speed(std::mt19937& gen) {
    45.     std::gamma_distribution<double> dist(2.0, 2.0);
    46.     double speed = dist(gen);
    47.     speed = std::clamp(speed, 0.0, 20.0);
    48.     return std::round(speed * 10) / 10.0; // 保留1位小数
    49. }

    51. // 生成天气状况
    52. std::string get_condition(double temp, double precip, int humidity) {
    53.     if (precip > 0) {
    54.         return (temp < 3.0) ? "Snow" : "Rain";
    55.     }

    57.     if (humidity >= 70) return "Cloudy";
    58.     if (humidity <= 30) return "Sunny";

    60.     // 随机选择部分多云或阴天
    61.     static std::vector<std::string> options = { "Partly Cloudy", "Mostly Cloudy" };
    62.     std::uniform_int_distribution<int> dist(0, 1);
    63.     std::mt19937 temp_gen(std::random_device{}());
    64.     return options[dist(temp_gen)];
    65. }

    67. // 生成完整月份数据
    68. std::vector<WeatherData> generate_april_data(std::mt19937& gen) {
    69.     std::vector<WeatherData> data;
    70.     for (int day = 1; day <= 30; ++day) {
    71.         WeatherData wd;
    72.         wd.day = day;
    73.         wd.temperature = generate_temperature(gen);
    74.         wd.humidity = generate_humidity(gen);
    75.         wd.precipitation = generate_precipitation(gen);
    76.         wd.wind_speed = generate_wind_speed(gen);
    77.         wd.condition = get_condition(wd.temperature, wd.precipitation, wd.humidity);
    78.         data.push_back(wd);
    79.     }
    80.     return data;
    81. }

    83. int main() {
    84.     // 初始化随机数生成器
    85.     std::random_device rd;
    86.     std::mt19937 gen(rd());

    88.     // 生成数据
    89.     auto weather_data = generate_april_data(gen);

    91.     // 输出CSV格式
    92.     std::cout << "Day,Temperature,Humidity,Precipitation,Wind Speed,Condition\n";
    93.     for (const auto& wd : weather_data) {
    94.         std::cout << wd.day << ","
    95.             << std::fixed << std::setprecision(1) << wd.temperature << "°C,"
    96.             << wd.humidity << "%,"
    97.             << wd.precipitation << "mm,"
    98.             << wd.wind_speed << "m/s,"
    99.             << wd.condition << "\n";
    100.     }

    102.     return 0;
    103. }
    复制代码
    到此这篇关于vue+d3js+fastapi实现天气柱状图折线图饼图的示例的文章就介绍到这了,更多相关vue+d3js+fastapi柱状图折线图饼图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/javascript/3393976ap.htm
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表