0224992
/
web-1


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品维度评分图</title>
    <!-- 引入 ECharts -->
   <!-- 正确路径（注意开头没有点） -->
   <!-- 直接使用在线CDN，无需安装 -->
<!-- 从node_modules正确引用 -->
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
    <style>
        #radarChart {
            width: 600px;
            height: 400px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="radarChart"></div>

    <script>
        // 初始化图表
        const chartDom = document.getElementById('radarChart');
        const myChart = echarts.init(chartDom);

        // 配置项
        const option = {
            title: {
                text: '作品综合维度评分',
                left: 'center'
            },
            radar: {
                indicator: [
                    { name: '需求策划', max: 5 },
                    { name: '前端实现', max: 5 },
                    { name: '后端实现', max: 5 },
                    { name: '体验美观', max: 5 },
                    { name: '技术难度', max: 5 }
                ],
                shape: 'polygon',
                splitNumber: 4,
                axisName: {
                    color: '#333'
                }
            },
            series: [{
                type: 'radar',
                data: [{
                    value: [1, 2, 3, 4, 5], // 对应各维度分数
                    name: '评分',
                    areaStyle: {
                        color: 'rgba(64, 158, 255, 0.6)'
                    },
                    lineStyle: {
                        color: '#409EFF',
                        width: 2
                    },
                    label: {
                        show: true,
                        formatter: function(params) {
                            return params.value;
                        }
                    }
                }]
            }],
            tooltip: {
                trigger: 'item'
            }
        };

        // 应用配置
        myChart.setOption(option);

        // 窗口大小变化时自适应
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    </script>
</body>
</html>