Compare commits
2 Commits
21dee17af4
...
3998fc722f
Author | SHA1 | Date | |
---|---|---|---|
3998fc722f | |||
c088fee4c1 |
Binary file not shown.
@@ -31,6 +31,78 @@ option_1_1 = {
|
|||||||
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
|
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
|
||||||
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
|
{ type: "value", axisLabel: { formatter: "{value}", color: "#fff" } },
|
||||||
],
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "城区",
|
||||||
|
type: "bar",
|
||||||
|
data: [],
|
||||||
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
||||||
|
itemStyle: { borderRadius: [6, 6, 0, 0] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "镇区",
|
||||||
|
type: "bar",
|
||||||
|
data: [],
|
||||||
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
||||||
|
itemStyle: { borderRadius: [6, 6, 0, 0] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "乡村",
|
||||||
|
type: "bar",
|
||||||
|
data: [],
|
||||||
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
||||||
|
itemStyle: { borderRadius: [6, 6, 0, 0] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "总入园数",
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [],
|
||||||
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2022年基数",
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [],
|
||||||
|
tooltip: { valueFormatter: (v) => v + " 万人" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
option_1_2 = {
|
||||||
|
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: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "城区",
|
name: "城区",
|
||||||
@@ -51,7 +123,7 @@ option_1_1 = {
|
|||||||
itemStyle: { borderRadius: [6, 6, 0, 0] },
|
itemStyle: { borderRadius: [6, 6, 0, 0] },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "总入园数",
|
name: "总在园数",
|
||||||
type: "line",
|
type: "line",
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
data: [],
|
data: [],
|
||||||
@@ -64,3 +136,4 @@ option_1_1 = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@@ -16,11 +16,11 @@ $(window).load(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
echarts_1();
|
echarts_1_1();
|
||||||
echarts_2();
|
echarts_2();
|
||||||
// echarts_3();
|
// echarts_3();
|
||||||
|
|
||||||
function echarts_1() {
|
function echarts_1_1() {
|
||||||
var myChart = echarts.init(document.getElementById("echarts01"));
|
var myChart = echarts.init(document.getElementById("echarts01"));
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@@ -28,17 +28,13 @@ $(function () {
|
|||||||
async: false,
|
async: false,
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
url: "/RuYuanZaiYuan/school/preschool/chart",
|
url: "/RuYuanZaiYuan/school/preschool/chart",
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
option_1_1.series.forEach((seriesItem, index) => {
|
|
||||||
seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" };
|
|
||||||
});
|
|
||||||
option_1_1.xAxis[0].data = res.xAxis_data;
|
option_1_1.xAxis[0].data = res.xAxis_data;
|
||||||
option_1_1.series[0].data = res.series_data_0;
|
option_1_1.series[0].data = res.series_data_0;
|
||||||
option_1_1.series[1].data = res.series_data_1;
|
option_1_1.series[1].data = res.series_data_1;
|
||||||
option_1_1.series[2].data = res.series_data_2;
|
option_1_1.series[2].data = res.series_data_2;
|
||||||
option_1_1.series[3].data = res.series_data_3;
|
option_1_1.series[3].data = res.series_data_3;
|
||||||
option_1_1.series[4].data = res.series_data_4;
|
option_1_1.series[4].data = res.series_data_4;
|
||||||
option_1_1.series[5].data = res.series_data_5;
|
|
||||||
myChart.setOption(option_1_1);
|
myChart.setOption(option_1_1);
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
@@ -284,18 +280,12 @@ $(function () {
|
|||||||
$(this).siblings().removeClass("active");
|
$(this).siblings().removeClass("active");
|
||||||
// 添加active类到当前点击的元素
|
// 添加active类到当前点击的元素
|
||||||
$(this).addClass("active");
|
$(this).addClass("active");
|
||||||
|
|
||||||
// 获取当前选中的标签数据
|
// 获取当前选中的标签数据
|
||||||
var selectedTab = $(this).data("tab");
|
var selectedTab = $(this).data("tab");
|
||||||
|
|
||||||
// 这里可以添加根据标签切换内容的逻辑
|
|
||||||
console.log("切换到: " + selectedTab);
|
|
||||||
|
|
||||||
// 示例:根据标签切换图表数据
|
|
||||||
switch (selectedTab) {
|
switch (selectedTab) {
|
||||||
case "入园数":
|
case "入园数":
|
||||||
// 加载入园数数据
|
// 加载入园数数据
|
||||||
echarts_1();
|
echarts_1_1();
|
||||||
break;
|
break;
|
||||||
case "在园数":
|
case "在园数":
|
||||||
echarts_3();
|
echarts_3();
|
||||||
|
Reference in New Issue
Block a user