From c70f9ff81e2b7dafe014be504ab9e424bcc84c26 Mon Sep 17 00:00:00 2001 From: wobeitaoleshigexuruo Date: Fri, 7 Jun 2024 20:54:53 +0800 Subject: [PATCH] style --- index.html | 4 +- web/data/aqi_data.py | 2 +- web/data/aqi_pie.py | 2 +- web/data/data.js | 218 ++++++++++++++++++++++++++++--------------- web/data/hum_now.py | 2 +- web/data/temp_now.py | 2 +- web/data/wind.py | 2 + web/js/chart31.js | 10 +- web/js/chart32.js | 9 +- web/js/chart33.js | 7 +- web/js/chart4.js | 7 +- web/js/chart5.js | 3 + 12 files changed, 174 insertions(+), 94 deletions(-) diff --git a/index.html b/index.html index f0970de..329c49e 100644 --- a/index.html +++ b/index.html @@ -83,8 +83,8 @@
    -
  • 43°c
    • -
  • 51135mm
    • +
  • 43 C
    • +
  • 51135 mm
diff --git a/web/data/aqi_data.py b/web/data/aqi_data.py index e7a0ce6..9bbba65 100644 --- a/web/data/aqi_data.py +++ b/web/data/aqi_data.py @@ -13,7 +13,7 @@ def aqi_data(session): data1.append( { "name": row[0], - "value": [idx + 1, float(row[1]), row[2]], + "value": [[idx + 1, float(row[1]), row[2]]], } ) # Serialize the list of dictionaries to JSON diff --git a/web/data/aqi_pie.py b/web/data/aqi_pie.py index 38d883c..54330a5 100644 --- a/web/data/aqi_pie.py +++ b/web/data/aqi_pie.py @@ -10,7 +10,7 @@ def aqi_pie(session): data = session.execute(query2).fetchall() color_map = { - "优": "#065aab", + "优": "#06c8ab", "良": "#066eab", "轻度污染": "#0696ab", } diff --git a/web/data/data.js b/web/data/data.js index fb48a2d..bb6b41c 100644 --- a/web/data/data.js +++ b/web/data/data.js @@ -86,7 +86,12 @@ const Chart4_Data = { "永川", "云阳", "北碚", - "垫江" + "垫江", + "铜梁", + "奉节", + "潼南", + "沙坪坝", + "开州" ], "y": [ 25.9, @@ -95,7 +100,12 @@ const Chart4_Data = { 25.1, 25.1, 24.9, - 24.9 + 24.9, + 24.9, + 24.8, + 24.8, + 24.7, + 24.6 ] } @@ -107,7 +117,12 @@ const Chart5_Data = { "万州", "开州", "酉阳", - "丰都" + "丰都", + "合川", + "石柱", + "奉节", + "綦江", + "云阳" ], "y": [ 94.0, @@ -116,7 +131,12 @@ const Chart5_Data = { 81.0, 79.0, 78.0, - 77.0 + 77.0, + 77.0, + 77.0, + 76.0, + 76.0, + 75.0 ] } @@ -124,185 +144,231 @@ const Chart6_Data = [ { "name": "奉节", "value": [ - 1, - 33.0, - "优" + [ + 1, + 33.0, + "优" + ] ] }, { "name": "黔江", "value": [ - 2, - 33.0, - "优" + [ + 2, + 33.0, + "优" + ] ] }, { "name": "巴南", "value": [ - 3, - 37.0, - "优" + [ + 3, + 37.0, + "优" + ] ] }, { "name": "北碚", "value": [ - 4, - 40.0, - "优" + [ + 4, + 40.0, + "优" + ] ] }, { "name": "城口", "value": [ - 5, - 38.0, - "优" + [ + 5, + 38.0, + "优" + ] ] }, { "name": "大足", "value": [ - 6, - 58.0, - "良" + [ + 6, + 58.0, + "良" + ] ] }, { "name": "合川", "value": [ - 7, - 40.0, - "优" + [ + 7, + 40.0, + "优" + ] ] }, { "name": "江津", "value": [ - 8, - 37.0, - "优" + [ + 8, + 37.0, + "优" + ] ] }, { "name": "开州", "value": [ - 9, - 31.0, - "优" + [ + 9, + 31.0, + "优" + ] ] }, { "name": "荣昌", "value": [ - 10, - 36.0, - "优" + [ + 10, + 36.0, + "优" + ] ] }, { "name": "沙坪坝", "value": [ - 11, - 44.0, - "优" + [ + 11, + 44.0, + "优" + ] ] }, { "name": "铜梁", "value": [ - 12, - 52.0, - "良" + [ + 12, + 52.0, + "良" + ] ] }, { "name": "万盛", "value": [ - 13, - 37.0, - "优" + [ + 13, + 37.0, + "优" + ] ] }, { "name": "巫山", "value": [ - 14, - 33.0, - "优" + [ + 14, + 33.0, + "优" + ] ] }, { "name": "巫溪", "value": [ - 15, - 33.0, - "优" + [ + 15, + 33.0, + "优" + ] ] }, { "name": "秀山", "value": [ - 16, - 8.0, - "优" + [ + 16, + 8.0, + "优" + ] ] }, { "name": "永川", "value": [ - 17, - 38.0, - "优" + [ + 17, + 38.0, + "优" + ] ] }, { "name": "酉阳", "value": [ - 18, - 8.0, - "优" + [ + 18, + 8.0, + "优" + ] ] }, { "name": "渝北", "value": [ - 19, - 38.0, - "优" + [ + 19, + 38.0, + "优" + ] ] }, { "name": "云阳", "value": [ - 20, - 33.0, - "优" + [ + 20, + 33.0, + "优" + ] ] }, { "name": "潼南", "value": [ - 21, - 44.0, - "优" + [ + 21, + 44.0, + "优" + ] ] }, { "name": "璧山", "value": [ - 22, - 52.0, - "良" + [ + 22, + 52.0, + "良" + ] ] }, { "name": "綦江", "value": [ - 23, - 53.0, - "良" + [ + 23, + 53.0, + "良" + ] ] } ] @@ -382,7 +448,7 @@ const Chart32_Data = [ "云阳", "潼南" ], - "color": "#065aab" + "color": "#06c8ab" }, { "value": 4, @@ -417,7 +483,7 @@ const Chart33_Data = [ 2.1, 2.3 ], - "color": "#065aab" + "color": "#0656bb" }, { "value": 17, @@ -498,7 +564,7 @@ const Chart33_Data = [ "detail": [ 3.8 ], - "color": "#065aab" + "color": "#9796cb" } ] diff --git a/web/data/hum_now.py b/web/data/hum_now.py index e717693..a20e954 100644 --- a/web/data/hum_now.py +++ b/web/data/hum_now.py @@ -4,7 +4,7 @@ from sqlalchemy import text def hum_now(session): - query2 = text('SELECT city_name,humidity FROM tem_now_analyse ORDER BY humidity DESC LIMIT 7') + query2 = text('SELECT city_name,humidity FROM tem_now_analyse ORDER BY humidity DESC LIMIT 12') data = session.execute(query2).fetchall() x = [] y = [] diff --git a/web/data/temp_now.py b/web/data/temp_now.py index 96ce36b..b90bc6d 100644 --- a/web/data/temp_now.py +++ b/web/data/temp_now.py @@ -4,7 +4,7 @@ from sqlalchemy import text def tem_now(session): - query2 = text('SELECT city_name,temperature FROM tem_now_analyse ORDER BY temperature DESC LIMIT 7') + query2 = text('SELECT city_name,temperature FROM tem_now_analyse ORDER BY temperature DESC LIMIT 12') data = session.execute(query2).fetchall() x = [] y = [] diff --git a/web/data/wind.py b/web/data/wind.py index 903416c..459e59c 100644 --- a/web/data/wind.py +++ b/web/data/wind.py @@ -15,6 +15,8 @@ def wind(session): 0: "#065aab", 2: "#06c8ab", 1: "#0696ab", + 3: "#0656bb", + 4: "#9796cb", } info_map = {} diff --git a/web/js/chart31.js b/web/js/chart31.js index 250782c..99eb688 100644 --- a/web/js/chart31.js +++ b/web/js/chart31.js @@ -16,14 +16,17 @@ function echarts_31() { tooltip: { trigger: 'item', position: function (p) { //其中p为当前鼠标的位置 - return [p[0] + 10, p[1] - 10]; + return [p[0] + 60, p[1] - 100]; }, formatter: function (params) { var dataItem = data.find(item => item.name === params.name); var value = `${dataItem.name}: ${params.value} (${params.percent}%)
`; - dataItem.weather.forEach((v) => { - value += `${v}
`; + dataItem.weather.forEach((v, index) => { + value += `${v} `; + if (index % 2 === 1) { + value += '
'; + } }); return value; // 动态遍历数据显示地区、天气和百分比 @@ -39,7 +42,6 @@ function echarts_31() { color: 'rgba(255,255,255,.5)', fontSize: '12', }, - data: ['晴天', '多云', '小雨', '大雨', '阴天', '雷阵雨', '雾'] }, series: [ { diff --git a/web/js/chart32.js b/web/js/chart32.js index 73d1ae6..e83d2f5 100644 --- a/web/js/chart32.js +++ b/web/js/chart32.js @@ -18,14 +18,17 @@ function echarts_32() { tooltip: { trigger: 'item', position: function (p) { //其中p为当前鼠标的位置 - return [p[0] + 10, p[1] - 10]; + return [p[0] + 60, p[1] - 10]; }, formatter: function (params) { var dataItem = data.find(item => item.name === params.name); var value = `${dataItem.name}: ${params.value} (${params.percent}%)
`; - dataItem.degree.forEach((v) => { - value += `${v}
`; + dataItem.degree.forEach((v, index) => { + value += `${v} `; + if (index % 2 === 1) { + value += '
'; + } }); return value; // 动态遍历数据显示地区、天气和百分比 diff --git a/web/js/chart33.js b/web/js/chart33.js index c4b5cd3..d5d6650 100644 --- a/web/js/chart33.js +++ b/web/js/chart33.js @@ -6,7 +6,7 @@ function echarts_33() { // 指定图表的配置项和数据 option = { title: { - text: '空气质量地区排行', + text: '风速地区排行', // subtext: '数据来源：环保局', left: 'center', textStyle: { @@ -23,8 +23,9 @@ function echarts_33() { var dataItem = data.find(item => item.name === params.name); var value = `${dataItem.name}: ${params.value} (${params.percent}%)
`; - dataItem.degree.forEach((v) => { - value += `${v}
`; + dataItem.degree.forEach((v, index) => { + var detail = dataItem.detail[index]; + value += `${v}: ${detail} m/s
`; }); return value; // 动态遍历数据显示地区、天气和百分比 diff --git a/web/js/chart4.js b/web/js/chart4.js index 948362f..2352994 100644 --- a/web/js/chart4.js +++ b/web/js/chart4.js @@ -53,11 +53,14 @@ function echarts_4() { }, yAxis: { type: 'value', + interval: 0.3, // 指定刻度间隔 + min:24.5, + max:26, axisLabel: { - formatter: '{value}°C' // Add the °C unit to the formatter + formatter: '{value}°C', // Add the °C unit to the formatter + }, axisLabel: { - interval: 0, // rotate:50, show: true, splitNumber: 15, diff --git a/web/js/chart5.js b/web/js/chart5.js index f9152dd..f6e47f3 100644 --- a/web/js/chart5.js +++ b/web/js/chart5.js @@ -41,6 +41,9 @@ function echarts_5() { }, }, yAxis: { + interval: 5, // 指定刻度间隔 + min:70, + max:100, type: 'value', axisLabel: {