fetch('/data')
                .then(response => response.json())
                .then(data => {
                    let clusterData = {};
                    data.forEach(item => {
                        if (!clusterData[item.cluster]) {
                            clusterData[item.cluster] = [];
                        }
                        clusterData[item.cluster].push(item.barrage);
                    });

                    let seriesData = [];
                    for (let cluster in clusterData) {
                        seriesData.push({
                            name: `Cluster ${cluster}`,
                            type: 'bar',
                            data: clusterData[cluster].map((item, index) => ({ value: item.length, name: `弹幕 ${index + 1}` }))
                        });
                    }
                    let chart = echarts.init(document.getElementById('l1'));
                let option = {
                    title: {
                        text: '弹幕聚类分析',
                        left:'center',
                        top: 'bottom',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {},
                    legend: {
                        data: seriesData.map(item => item.name),
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    xAxis: {
                        data: seriesData[0].data.map(item => item.name),
                        axisLabel: {
                            show: false,
                        }
                    },
                    yAxis: {},
                    series: seriesData
                };
                chart.setOption(option);
            });