112 lines
3.0 KiB
Plaintext
112 lines
3.0 KiB
Plaintext
option = {
|
|
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" },
|
|
// 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)
|
|
),
|
|
},
|
|
],
|
|
}; |