1647596431(1).jpg

<div id="echarts"></div>

            let list = [];
            const max = 150;
            const value = 15;//每一級15分值
            let rows = [
                {name: '語文',score:parseInt(Math.random()*max)},{name: '數(shù)學',score:parseInt(Math.random()*max)},{name: '物理',score:parseInt(Math.random()*max)},{name: '化學',score:parseInt(Math.random()*max)},
                {name: '歷史',score:parseInt(Math.random()*max)},{name: '生物',score:parseInt(Math.random()*max)},{name: '政治',score:parseInt(Math.random()*max)},{name: '音樂',score:parseInt(Math.random()*max)}
            ];
            let color = [
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
                "rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")"
            ]
            
            for(var i=0;i<=max/value;i++){
                let rowsCloen = JSON.parse(JSON.stringify(rows));
                rowsCloen = rowsCloen.map((e,index)=>{
                    e.value = value;
                    e.itemStyle = {
                        color:!(e.score<=(i+1)*value&&e.score<=i*value)?color[index]:"#ddd"
                    }
                    return e;
                })
                list.push({
                    name: '圖表'+i,
                    type: 'pie',
                    radius: [(i)*8+'%', (i+1)*8+'%'],
                    label: {
                        position: 'inner',
                        fontSize: 14
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle:{
                        normal:{
                            label:{
                                show:false
                            }
                        }
                    },
                    data: rowsCloen
                })
            }
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(item,index,a){
                        return item.name+'<br />級別分值范圍：'+(item.seriesIndex)*value+' ~ '+(item.seriesIndex+1)*value+"<br/>分值："+item.data.score;
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                series: list
            };
            const dome = echarts.init(document.getElementById("echarts"));
            dome.setOption(option);