From 5dfc68fd473b8ac4bb1d2315abe8daaa8aa8a2ee Mon Sep 17 00:00:00 2001 From: HuangHai <10402852@qq.com> Date: Thu, 11 Sep 2025 14:34:32 +0800 Subject: [PATCH] 'commit' --- static/index.html | 7 ++-- static/js/data/index.js | 90 +++++++++++++++++++++++++++++++++++++++++ static/js/index.js | 46 +++++++-------------- 3 files changed, 108 insertions(+), 35 deletions(-) create mode 100644 static/js/data/index.js diff --git a/static/index.html b/static/index.html index 8159459..8dfb237 100644 --- a/static/index.html +++ b/static/index.html @@ -4,7 +4,7 @@ 大数据可视化系统数据分析通用模版 - + @@ -38,7 +38,7 @@
义务教育规模发展预测
- @@ -166,9 +166,10 @@ - + + \ No newline at end of file diff --git a/static/js/data/index.js b/static/js/data/index.js new file mode 100644 index 0000000..89845d2 --- /dev/null +++ b/static/js/data/index.js @@ -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, + ], + }, + ], +}; diff --git a/static/js/index.js b/static/js/index.js index 67300c0..e77ed40 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -29,40 +29,22 @@ $(function () { dataType: "json", url: "/RuYuanZaiYuan/school/preschool/chart", success: function (option) { - console.log(option); - 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) => { + option_1_1.series.forEach((seriesItem, index) => { seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" }; }); - - - - myChart.setOption(option); + option_1_1.xAxis[0].data = [ + "2013", + "2016", + "2017", + "2018", + "2019", + "2020", + "2021", + "2022", + "2023", + "2024", + ]; + myChart.setOption(option_1_1); window.addEventListener("resize", function () { myChart.resize(); });