125
assets/charts/schuelerzahlen.js
Normal file
125
assets/charts/schuelerzahlen.js
Normal file
@ -0,0 +1,125 @@
|
||||
import * as json from "./schuelerzahlen.json";
|
||||
|
||||
(() => {
|
||||
const data = json.schuelerzahlen;
|
||||
var dom = document.getElementById("chart-container");
|
||||
// @ts-ignore
|
||||
var chart = echarts.init(dom, null, {
|
||||
renderer: "canvas",
|
||||
useDirtyRect: false,
|
||||
locale: "DE",
|
||||
});
|
||||
const option = {
|
||||
title: {
|
||||
text: "Schülerzahlen",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: (params) => {
|
||||
var lines = params.map(
|
||||
(p) => `<b>${p.seriesName}:</b> ${p.value}${p.seriesName == "Anteil Mädchen" ? "%" : ""}`
|
||||
);
|
||||
return lines.join("<br>");
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: data.map((item) => item["year"]),
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
inverse: false,
|
||||
},
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
},
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
right: 10,
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: "none",
|
||||
},
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
startValue: "1988",
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Jungen",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
color: "#7099dc",
|
||||
data: data.map((item) => item["all"] - item["girls"]),
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
data: [100, 300, 500].map((n) => ({ yAxis: n })),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Mädchen",
|
||||
type: "bar",
|
||||
color: "#ff6a6a",
|
||||
stack: "total",
|
||||
data: data.map((item) => item["girls"]),
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
data: [100, 300, 500].map((n) => ({ yAxis: n })),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Insgesamt",
|
||||
color: "#98e17f",
|
||||
type: "line",
|
||||
data: data.map((item) => item["all"]),
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
symbolSize: 0,
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
data: [100, 300, 500].map((n) => ({ yAxis: n })),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Anteil Mädchen",
|
||||
type: "line",
|
||||
color: "#4b4b4b",
|
||||
yAxisIndex: 1,
|
||||
data: data.map((item) => ((item["girls"] / item["all"]) * 100).toFixed(2)),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", chart.resize);
|
||||
})();
|
Reference in New Issue
Block a user