城市维度雷达图

Added on: Mar 05, 2025
User Prompt

1. 坐标系构建

网格层级:

主网格:六边形骨架线,6组同心圆(半径递增:20px, 40px, 60px, 80px, 100px)

辅助网格:浅灰色(EEEEEE)虚线,每10px间隔一组

刻度标签:外圈白色数字(Helvetica字体,14pt),沿最外层网格等距分布6个数值锚点(0°, 60°, 120°, 180°, 240°, 300°)一线城市(紫色点阵)

数据点:六边形顶点处紫色圆形(直径根据数值变化:30px-60px)

渐变逻辑:直径 = 基础值40px + (实际值/100)*20px

视觉效果:

外发光效果:半径8px,颜色A45FB0(透明度20%)

内部点阵:白色小圆点阵列(3px直径,间距5px)

二线城市(蓝色描边)

折线:

连接线宽:2px实线(45B7D1)

顶点标记:蓝色菱形(10px×10px)

动态效果:

路径光晕:沿折线流动的浅蓝色光带(宽度4px,透明度30%)

数据点悬浮提示:显示「二线城市-维度值」的淡蓝色Tooltip

三线城市(橙色填充)

填充区域:

多边形填充色:FF6B6B(透明度40%)

边缘描边:2px深橙色实线(D35400)

纹理设计:

斜线阴影:45°平行线纹理(线宽1px,间距8px,颜色FFFFFF透明度20%)

中心辐射渐变:从中心点向外透明度从20%过渡到60%
 

3. 布局细节增强

网格系统

主轴线:120°轴(决策周期)加粗至3px,作为视觉引导线

极径标签:

位置:距离中心点110px处

旋转方式:每个维度标签自动旋转对齐坐标轴(如"价格弹性"在300°逆时针旋转60°)

图例面板

位置:右上角直角坐标系 (X: 85%, Y: 15%)

面板样式:

尺寸:180px×120px

背景:玻璃质感(透明度20%的白色毛玻璃效果)

边框:1px发光描边(颜色FFFFFF,透明度50%)