Short-List der Nachhaltigkeitsaspekte (Diagramm)

<div id="short-list-plot" class="short-list-plot"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.js"></script>
<script>
    const chartContainer = document.getElementById('short-list-plot');
    const chart = echarts.init(chartContainer);

    // Finanzielle Wesentlichkeit, Auswirkungs-Wesentlichkeit, Stakeholder-Bedeutung, Label
    const data = {
        'environment': [
            [4.04, 4.67, 5, 'Klimawandel'],
            [4.50, 4.67, 5, 'Energie'],
            [2.80, 3.20, 3, 'Recycling & Kreislaufwirtschaft'],
        ],
        'social': [
            [3.20, 3.67, 2, 'Mitarbeiterentwicklung'],
            [1.20, 4.33, 1, 'Arbeitssicherheit & Gesundheit'],
            [4.76, 4.00, 3, 'Menschenrechte'],
        ],
        'governance': [
            [2.40, 3.40, 4, 'Datenverantwortung'],
        ],
    }

    const labelOptions = {
        show: true,
        position: 'bottom',
        formatter: function (param) {
            return param.data[3];
        },
    };

    const options = {
        grid: {
            left: 100,
            containLabel: true,
            bottom: 60,
            top: 30,
            right: 100,
        },
        xAxis: {
            type: 'value',
            name: 'Finanzielle Wesentlichkeit',
            nameLocation: 'middle',
            nameGap: 30,
            nameTextStyle: {
                color: '#888',
                fontSize: 14,
                fontWeight: '700'
            },
            min: 0,
            max: 5,
        },
        yAxis: {
            type: 'value',
            name: 'Wesentlichkeit der Auswirkungen',
            nameLocation: 'middle',
            nameGap: 30,
            nameTextStyle: {
                color: '#888',
                fontSize: 14,
                fontWeight: '700'
            },
            min: 0,
            max: 5,
        },
        color: ['#59af31', '#0863ed', '#4a1968'],
        legend: {
            bottom: 0,
            data: ['Umwelt', 'Soziales', 'Unternehmensführung'],
            textStyle: {
                fontSize: 14
            },
            itemGap: 30,
        },
        visualMap: [
            {
                type: 'continuous',
                left: 'right',
                top: 30,
                dimension: 2,
                min: 0,
                max: 5,
                itemWidth: 30,
                itemHeight: 120,
                calculable: true,
                precision: 0.1,
                text: ['Bedeutung für\nStakeholder'],
                textStyle: {
                    color: '#888',
                    fontWeight: '700'
                },
                textGap: 20,
                inRange: {
                    symbolSize: [20, 80]
                },
                controller: {
                    inRange: {
                        color: ['#888']
                    },
                    outOfRange: {
                        color: ['#999']
                    }
                }
            },

        ],
        tooltip: {
            backgroundColor: 'rgba(255,255,255,0.7)',
            formatter: function (param) {
                var value = param.value;

                // .toLocaleString() is only exemplary! Use whatever your framework provides to you.
                return '<small class="d-block">' + param.seriesName + '</small>'
                    + '<strong class="fs-3 d-block mb-2">' + value[3] + '</strong>'
                    + '<table class="w-100" style="min-width: 200px">'
                    + '<tr><th>Finanzielle Wesentlichkeit:</th><td class="text-end">' + value[0].toLocaleString('de-DE', {'minimumFractionDigits':2, 'maximumFractionDigits':2}) + '</td></tr>'
                    + '<tr><th>Auswirkungs-Wesentlichkeit:</th><td class="text-end">' + value[1].toLocaleString('de-DE', {'minimumFractionDigits':2, 'maximumFractionDigits':2}) + '</td></tr>'
                    + '<tr><th>Bedeutung Stakeholder:</th><td class="text-end">' + value[2] + '</td></tr>'
                    + '</table>';
            }
        },
        series: [
            {
                name: 'Umwelt',
                type: 'scatter',
                data: data.environment,
                label: labelOptions
            },
            {
                name: 'Soziales',
                type: 'scatter',
                data: data.social,
                label: labelOptions
            },
            {
                name: 'Unternehmensführung',
                type: 'scatter',
                data: data.governance,
                label: labelOptions
            },
            // Top left square
            {
                type: 'line',
                markArea: {
                    label: {
                        formatter: params => 'Wesentlich aus Auswirkungs-Perspektive',
                        color: '#6d5f48',
                        position: 'insideTopLeft'
                    },
                    itemStyle: {
                        color: 'rgba(203, 180, 145, 0.2)'
                    },
                    data: [
                        [{coord: [0, 2.5]}, {coord: [2.5, 5]}]
                    ]
                }
            },
            // Bottom right square
            {
                type: 'line',
                markArea: {
                    label: {
                        formatter: params => 'Wesentlich aus finanzieller Perspektive',
                        color: '#6d5f48',
                        position: 'insideBottomRight'
                    },
                    itemStyle: {
                        color: 'rgba(203, 180, 145, 0.2)'
                    },
                    data: [
                        [{coord: [2.5, 0]}, {coord: [5, 2.5]}]
                    ]
                }
            },
            // Top right square
            {
                type: 'line',
                markArea: {
                    label: {
                        formatter: params => 'Wesentlich aus beiden Perspektiven',
                        color: '#6d5f48',
                        position: 'insideTopRight'
                    },
                    itemStyle: {
                        color: 'rgba(203, 180, 145, 0.45)'
                    },
                    data: [
                        [{coord: [2.5, 2.5]}, {coord: [5, 5]}]
                    ]
                }
            },
        ]
    }

    options && chart.setOption(options);

    window.addEventListener('resize', function () {
        chart.resize();
    });
</script>