huanghai/YunNanProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-11 14:34:32 +08:00
parent 40a7a8fb7a
commit 5dfc68fd47
3 changed files with 108 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
static/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>大数据可视化系统数据分析通用模版</title> <title>大数据可视化系统数据分析通用模版</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/index.css" /> <link rel="stylesheet" href="css/index.css" />
</head> </head>
@@ -166,9 +166,10 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- <script type="text/javascript" src="js/echarts.min.js"></script> --> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script> <script type="text/javascript" src="https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
<script language="JavaScript" src="js/index.js"></script> <script language="JavaScript" src="js/index.js"></script>
<script language="JavaScript" src="js/data/index.js"></script>
</body> </body>
</html> </html>

90
static/js/data/index.js Normal file
View File

@@ -0,0 +1,90 @@
option_1_1 = {
grid: { left: 0, right: 0, top: 40, bottom: 10, containLabel: true },
textStyle: { color: "#fff" },
tooltip: {
trigger: "axis",
axisPointer: { type: "cross", crossStyle: { color: "#999" } },
textStyle: { color: "#fff" },
backgroundColor: "rgba(96,98,102,0.8)",
borderColor: "rgba(255,255,255,0.3)",
borderWidth: 1,
},
legend: {
data: ["城区", "镇区", "乡村", "总入园数", "2022年基数"],
top: 0,
textStyle: { color: "#fff" },
icon: "roundRect",
itemWidth: 12,
itemHeight: 12,
},
xAxis: [
{
type: "category",
data: [
],
axisPointer: { type: "shadow" },
axisLine: { lineStyle: { color: "#fff" } },
axisLabel: { color: "#fff" },
nameTextStyle: { color: "#fff" },
},
],
yAxis: [
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
],
series: [
{
name: "城区",
type: "bar",
data: [
74.7516, 73.3111, 74.7406, 76.2088, 71.4245, 83.2045, 71.4945, 66.099,
60.236, 50.1589,
],
itemStyle: { borderRadius: [6, 6, 0, 0] },
},
{
name: "镇区",
type: "bar",
data: [
13.302, 13.9083, 15.4038, 16.3225, 16.3852, 19.2568, 17.8375, 17.4047,
16.0644, 13.5613,
],
itemStyle: { borderRadius: [6, 6, 0, 0] },
},
{
name: "乡村",
type: "bar",
data: [
25.536, 24.6128, 24.8226, 25.2409, 22.1658, 26.4498, 23.5793, 22.1677,
20.5735, 17.7902,
],
itemStyle: { borderRadius: [6, 6, 0, 0] },
},
{
name: "总入园数",
type: "line",
yAxisIndex: 1,
data: [
113.5896, 111.8322, 114.967, 117.7722, 109.9755, 128.9111, 112.9113,
105.6714, 96.8739, 81.5104,
],
},
{
name: "2022年基数",
type: "line",
yAxisIndex: 1,
data: [
null,
null,
null,
null,
null,
null,
null,
105.6714,
105.6714,
105.6714,
],
},
],
};

46
static/js/index.js
View File

@@ -29,40 +29,22 @@ $(function () {
dataType: "json", dataType: "json",
url: "/RuYuanZaiYuan/school/preschool/chart", url: "/RuYuanZaiYuan/school/preschool/chart",
success: function (option) { success: function (option) {
console.log(option); option_1_1.series.forEach((seriesItem, index) => {
option.grid = {
left: 0,
right: 0,
top: 30,
bottom: 0,
containLabel: true,
};
option.textStyle = {
color: "#fff",
};
option.tooltip = {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: { color: "#999" },
},
textStyle: { color: "#fff" },
// 1. 背景色
backgroundColor: "rgba(96,98,102,0.8)", // 半透明黑
// 2. 边框
borderColor: "rgba(255,255,255,0.3)",
borderWidth: 1,
};
option.series.forEach((seriesItem, index) => {
seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" }; seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" };
}); });
option_1_1.xAxis[0].data = [
"2013",
"2016",
myChart.setOption(option); "2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
];
myChart.setOption(option_1_1);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });