329 lines
8.2 KiB
JavaScript
329 lines
8.2 KiB
JavaScript
$(window).load(function () {
|
|
$(".loading").fadeOut();
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
var whei = $(window).width();
|
|
$("html").css({ fontSize: whei / 20 });
|
|
$(window).resize(function () {
|
|
var whei = $(window).width();
|
|
$("html").css({ fontSize: whei / 20 });
|
|
});
|
|
});
|
|
|
|
$(window).load(function () {
|
|
$(".loading").fadeOut();
|
|
});
|
|
|
|
$(function () {
|
|
echarts_1();
|
|
echarts_2();
|
|
// echarts_3();
|
|
|
|
function echarts_1() {
|
|
var myChart = echarts.init(document.getElementById("echarts01"));
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
async: false,
|
|
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) => {
|
|
seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" };
|
|
});
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
function echarts_2() {
|
|
var myChart = echarts.init(document.getElementById("echarts02"));
|
|
|
|
option = {
|
|
grid: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 40,
|
|
bottom: 0,
|
|
containLabel: true,
|
|
},
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
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,
|
|
},
|
|
legend: {
|
|
data: ["城区", "镇区", "乡村", "总入园数", "2022年基数"],
|
|
top: 0,
|
|
textStyle: { color: "#fff" },
|
|
icon: "roundRect",
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["2019", "2021", "2022", "2023", "2024", "2025", "2026"],
|
|
axisPointer: { type: "shadow" },
|
|
axisLine: { lineStyle: { color: "#fff" } },
|
|
axisLabel: { color: "#fff" },
|
|
nameTextStyle: { color: "#fff" },
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50,
|
|
axisLabel: { formatter: "{value}", color: "#fff" },
|
|
},
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
max: 25,
|
|
interval: 5,
|
|
axisLabel: { formatter: "{value}", color: "#fff" },
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "城区",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "镇区",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "乡村",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.4, 5.2, 8.0, 25.4, 27.7, 73.7, 155.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "总入园数",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
|
|
},
|
|
// 2. 新增折线
|
|
{
|
|
name: "2022年基数",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
// 3. 数据整体 +0.8
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3].map((v) =>
|
|
(v + 0.8).toFixed(1)
|
|
),
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function echarts_3() {
|
|
var myChart = echarts.init(document.getElementById("echarts01"));
|
|
|
|
option = {
|
|
grid: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 40,
|
|
bottom: 0,
|
|
containLabel: true,
|
|
},
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
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,
|
|
},
|
|
legend: {
|
|
data: ["城区", "镇区", "乡村", "总入园数", "2022年基数"],
|
|
top: 0,
|
|
textStyle: { color: "#fff" },
|
|
icon: "roundRect",
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["2019", "2021", "2022", "2023", "2024", "2025", "2026"],
|
|
axisPointer: { type: "shadow" },
|
|
axisLine: { lineStyle: { color: "#fff" } },
|
|
axisLabel: { color: "#fff" },
|
|
nameTextStyle: { color: "#fff" },
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50,
|
|
axisLabel: { formatter: "{value}", color: "#fff" },
|
|
},
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
max: 25,
|
|
interval: 5,
|
|
axisLabel: { formatter: "{value}", color: "#fff" },
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "城区",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [201.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "镇区",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "乡村",
|
|
type: "bar",
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.4, 5.2, 8.0, 25.4, 27.7, 73.7, 155.6],
|
|
itemStyle: {
|
|
borderRadius: [6, 6, 0, 0],
|
|
},
|
|
},
|
|
{
|
|
name: "总入园数",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
|
|
},
|
|
// 2. 新增折线
|
|
{
|
|
name: "2022年基数",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
|
// 3. 数据整体 +0.8
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3].map((v) =>
|
|
(v + 0.8).toFixed(1)
|
|
),
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
$(".tab-item").click(function () {
|
|
// 移除所有active类
|
|
$(this).siblings().removeClass("active");
|
|
// 添加active类到当前点击的元素
|
|
$(this).addClass("active");
|
|
|
|
// 获取当前选中的标签数据
|
|
var selectedTab = $(this).data("tab");
|
|
|
|
// 这里可以添加根据标签切换内容的逻辑
|
|
console.log("切换到: " + selectedTab);
|
|
|
|
// 示例：根据标签切换图表数据
|
|
switch (selectedTab) {
|
|
case "入园数":
|
|
// 加载入园数数据
|
|
echarts_1();
|
|
break;
|
|
case "在园数":
|
|
echarts_3();
|
|
break;
|
|
}
|
|
});
|
|
});
|