Compare commits
2 Commits
c161865599
...
9ab077ea3b
| Author | SHA1 | Date | |
|---|---|---|---|
| 9ab077ea3b | |||
| 5dfc68fd47 |
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>大数据可视化系统数据分析通用模版</title>
|
||||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
</head>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div class="alltitle">
|
||||
义务教育规模发展预测
|
||||
</div>
|
||||
<select class="right-content">
|
||||
<select class="right-content">
|
||||
<option value="cz">初中</option>
|
||||
<option value="gz">高中</option>
|
||||
</select>
|
||||
@@ -166,9 +166,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</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 language="JavaScript" src="js/index.js"></script>
|
||||
<script language="JavaScript" src="js/data/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
90
static/js/data/index.js
Normal file
90
static/js/data/index.js
Normal 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,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user