浅色主题升级：白色卡片、渐变背景与精致光晕指标设计

```json
{
"summary": "基于原始设计稿，保持浅色主题并全面升级视觉质感。采用白色卡片+柔和阴影+细边框，搭配淡蓝淡紫渐变背景与浅灰世界地图底纹，字体使用Inter现代字重体系，指标卡片加彩色装饰条，圆环指标增加精致光晕进度，整体呈现专业、干净、有层次的设计感。",
"widget": {
"type": "custom-template",
"isAPI": false,
"api": null,
"fullWidth": true,
"html": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;);\n\n* {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;\n}\n\nbody {\n margin: 0;\n padding: 0;\n}\n\n.dashboard-light {\n background: #f0f2f5;\n min-height: 100vh;\n position: relative;\n overflow: hidden;\n}\n\n.dashboard-light .bg-decoration {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n}\n\n.dashboard-light .bg-decoration::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -80px;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(30, 136, 229, 0.06) 0%, transparent 70%);\n border-radius: 50%;\n}\n\n.dashboard-light .bg-decoration::after {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -60px;\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(126, 87, 194, 0.05) 0%, transparent 70%);\n border-radius: 50%;\n}\n\n.dashboard-light .bg-map {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n opacity: 0.08;\n background-image: url('/assets/images/map.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n.dashboard-light .bg-fluid {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n opacity: 0.15;\n background-image: url('/assets/images/bg/bg-01.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n.panel-card {\n background: #ffffff;\n border-radius: 12px;\n border: 1px solid #eef0f4;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);\n transition: all 0.25s ease;\n position: relative;\n}\n\n.panel-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);\n border-color: #dde0e6;\n transform: translateY(-1px);\n}\n\n.panel-card-subtle {\n background: #ffffff;\n border-radius: 10px;\n border: 1px solid #f0f1f4;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);\n}\n\n.metric-card {\n position: relative;\n overflow: hidden;\n}\n\n.metric-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n}\n\n.metric-card.gold::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }\n.metric-card.blue::before { background: linear-gradient(90deg, #1e88e5, #42a5f5); }\n.metric-card.purple::before { background: linear-gradient(90deg, #7e57c2, #9575cd); }\n\n.metric-value {\n font-size: 28px;\n font-weight: 700;\n color: #1a1a2e;\n line-height: 1.1;\n letter-spacing: -0.5px;\n}\n\n.metric-label {\n font-size: 13px;\n font-weight: 400;\n color: #8890a0;\n margin-top: 2px;\n letter-spacing: 0.2px;\n}\n\n.section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #9ca3b0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title .accent-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #1e88e5;\n}\n\n.ring-center-value {\n position: absolute;\n top: 42%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 700;\n color: #1a1a2e;\n text-align: center;\n line-height: 1.1;\n white-space: nowrap;\n}\n\n.ring-center-label {\n position: absolute;\n bottom: 6px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 10px;\n color: #9ca3b0;\n letter-spacing: 0.5px;\n white-space: nowrap;\n}\n\n/* Table */\n.data-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.data-table th {\n padding: 6px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: #9ca3b0;\n border-bottom: 1px solid #eef0f4;\n text-align: left;\n}\n\n.data-table td {\n padding: 7px 8px;\n font-size: 13px;\n color: #4a4a5a;\n border-bottom: 1px solid #f4f5f7;\n}\n\n.data-table tr:last-child td {\n border-bottom: none;\n}\n\n.data-table tr:hover td {\n background: #f8f9fc;\n}\n\n/* Status Circles */\n.status-circle {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n width: 120px;\n height: 120px;\n transition: all 0.35s ease;\n cursor: pointer;\n}\n\n.status-circle:hover {\n transform: scale(1.06);\n}\n\n.status-circle.warning {\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2), inset 0 -2px 4px rgba(0,0,0,0.04);\n}\n\n.status-circle.warning:hover {\n box-shadow: 0 8px 30px rgba(245, 158, 11, 0.35);\n}\n\n.status-circle.alert {\n background: linear-gradient(135deg, #f87171, #ef4444);\n box-shadow: 0 6px 20px rgba(239, 68, 68, 0.2), inset 0 -2px 4px rgba(0,0,0,0.04);\n}\n\n.status-circle.alert:hover {\n box-shadow: 0 8px 30px rgba(239, 68, 68, 0.35);\n}\n\n.status-circle .circle-value {\n font-size: 26px;\n font-weight: 800;\n color: #ffffff;\n text-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.status-circle .circle-label {\n font-size: 13px;\n font-weight: 500;\n color: rgba(255,255,255,0.9);\n letter-spacing: 1px;\n}\n\n.pulse-dot {\n position: absolute;\n top: -4px;\n right: -4px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 2px solid #ffffff;\n}\n\n.pulse-dot.warning-dot {\n background: #f59e0b;\n box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);\n animation: pulse-warning 2s infinite;\n}\n\n.pulse-dot.alert-dot {\n background: #ef4444;\n box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);\n animation: pulse-alert 2s infinite;\n}\n\n@keyframes pulse-warning {\n 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }\n 70% { box-shadow: 0 0 0 12px rgba(245,158,11,0); }\n 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }\n}\n\n@keyframes pulse-alert {\n 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }\n 70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }\n 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }\n}\n\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.animate-fade-in {\n animation: fadeInUp 0.5s ease forwards;\n}\n\n.animate-fade-in-delay-1 { animation-delay: 0.1s; }\n.animate-fade-in-delay-2 { animation-delay: 0.2s; }\n.animate-fade-in-delay-3 { animation-delay: 0.3s; }\n\n/* Bottom progress bar */\n.progress-track {\n width: 100%;\n height: 4px;\n background: #eef0f4;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(90deg, #1e88e5, #42a5f5, #7e57c2);\n transition: width 0.6s ease;\n}\n\n::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n::-webkit-scrollbar-track {\n background: transparent;\n}\n::-webkit-scrollbar-thumb {\n background: #d0d5dd;\n border-radius: 2px;\n}\n\n@media (max-width: 960px) {\n .metric-value {\n font-size: 22px;\n }\n .status-circle {\n width: 96px;\n height: 96px;\n }\n .status-circle .circle-value {\n font-size: 20px;\n }\n .status-circle .circle-label {\n font-size: 11px;\n }\n}\n</style>\n\n<div class=\"dashboard-light\">\n <div class=\"bg-decoration\"></div>\n <div class=\"bg-map\"></div>\n <div class=\"bg-fluid\"></div>\n\n <div class=\"relative z-10 p-4 md:p-6 lg:p-8\" style=\"min-height: 100vh;\">\n \n <!-- Header -->\n <div class=\"relative mb-6 md:mb-8 animate-fade-in\">\n <div class=\"flex items-center justify-center gap-3 md:gap-4\">\n <div class=\"flex items-center gap-1.5\">\n <div class=\"w-6 h-6 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm shadow-blue-200\">\n <i class=\"fa fa-dashboard text-white text-xs\"></i>\n </div>\n </div>\n <h1 class=\"text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight\" style=\"font-family:'Inter',sans-serif;\">\n 潮设运营数字化全景看板\n </h1>\n <div class=\"hidden sm:flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full border border-blue-100\">\n <i class=\"fa fa-circle text-[6px] text-blue-400\"></i>\n <span class=\"text-[11px] text-blue-600 font-medium\">实时</span>\n </div>\n </div>\n <div class=\"flex justify-center mt-2\">\n <div class=\"w-24 md:w-36 h-0.5 bg-gradient-to-r from-transparent via-blue-300 to-transparent rounded-full\"></div>\n </div>\n </div>\n\n <!-- Row 1: Charts + Metrics + Rings -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5 mb-3 md:mb-4 lg:mb-5\">\n \n <!-- Col 1-4: ECharts Bar+Line -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4 animate-fade-in animate-fade-in-delay-1\">\n <div class=\"panel-card p-3 md:p-4 lg:p-5 h-full\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"section-title\">\n <span class=\"accent-dot\"></span>\n 营收趋势\n </div>\n <span class=\"text-[11px] text-blue-500 bg-blue-50 px-2.5 py-0.5 rounded-full font-medium\">年度</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 12}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"legend\": {\"data\": [\"营收\", \"目标\"], \"textStyle\": {\"color\": \"#8890a0\", \"fontSize\": 10}, \"bottom\": 0, \"icon\": \"roundRect\"},\n \"grid\": {\"left\": \"6%\", \"right\": \"4%\", \"top\": \"8%\", \"bottom\": \"20%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"1月\",\"2月\",\"3月\",\"4月\",\"5月\",\"6月\",\"7月\",\"8月\"], \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisTick\": {\"show\": false}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"#f4f5f7\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}, \"axisTick\": {\"show\": false}},\n \"series\": [\n {\"name\": \"营收\", \"type\": \"bar\", \"data\": [820, 932, 901, 1034, 1150, 1260, 1180, 1340], \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#42a5f5\"}, {\"offset\": 1, \"color\": \"#1e88e5\"}]}, \"borderRadius\": [4,4,0,0]}, \"barWidth\": \"38%\"},\n {\"name\": \"目标\", \"type\": \"line\", \"data\": [780, 880, 950, 1000, 1100, 1200, 1150, 1300], \"smooth\": true, \"symbol\": \"circle\", \"symbolSize\": 6, \"lineStyle\": {\"color\": \"#f59e0b\", \"width\": 2}, \"itemStyle\": {\"color\": \"#f59e0b\", \"borderColor\": \"#ffffff\", \"borderWidth\": 2}}\n ]\n }' style=\"width:100%;height:185px;\">\n </div>\n </div>\n </div>\n\n <!-- Col 5-8: 3 Metric Cards -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4 animate-fade-in animate-fade-in-delay-2\">\n <div class=\"grid grid-cols-3 gap-2 md:gap-3 h-full\">\n \n <div class=\"panel-card metric-card gold rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center\">\n <div class=\"w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center mb-2\">\n <i class=\"fa fa-flask text-amber-500 text-sm\"></i>\n </div>\n <span class=\"metric-value text-amber-600\">0.93%</span>\n <span class=\"metric-label\">研发经费投入强度</span>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <i class=\"fa fa-caret-up text-emerald-500 text-xs\"></i>\n <span class=\"text-[10px] text-emerald-500 font-medium\">+0.12%</span>\n </div>\n </div>\n\n <div class=\"panel-card metric-card blue rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center\">\n <div class=\"w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center mb-2\">\n <i class=\"fa fa-dollar text-blue-500 text-sm\"></i>\n </div>\n <span class=\"metric-value text-blue-600\">993.99</span>\n <span class=\"metric-label\">利润总额 (万元)</span>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <i class=\"fa fa-caret-up text-emerald-500 text-xs\"></i>\n <span class=\"text-[10px] text-emerald-500 font-medium\">+8.3%</span>\n </div>\n </div>\n\n <div class=\"panel-card metric-card purple rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center\">\n <div class=\"w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center mb-2\">\n <i class=\"fa fa-balance-scale text-purple-500 text-sm\"></i>\n </div>\n <span class=\"metric-value text-purple-600\">14.27%</span>\n <span class=\"metric-label\">资产负债率</span>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <i class=\"fa fa-caret-down text-rose-500 text-xs\"></i>\n <span class=\"text-[10px] text-rose-500 font-medium\">-1.8%</span>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- Col 9-12: 3 Ring Charts -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4 animate-fade-in animate-fade-in-delay-3\">\n <div class=\"grid grid-cols-3 gap-2 md:gap-3 h-full\">\n \n <!-- Ring 1 -->\n <div class=\"panel-card rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:125px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"72%\", \"86%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7456.41, \"name\": \"已完成\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#42a5f5\"}, {\"offset\": 1, \"color\": \"#1e88e5\"}]}}},\n {\"value\": 2543.59, \"name\": \"未完成\", \"itemStyle\": {\"color\": \"#eef0f4\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90,\n \"animation\": true\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"ring-center-value\">7456.41</div>\n <div class=\"ring-center-label\">营业收入</div>\n </div>\n </div>\n\n <!-- Ring 2 -->\n <div class=\"panel-card rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:125px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"72%\", \"86%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7578.36, \"name\": \"已回款\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#9575cd\"}, {\"offset\": 1, \"color\": \"#7e57c2\"}]}}},\n {\"value\": 2421.64, \"name\": \"未回款\", \"itemStyle\": {\"color\": \"#eef0f4\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"ring-center-value\">7578.36</div>\n <div class=\"ring-center-label\">回款金额</div>\n </div>\n </div>\n\n <!-- Ring 3 -->\n <div class=\"panel-card rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:125px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"72%\", \"86%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7578.36, \"name\": \"已收\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#fbbf24\"}, {\"offset\": 1, \"color\": \"#f59e0b\"}]}}},\n {\"value\": 2421.64, \"name\": \"未收\", \"itemStyle\": {\"color\": \"#eef0f4\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"ring-center-value\">7578.36</div>\n <div class=\"ring-center-label\">应收账款金额</div>\n </div>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Row 2: 3 Charts -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5 mb-3 md:mb-4 lg:mb-5\">\n \n <!-- Chart 1: Line -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-1\">\n <div class=\"panel-card p-3 md:p-4 h-full\">\n <div class=\"section-title mb-3\">\n <span class=\"accent-dot\" style=\"background:#06b6d4;\"></span>\n 月度营收增长率\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 11}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"grid\": {\"left\": \"6%\", \"right\": \"5%\", \"top\": \"8%\", \"bottom\": \"14%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"1月\",\"2月\",\"3月\",\"4月\",\"5月\",\"6月\"], \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisTick\": {\"show\": false}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"#f4f5f7\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}, \"axisTick\": {\"show\": false}},\n \"series\": [{\n \"type\": \"line\",\n \"data\": [2.5, 3.8, 5.2, 4.6, 7.1, 8.9],\n \"smooth\": true,\n \"symbol\": \"circle\",\n \"symbolSize\": 7,\n \"lineStyle\": {\"color\": \"#06b6d4\", \"width\": 2.5},\n \"areaStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"rgba(6,182,212,0.12)\"}, {\"offset\": 1, \"color\": \"rgba(6,182,212,0)\"}]}},\n \"itemStyle\": {\"color\": \"#06b6d4\", \"borderColor\": \"#ffffff\", \"borderWidth\": 2}\n }]\n }' style=\"width:100%;height:155px;\">\n </div>\n </div>\n </div>\n\n <!-- Chart 2: Bar -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-2\">\n <div class=\"panel-card p-3 md:p-4 h-full\">\n <div class=\"section-title mb-3\">\n <span class=\"accent-dot\" style=\"background:#7e57c2;\"></span>\n 各部门业绩对比\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 11}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"grid\": {\"left\": \"8%\", \"right\": \"5%\", \"top\": \"8%\", \"bottom\": \"18%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"设计部\",\"研发部\",\"市场部\",\"运营部\",\"产品部\"], \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisTick\": {\"show\": false}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"#f4f5f7\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}, \"axisTick\": {\"show\": false}},\n \"series\": [{\n \"type\": \"bar\",\n \"data\": [\n {\"value\": 86, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#9575cd\"}, {\"offset\": 1, \"color\": \"#7e57c2\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 92, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#42a5f5\"}, {\"offset\": 1, \"color\": \"#1e88e5\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 78, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#fbbf24\"}, {\"offset\": 1, \"color\": \"#f59e0b\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 88, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#22d3ee\"}, {\"offset\": 1, \"color\": \"#06b6d4\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 95, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#f472b6\"}, {\"offset\": 1, \"color\": \"#ec4899\"}]}, \"borderRadius\": [6,6,0,0]}}\n ],\n \"barWidth\": \"50%\",\n \"label\": {\"show\": true, \"position\": \"top\", \"color\": \"#8890a0\", \"fontSize\": 10, \"fontWeight\": 500}\n }]\n }' style=\"width:100%;height:155px;\">\n </div>\n </div>\n </div>\n\n <!-- Chart 3: Area -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-3\">\n <div class=\"panel-card p-3 md:p-4 h-full\">\n <div class=\"section-title mb-3\">\n <span class=\"accent-dot\" style=\"background:#10b981;\"></span>\n 累计利润走势\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 11}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"grid\": {\"left\": \"6%\", \"right\": \"5%\", \"top\": \"8%\", \"bottom\": \"14%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"Q1\",\"Q2\",\"Q3\",\"Q4\"], \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisTick\": {\"show\": false}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"#f4f5f7\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}, \"axisTick\": {\"show\": false}},\n \"series\": [{\n \"type\": \"line\",\n \"data\": [120, 280, 460, 780],\n \"smooth\": true,\n \"symbol\": \"diamond\",\n \"symbolSize\": 10,\n \"lineStyle\": {\"color\": \"#10b981\", \"width\": 2.5},\n \"areaStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"rgba(16,185,129,0.12)\"}, {\"offset\": 1, \"color\": \"rgba(16,185,129,0)\"}]}},\n \"itemStyle\": {\"color\": \"#10b981\", \"borderColor\": \"#ffffff\", \"borderWidth\": 2}\n }]\n }' style=\"width:100%;height:155px;\">\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Row 3: Warning/Alert + Scatter + Table/Pie -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5\">\n \n <!-- Col 1-4: Warning + Alert Circles -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-1\">\n <div class=\"panel-card p-4 md:p-5 lg:p-6 h-full flex items-center justify-center gap-8 md:gap-12 relative\">\n \n <div class=\"status-circle warning\">\n <div class=\"pulse-dot warning-dot\"></div>\n <span class=\"circle-value\">200</span>\n <span class=\"circle-label\">警告</span>\n </div>\n \n <div class=\"status-circle alert\">\n <div class=\"pulse-dot alert-dot\"></div>\n <span class=\"circle-value\">200</span>\n <span class=\"circle-label\">预警</span>\n </div>\n \n <div class=\"absolute bottom-3 left-0 right-0 flex justify-center gap-5\">\n <div class=\"flex items-center gap-1.5\">\n <div class=\"w-2 h-2 rounded-full bg-amber-400\"></div>\n <span class=\"text-[10px] text-gray-400 font-medium\">实时告警</span>\n </div>\n <div class=\"flex items-center gap-1.5\">\n <div class=\"w-2 h-2 rounded-full bg-red-400\"></div>\n <span class=\"text-[10px] text-gray-400 font-medium\">系统预警</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Col 5-8: Scatter Chart -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-2\">\n <div class=\"panel-card p-3 md:p-4 h-full\">\n <div class=\"section-title mb-3\">\n <span class=\"accent-dot\" style=\"background:#f43f5e;\"></span>\n 项目风险分布\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"item\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 11}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"grid\": {\"left\": \"6%\", \"right\": \"8%\", \"top\": \"6%\", \"bottom\": \"14%\"},\n \"xAxis\": {\"type\": \"value\", \"name\": \"进度\", \"nameTextStyle\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"splitLine\": {\"lineStyle\": {\"color\": \"#f8f9fc\"}}},\n \"yAxis\": {\"type\": \"value\", \"name\": \"风险\", \"nameTextStyle\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"axisLine\": {\"lineStyle\": {\"color\": \"#eef0f4\"}}, \"axisLabel\": {\"color\": \"#9ca3b0\", \"fontSize\": 9}, \"splitLine\": {\"lineStyle\": {\"color\": \"#f8f9fc\"}}},\n \"series\": [{\n \"type\": \"scatter\",\n \"symbolSize\": function(val) { return Math.max(8, val[2] * 7); },\n \"data\": [\n [85, 20, 3], [65, 65, 5], [30, 80, 4], [55, 45, 2], [90, 15, 3],\n [45, 70, 6], [70, 35, 3], [25, 90, 5], [80, 25, 2], [40, 55, 4],\n [60, 50, 3], [75, 30, 2], [50, 60, 4], [35, 75, 5], [95, 10, 2]\n ],\n \"itemStyle\": {\n \"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#fb7185\"}, {\"offset\": 1, \"color\": \"#f43f5e\"}]},\n \"shadowBlur\": 6,\n \"shadowColor\": \"rgba(244,63,94,0.15)\"\n }\n }]\n }' style=\"width:100%;height:165px;\">\n </div>\n </div>\n </div>\n\n <!-- Col 9-12: Table + Pie -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4 animate-fade-in animate-fade-in-delay-3\">\n <div class=\"panel-card p-3 md:p-4 lg:p-5 h-full\">\n <div class=\"grid grid-cols-2 gap-4 h-full\">\n \n <!-- Table -->\n <div class=\"flex flex-col\">\n <div class=\"section-title mb-3\">\n <span class=\"accent-dot\" style=\"background:#1e88e5;\"></span>\n 创新研发\n </div>\n <table class=\"data-table flex-1\">\n <thead>\n <tr>\n <th>指标</th>\n <th class=\"text-right\">实际</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-cyan-400 flex-shrink-0\"></div>\n <span class=\"text-gray-600\">发明专利</span>\n </td>\n <td class=\"text-right font-semibold text-gray-800\">62</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-purple-400 flex-shrink-0\"></div>\n <span class=\"text-gray-600\">实用新型</span>\n </td>\n <td class=\"text-right font-semibold text-gray-800\">8</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0\"></div>\n <span class=\"text-gray-600\">外观设计</span>\n </td>\n <td class=\"text-right font-semibold text-gray-800\">69</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0\"></div>\n <span class=\"text-gray-600\">技术秘密</span>\n </td>\n <td class=\"text-right font-semibold text-gray-800\">42</td>\n </tr>\n </tbody>\n </table>\n <div class=\"mt-2 pt-2 border-t border-gray-100\">\n <div class=\"flex items-center justify-between mb-1.5\">\n <span class=\"text-[11px] text-gray-400 font-medium\">总计</span>\n <span class=\"text-sm font-bold text-gray-800\">181</span>\n </div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" style=\"width:72%\"></div>\n </div>\n </div>\n </div>\n\n <!-- Pie Chart -->\n <div class=\"relative\">\n <div class=\"section-title mb-2\">\n <span class=\"accent-dot\" style=\"background:#7e57c2;\"></span>\n 占比\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"item\", \"backgroundColor\": \"#ffffff\", \"borderColor\": \"#e5e7eb\", \"borderWidth\": 1, \"textStyle\": {\"color\": \"#374151\", \"fontSize\": 11}, \"extraCssText\": \"box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-radius: 8px;\"},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"28%\", \"68%\"],\n \"center\": [\"50%\", \"50%\"],\n \"data\": [\n {\"value\": 62, \"name\": \"发明专利\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#22d3ee\"}, {\"offset\": 1, \"color\": \"#06b6d4\"}]}}},\n {\"value\": 8, \"name\": \"实用新型\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#a78bfa\"}, {\"offset\": 1, \"color\": \"#7e57c2\"}]}}},\n {\"value\": 69, \"name\": \"外观设计\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#fcd34d\"}, {\"offset\": 1, \"color\": \"#f59e0b\"}]}}},\n {\"value\": 42, \"name\": \"技术秘密\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#34d399\"}, {\"offset\": 1, \"color\": \"#10b981\"}]}}}\n ],\n \"label\": {\"show\": true, \"color\": \"#8890a0\", \"fontSize\": 10, \"fontWeight\": 500, \"formatter\": \"{b}\\n{d}%\"},\n \"labelLine\": {\"lineStyle\": {\"color\": \"#e5e7eb\"}},\n \"emphasis\": {\"itemStyle\": {\"shadowBlur\": 8, \"shadowColor\": \"rgba(30,136,229,0.15)\"}}\n }]\n }' style=\"width:100%;height:180px;\">\n </div>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Footer -->\n <div class=\"mt-4 md:mt-6 flex flex-wrap items-center justify-between gap-2 text-[10px] md:text-[11px] text-gray-400 border-t border-gray-100 pt-3\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-emerald-400\"></div>\n <span>数据实时更新 · <span id=\"updateTime\" class=\"text-gray-500 font-medium\"></span></span>\n </div>\n <div class=\"flex items-center gap-3\">\n <i class=\"fa fa-shield text-gray-300\"></i>\n <span>潮设运营中心 · 数字化全景驾驶舱 v2.0</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<script>\ndocument.getElementById('updateTime').textContent = new Date().toLocaleString('zh-CN', { hour12: false });\n</script>"
},
"next": [
"增加时间维度筛选器",
"添加数据自动轮播刷新",
"指标卡片点击下钻详情",
"增加导出报表按钮",
"添加移动端侧边导航"
]
}
```