style
This commit is contained in:
parent
8af9dc3f9b
commit
c70f9ff81e
@ -83,8 +83,8 @@
|
|||||||
<div class="bar">
|
<div class="bar">
|
||||||
<div class="barbox">
|
<div class="barbox">
|
||||||
<ul class="clearfix">
|
<ul class="clearfix">
|
||||||
<li class="pulll_left counter">43°c</li>
|
<li class="pulll_left counter">43 C</li>
|
||||||
<li class="pulll_left counter">51135mm</li>
|
<li class="pulll_left counter">51135 mm</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="barbox2">
|
<div class="barbox2">
|
||||||
|
@ -13,7 +13,7 @@ def aqi_data(session):
|
|||||||
data1.append(
|
data1.append(
|
||||||
{
|
{
|
||||||
"name": row[0],
|
"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
|
# Serialize the list of dictionaries to JSON
|
||||||
|
@ -10,7 +10,7 @@ def aqi_pie(session):
|
|||||||
data = session.execute(query2).fetchall()
|
data = session.execute(query2).fetchall()
|
||||||
|
|
||||||
color_map = {
|
color_map = {
|
||||||
"优": "#065aab",
|
"优": "#06c8ab",
|
||||||
"良": "#066eab",
|
"良": "#066eab",
|
||||||
"轻度污染": "#0696ab",
|
"轻度污染": "#0696ab",
|
||||||
}
|
}
|
||||||
|
218
web/data/data.js
218
web/data/data.js
@ -86,7 +86,12 @@ const Chart4_Data = {
|
|||||||
"永川",
|
"永川",
|
||||||
"云阳",
|
"云阳",
|
||||||
"北碚",
|
"北碚",
|
||||||
"垫江"
|
"垫江",
|
||||||
|
"铜梁",
|
||||||
|
"奉节",
|
||||||
|
"潼南",
|
||||||
|
"沙坪坝",
|
||||||
|
"开州"
|
||||||
],
|
],
|
||||||
"y": [
|
"y": [
|
||||||
25.9,
|
25.9,
|
||||||
@ -95,7 +100,12 @@ const Chart4_Data = {
|
|||||||
25.1,
|
25.1,
|
||||||
25.1,
|
25.1,
|
||||||
24.9,
|
24.9,
|
||||||
24.9
|
24.9,
|
||||||
|
24.9,
|
||||||
|
24.8,
|
||||||
|
24.8,
|
||||||
|
24.7,
|
||||||
|
24.6
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -107,7 +117,12 @@ const Chart5_Data = {
|
|||||||
"万州",
|
"万州",
|
||||||
"开州",
|
"开州",
|
||||||
"酉阳",
|
"酉阳",
|
||||||
"丰都"
|
"丰都",
|
||||||
|
"合川",
|
||||||
|
"石柱",
|
||||||
|
"奉节",
|
||||||
|
"綦江",
|
||||||
|
"云阳"
|
||||||
],
|
],
|
||||||
"y": [
|
"y": [
|
||||||
94.0,
|
94.0,
|
||||||
@ -116,7 +131,12 @@ const Chart5_Data = {
|
|||||||
81.0,
|
81.0,
|
||||||
79.0,
|
79.0,
|
||||||
78.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": "奉节",
|
"name": "奉节",
|
||||||
"value": [
|
"value": [
|
||||||
1,
|
[
|
||||||
33.0,
|
1,
|
||||||
"优"
|
33.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "黔江",
|
"name": "黔江",
|
||||||
"value": [
|
"value": [
|
||||||
2,
|
[
|
||||||
33.0,
|
2,
|
||||||
"优"
|
33.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "巴南",
|
"name": "巴南",
|
||||||
"value": [
|
"value": [
|
||||||
3,
|
[
|
||||||
37.0,
|
3,
|
||||||
"优"
|
37.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "北碚",
|
"name": "北碚",
|
||||||
"value": [
|
"value": [
|
||||||
4,
|
[
|
||||||
40.0,
|
4,
|
||||||
"优"
|
40.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "城口",
|
"name": "城口",
|
||||||
"value": [
|
"value": [
|
||||||
5,
|
[
|
||||||
38.0,
|
5,
|
||||||
"优"
|
38.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "大足",
|
"name": "大足",
|
||||||
"value": [
|
"value": [
|
||||||
6,
|
[
|
||||||
58.0,
|
6,
|
||||||
"良"
|
58.0,
|
||||||
|
"良"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "合川",
|
"name": "合川",
|
||||||
"value": [
|
"value": [
|
||||||
7,
|
[
|
||||||
40.0,
|
7,
|
||||||
"优"
|
40.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "江津",
|
"name": "江津",
|
||||||
"value": [
|
"value": [
|
||||||
8,
|
[
|
||||||
37.0,
|
8,
|
||||||
"优"
|
37.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "开州",
|
"name": "开州",
|
||||||
"value": [
|
"value": [
|
||||||
9,
|
[
|
||||||
31.0,
|
9,
|
||||||
"优"
|
31.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "荣昌",
|
"name": "荣昌",
|
||||||
"value": [
|
"value": [
|
||||||
10,
|
[
|
||||||
36.0,
|
10,
|
||||||
"优"
|
36.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "沙坪坝",
|
"name": "沙坪坝",
|
||||||
"value": [
|
"value": [
|
||||||
11,
|
[
|
||||||
44.0,
|
11,
|
||||||
"优"
|
44.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "铜梁",
|
"name": "铜梁",
|
||||||
"value": [
|
"value": [
|
||||||
12,
|
[
|
||||||
52.0,
|
12,
|
||||||
"良"
|
52.0,
|
||||||
|
"良"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "万盛",
|
"name": "万盛",
|
||||||
"value": [
|
"value": [
|
||||||
13,
|
[
|
||||||
37.0,
|
13,
|
||||||
"优"
|
37.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "巫山",
|
"name": "巫山",
|
||||||
"value": [
|
"value": [
|
||||||
14,
|
[
|
||||||
33.0,
|
14,
|
||||||
"优"
|
33.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "巫溪",
|
"name": "巫溪",
|
||||||
"value": [
|
"value": [
|
||||||
15,
|
[
|
||||||
33.0,
|
15,
|
||||||
"优"
|
33.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "秀山",
|
"name": "秀山",
|
||||||
"value": [
|
"value": [
|
||||||
16,
|
[
|
||||||
8.0,
|
16,
|
||||||
"优"
|
8.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "永川",
|
"name": "永川",
|
||||||
"value": [
|
"value": [
|
||||||
17,
|
[
|
||||||
38.0,
|
17,
|
||||||
"优"
|
38.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "酉阳",
|
"name": "酉阳",
|
||||||
"value": [
|
"value": [
|
||||||
18,
|
[
|
||||||
8.0,
|
18,
|
||||||
"优"
|
8.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "渝北",
|
"name": "渝北",
|
||||||
"value": [
|
"value": [
|
||||||
19,
|
[
|
||||||
38.0,
|
19,
|
||||||
"优"
|
38.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "云阳",
|
"name": "云阳",
|
||||||
"value": [
|
"value": [
|
||||||
20,
|
[
|
||||||
33.0,
|
20,
|
||||||
"优"
|
33.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "潼南",
|
"name": "潼南",
|
||||||
"value": [
|
"value": [
|
||||||
21,
|
[
|
||||||
44.0,
|
21,
|
||||||
"优"
|
44.0,
|
||||||
|
"优"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "璧山",
|
"name": "璧山",
|
||||||
"value": [
|
"value": [
|
||||||
22,
|
[
|
||||||
52.0,
|
22,
|
||||||
"良"
|
52.0,
|
||||||
|
"良"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "綦江",
|
"name": "綦江",
|
||||||
"value": [
|
"value": [
|
||||||
23,
|
[
|
||||||
53.0,
|
23,
|
||||||
"良"
|
53.0,
|
||||||
|
"良"
|
||||||
|
]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -382,7 +448,7 @@ const Chart32_Data = [
|
|||||||
"云阳",
|
"云阳",
|
||||||
"潼南"
|
"潼南"
|
||||||
],
|
],
|
||||||
"color": "#065aab"
|
"color": "#06c8ab"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 4,
|
"value": 4,
|
||||||
@ -417,7 +483,7 @@ const Chart33_Data = [
|
|||||||
2.1,
|
2.1,
|
||||||
2.3
|
2.3
|
||||||
],
|
],
|
||||||
"color": "#065aab"
|
"color": "#0656bb"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 17,
|
"value": 17,
|
||||||
@ -498,7 +564,7 @@ const Chart33_Data = [
|
|||||||
"detail": [
|
"detail": [
|
||||||
3.8
|
3.8
|
||||||
],
|
],
|
||||||
"color": "#065aab"
|
"color": "#9796cb"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ from sqlalchemy import text
|
|||||||
|
|
||||||
|
|
||||||
def hum_now(session):
|
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()
|
data = session.execute(query2).fetchall()
|
||||||
x = []
|
x = []
|
||||||
y = []
|
y = []
|
||||||
|
@ -4,7 +4,7 @@ from sqlalchemy import text
|
|||||||
|
|
||||||
|
|
||||||
def tem_now(session):
|
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()
|
data = session.execute(query2).fetchall()
|
||||||
x = []
|
x = []
|
||||||
y = []
|
y = []
|
||||||
|
@ -15,6 +15,8 @@ def wind(session):
|
|||||||
0: "#065aab",
|
0: "#065aab",
|
||||||
2: "#06c8ab",
|
2: "#06c8ab",
|
||||||
1: "#0696ab",
|
1: "#0696ab",
|
||||||
|
3: "#0656bb",
|
||||||
|
4: "#9796cb",
|
||||||
}
|
}
|
||||||
|
|
||||||
info_map = {}
|
info_map = {}
|
||||||
|
@ -16,14 +16,17 @@ function echarts_31() {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
position: function (p) { //其中p为当前鼠标的位置
|
position: function (p) { //其中p为当前鼠标的位置
|
||||||
return [p[0] + 10, p[1] - 10];
|
return [p[0] + 60, p[1] - 100];
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var dataItem = data.find(item => item.name === params.name);
|
var dataItem = data.find(item => item.name === params.name);
|
||||||
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
||||||
|
|
||||||
dataItem.weather.forEach((v) => {
|
dataItem.weather.forEach((v, index) => {
|
||||||
value += `${v} <br>`;
|
value += `${v} `;
|
||||||
|
if (index % 2 === 1) {
|
||||||
|
value += '<br>';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return value; // 动态遍历数据显示地区、天气和百分比
|
return value; // 动态遍历数据显示地区、天气和百分比
|
||||||
@ -39,7 +42,6 @@ function echarts_31() {
|
|||||||
color: 'rgba(255,255,255,.5)',
|
color: 'rgba(255,255,255,.5)',
|
||||||
fontSize: '12',
|
fontSize: '12',
|
||||||
},
|
},
|
||||||
data: ['晴天', '多云', '小雨', '大雨', '阴天', '雷阵雨', '雾']
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -18,14 +18,17 @@ function echarts_32() {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
position: function (p) { //其中p为当前鼠标的位置
|
position: function (p) { //其中p为当前鼠标的位置
|
||||||
return [p[0] + 10, p[1] - 10];
|
return [p[0] + 60, p[1] - 10];
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var dataItem = data.find(item => item.name === params.name);
|
var dataItem = data.find(item => item.name === params.name);
|
||||||
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
||||||
|
|
||||||
dataItem.degree.forEach((v) => {
|
dataItem.degree.forEach((v, index) => {
|
||||||
value += `${v} <br>`;
|
value += `${v} `;
|
||||||
|
if (index % 2 === 1) {
|
||||||
|
value += '<br>';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return value; // 动态遍历数据显示地区、天气和百分比
|
return value; // 动态遍历数据显示地区、天气和百分比
|
||||||
|
@ -6,7 +6,7 @@ function echarts_33() {
|
|||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
option = {
|
option = {
|
||||||
title: {
|
title: {
|
||||||
text: '空气质量地区排行',
|
text: '风速地区排行',
|
||||||
// subtext: '数据来源:环保局',
|
// subtext: '数据来源:环保局',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -23,8 +23,9 @@ function echarts_33() {
|
|||||||
var dataItem = data.find(item => item.name === params.name);
|
var dataItem = data.find(item => item.name === params.name);
|
||||||
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;
|
||||||
|
|
||||||
dataItem.degree.forEach((v) => {
|
dataItem.degree.forEach((v, index) => {
|
||||||
value += `${v} <br>`;
|
var detail = dataItem.detail[index];
|
||||||
|
value += `${v}: ${detail} m/s <br>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
return value; // 动态遍历数据显示地区、天气和百分比
|
return value; // 动态遍历数据显示地区、天气和百分比
|
||||||
|
@ -53,11 +53,14 @@ function echarts_4() {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
interval: 0.3, // 指定刻度间隔
|
||||||
|
min:24.5,
|
||||||
|
max:26,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}°C' // Add the °C unit to the formatter
|
formatter: '{value}°C', // Add the °C unit to the formatter
|
||||||
|
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
|
||||||
// rotate:50,
|
// rotate:50,
|
||||||
show: true,
|
show: true,
|
||||||
splitNumber: 15,
|
splitNumber: 15,
|
||||||
|
@ -41,6 +41,9 @@ function echarts_5() {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
interval: 5, // 指定刻度间隔
|
||||||
|
min:70,
|
||||||
|
max:100,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
Loading…
Reference in New Issue
Block a user