本文还有配套的精品资源点击获取简介直接可用的社区级数据可视化前端工程用纯HTMLCSSJS实现不依赖Vue、React等框架。首页index.html已集成ECharts 5.x图表库和中文地图数据china.js支持人口分布、安防告警、水电能耗、物业工单、内网设备状态等5类核心指标实时展示。内置折线图看趋势、柱状图比区域、环形图显占比、热力地图标密度、仪表盘显关键数值。所有样式通过style.css统一管理适配PC大屏及常见分辨率rem.js保障缩放一致性图标、背景图、标题边框等视觉资源齐全放在img/或根目录下。JavaScript逻辑拆分为index.js主控、infographic.js图表初始化、base.js工具函数等模块方便二次开发。附带中英文README说明部署方式和接口替换方法本地双击index.html即可预览也可部署到Nginx/Apache。数据源默认模拟实际使用时只需修改ajax请求地址对接后端API支持JSON格式返回。1. 项目概述为什么这套代码能真正“开箱即用”我做过七套社区级数据大屏从最早用原生Canvas手绘仪表盘到后来接入VueECharts的微前端方案再到最近给三个街道办做的纯静态部署项目——这套“智慧社区数据监控大屏前端代码包”是我目前交付率最高、客户二次开发成本最低的一版。它不是Demo也不是教学模板而是我在真实交付场景中反复打磨出来的“生产就绪型前端工程”。核心关键词就五个ECharts、智慧社区、数据大屏、前端源码、可视化——但每个词背后都对应着具体问题的解法。比如“开箱即用”很多人以为就是把HTML双击打开能看图就行。其实真正的门槛在三处一是图表尺寸随屏幕缩放不撕裂二是不同分辨率下标题边框、背景图、文字大小必须协调一致三是后端接口一换所有图表不能集体报错或白屏。这套代码里rem.js不是简单引入而是配合style.css里所有字体、间距、容器宽高的rem单位做了全链路校准index.js里每个ajax请求都封装了统一错误兜底和loading状态管理就连china.js地图数据我都替换了官方版本里容易导致IE11兼容性崩溃的GeoJSON坐标精度实测在社区老旧办公电脑Win7IE11上也能渲染热力图。你拿到手的不是“能跑”而是“在真实弱网环境、老旧终端、多分辨率混用场景下依然稳跑”。再比如“不依赖Vue/React”这句常被当成技术亮点宣传但实际价值在于部署极简性。社区信息中心的运维人员可能只会配Nginx反向代理不会装Node环境、跑webpack构建。这套代码直接扔进Apache的htdocs目录或者用Python自带的python -m http.server 8000起服务就能访问。所有JS文件按功能拆分base.js只做工具函数日期格式化、千分位处理、深拷贝infographic.js专注图表实例创建与销毁index.js只负责数据拉取、状态分发、模块调度——没有单文件组件没有生命周期钩子只有清晰的函数调用链。你改一个柱状图的数据字段不用查文档直接搜series[0].data就能定位想加个新图表复制infographic.js里一个initBarChart()函数改两行配置再在index.html里加个div容器5分钟完事。它解决的不是“能不能画图”而是“社区一线人员能不能自己维护、街道领导能不能随时看到真实数据、第三方系统能不能无缝嵌入”。所以当你看到目录里有智慧社区内网比对平台.png这种截图别只当是效果图——那是我陪客户在机房调试时用手机拍的真实运行画面popUP_bg.png和border_bg01.png这些资源名看似随意其实是按视觉层级命名的popUP_bg用于弹窗蒙层border_bg01专用于顶部标题栏的渐变描边连PSD源文件我都留了图层组标注。这不是代码包是把三年社区项目踩过的坑、攒下的经验压缩进了一个zip包里。2. 整体架构设计与模块拆解逻辑2.1 为什么放弃框架而选择纯JS分层架构很多团队一上来就想用Vue写大屏理由很充分响应式数据绑定省心、组件复用率高、生态丰富。但我在两个街道办落地时发现这恰恰成了最大障碍。第一个案例某社区用Vue CLI打包后部署到内网服务器结果因SSL证书过期导致CDN加载失败整个大屏白屏运维人员翻遍控制台也找不到问题在哪——因为错误堆栈被webpack混淆了。第二个案例更典型物业公司的IT人员想把大屏嵌入他们自研的Java后台系统但Vue的路由和状态管理与原有系统冲突最后硬是写了三天iframe通信方案还经常出现跨域cookie丢失。所以这套架构的设计起点很朴素让最不懂前端的人也能改数据、换图表、调样式。整个代码结构就三层表现层HTML CSSindex.html是唯一入口所有图表容器用语义化id命名如#population-chart、#security-alarmstyle.css用BEM规范写样式.chart-container--full-width这种类名一眼就知道用途逻辑层JS模块index.js是总控只做三件事——初始化页面、轮询数据、触发图表更新infographic.js是图表工厂每个函数对应一种图表类型且强制要求参数标准化initLineChart(domId, options, data)base.js是工具箱所有函数必须无副作用、可独立测试资源层静态文件img/目录下分bg/背景图、icon/图标、border/标题边框三个子目录bg_img04.png这种编号不是随意的而是按视觉权重排序——01是首页主背景04是安防模块专用背景避免后期替换时搞混。这种设计牺牲了部分开发效率但换来的是极致的可控性。比如你想把环形图改成饼图不需要懂Vue的v-for怎么遍历数据只要打开infographic.js找到initRingChart()函数把type: pie替换掉type: ring再调整radius参数即可。所有图表配置项都遵循ECharts 5.x官方文档的字段命名没做任何魔改。我甚至在README.md里写了“修改指南”第3步告诉你如何替换地图数据源第5步说明怎样调整折线图时间轴间隔——全是运维人员能看懂的操作步骤。2.2 响应式实现的核心rem viewport CSS媒体查询三位一体大屏适配最怕“假响应式”——表面看着能缩放实际一放大文字糊成一片图表重叠边框错位。这套代码的响应式不是靠Bootstrap栅格而是三道保险第一道是rem.js的动态根字体计算。它不是简单地用document.documentElement.style.fontSize window.innerWidth / 1920 * 100 px而是加入了设备像素比dpr校准function setRem() { const baseWidth 1920; // 设计稿宽度 const scale window.innerWidth / baseWidth; const dpr window.devicePixelRatio || 1; document.documentElement.style.fontSize (scale * 100 * dpr) px; }这样在2K屏dpr2上1rem实际等于200px确保高清屏下图标和文字依然锐利。style.css里所有尺寸都用rem比如标题栏高度height: 4.2rem对应设计稿的84px84/1000.84rem乘以dpr后精准还原。第二道是viewport的精细化控制。index.html里这行代码很多人忽略meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno, minimal-ui关键是maximum-scale1.0和user-scalableno——禁用双指缩放防止用户误操作破坏布局。但这里有个陷阱iOS Safari在横屏时会错误触发viewport重置所以我在base.js里加了监听window.addEventListener(orientationchange, () { setTimeout(() setRem(), 100); // 横竖屏切换后强制重算rem });第三道是CSS媒体查询的兜底。style.css里写了四组断点-media screen and (max-width: 1280px)适配1366×768笔记本-media screen and (max-width: 1920px)标准1080P大屏-media screen and (min-width: 1921px)2K及以上分辨率-media screen and (max-height: 900px)应对超宽屏如3440×1440的纵向压缩每组断点不只是改字体大小而是整套视觉权重调整。比如在1280px下#energy-consumption模块的柱状图会自动切换为横向堆叠模式避免X轴标签挤压热力地图的zoom值从1.2降到0.8确保小区边界清晰可见。这些都不是ECharts配置项能解决的必须靠CSS控制容器尺寸和图表实例的resize()时机。2.3 ECharts集成策略轻量加载 按需初始化 错误隔离ECharts 5.x完整版压缩后仍有800KB对内网部署是负担。所以这套代码做了三重优化首先是CDN本地双备份加载。index.html里这样写script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script scriptwindow.echarts || document.write(script srcecharts.min.js\/script);/script如果CDN失效比如内网断外网自动回退到本地echarts.min.js。而且我特意用了5.4.3这个版本——它修复了5.3.x在Chrome 115中地图渲染闪烁的bug又比5.5.x少了实验性API带来的兼容风险。其次是图表按需初始化。infographic.js里每个图表函数都带防重复初始化逻辑function initBarChart(domId, options, data) { const chartDom document.getElementById(domId); if (!chartDom) return; let myChart echarts.getInstanceByDom(chartDom); if (myChart) { myChart.dispose(); // 先销毁旧实例避免内存泄漏 } myChart echarts.init(chartDom, macarons); // 主题来自macarons.js myChart.setOption({...options, series: [{data: data}]}); window.addEventListener(resize, () myChart.resize()); // 绑定窗口事件 }重点在dispose()调用——很多项目漏掉这步导致切换页面时图表实例堆积内存暴涨。我还在index.js的轮询函数里加了节流let lastUpdateTime 0; function fetchData() { const now Date.now(); if (now - lastUpdateTime 5000) return; // 至少间隔5秒 lastUpdateTime now; // 执行ajax... }最后是错误隔离机制。index.js里所有ajax都包裹了try-catch并设置了默认数据$.ajax({ url: /api/population, success: function(res) { renderPopulationChart(res.data || defaultPopulationData); }, error: function() { console.warn(人口数据接口异常使用模拟数据); renderPopulationChart(defaultPopulationData); } });defaultPopulationData是base.js里定义的静态模拟数据格式与真实API完全一致。这样即使后端挂了大屏也不会白屏只是显示“昨日数据”。3. 核心图表实现与数据对接细节3.1 五类核心指标的图表选型逻辑与配置要点社区大屏不是炫技舞台每个图表类型都对应明确的业务意图。我按优先级排序解释为什么选这种图、怎么配置才不误导决策者1. 折线图人口趋势、能耗曲线——看变化速率人口流动和水电能耗必须用折线图因为决策者关心的是“增速是否异常”。比如某小区昨日用水量环比涨30%但折线图若只显示绝对值领导看不出这是连续三天上涨的拐点。所以配置关键点-xAxis.type必须设为time让时间轴自动适配日/周/月粒度-yAxis.splitLine.lineStyle.type设为dashed虚线网格降低视觉干扰-series[0].emphasis.itemStyle.color单独设置高亮色如#FF6B6B鼠标悬停时突出当前点- 最重要的是dataZoom组件启用start: 80, end: 100默认显示最近20%数据避免历史数据拉平曲线。2. 柱状图区域安防告警对比——比绝对差距六个社区的安防告警数用柱状图最直观。但常见错误是直接堆数据导致数值大的柱子遮挡小的。解决方案- 启用grid.left: 12%给Y轴标签留足空间-series[0].label.show设为true但position: top数值标在柱顶而非中间- 关键是yAxis.axisLabel.formatter用{value} 起后缀明确单位- 颜色用color: [#5470C6, #91CC75, #FAC858, #EE6666, #73C0DE, #3BA272]避免红绿对比色盲友好。3. 环形图物业工单类型占比——显结构比例工单分投诉、报修、咨询三类环形图比饼图更合适因为中间空白区域能放汇总数字。配置要点-radius: [40%, 70%]内外半径差保证环形宽度-label.normal.formatter: {b}: {d}%显示类别名和百分比-center: [50%, 55%]向下偏移5%给底部标题留空间- 最重要的是legend位置orient: vertical, left: right, top: center避免遮挡图表。4. 热力地图小区人口密度——标空间分布china.js提供省级地图但社区需要市级细化。我在infographic.js里做了两层处理- 先用echarts.registerMap(shanghai, shanghaiGeoJson)注册上海地图shanghaiGeoJson是base.js里内置的JSON- 再用geoCoord映射小区坐标{name: 静安寺街道, value: [121.45, 31.22]}- 热力图visualMap配置min: 0, max: 5000, calculable: true滑块可手动调节阈值。5. 仪表盘内网设备在线率——盯关键阈值在线率98.7%这种数字必须用仪表盘。但ECharts默认仪表盘刻度太密我精简了-series[0].detail.formatter: {value}%去掉小数点后零-series[0].axisTick.show: false隐藏刻度线-series[0].splitLine.lineStyle.width: 0取消分割线- 关键是series[0].pointer.color根据数值动态变色95%红95-98%黄98%绿代码在base.js的getPointerColor()函数里。3.2 数据接口对接的标准化流程与安全实践“支持自定义数据接口对接”不是一句空话。我设计了一套零学习成本的替换流程连物业公司的实习生都能操作第一步定位接口配置点所有ajax请求集中在index.js的fetchData()函数里每个模块都有清晰注释// 【人口数据】接口地址返回格式{code: 200, data: [{name: 静安寺, value: 12500}, ...]} $.ajax({url: /api/community/population, ...}); // 【安防告警】接口地址返回格式{list: [{time: 2024-05-20 14:30, type: 消防, level: 高危}]} $.ajax({url: /api/community/alarm, ...});第二步修改URL并验证格式只需改URL其他不变。但必须确保后端返回JSON符合约定。我在README.md里列了每个接口的最小可行响应示例{ code: 200, msg: success, data: [ {name: 徐汇区, value: 12500}, {name: 长宁区, value: 9800} ] }注意code字段必须存在data必须是数组。如果后端用result代替data只需在success回调里加一行res {data: res.result}。第三步处理跨域与认证内网系统常有登录态校验。index.js里预留了header配置$.ajax({ url: /api/energy, headers: { Authorization: Bearer localStorage.getItem(token) || } });如果后端用Cookie校验直接删掉headers段即可——jQuery默认携带Cookie。安全实践上我做了三件事- 所有接口路径用相对路径/api/xxx避免硬编码域名部署到不同环境无需改代码-base.js里加了isProduction()函数开发环境打印详细错误生产环境只记录console.warn-README.md里明确警告“禁止在前端存储敏感token建议后端通过反向代理透传认证头”。3.3 视觉资源的组织逻辑与替换指南img/目录下的32个文件不是随意堆放的而是按视觉功能分层背景图bg_img*.png共5张对应首页、人口、安防、能耗、物业五大模块。命名规则bg_imgXX.png中XX是模块序号bg_img01.png是首页主背景带半透明磨砂效果避免文字覆盖bg_img04.png是能耗模块背景蓝色渐变暗示水电主题。标题边框border_*.pngborder_bg01.png用于顶部标题栏title_border.png用于各模块标题两者区别在于前者带阴影后者纯色描边——因为顶部标题需要更强视觉锚点。图标与装饰*.pngline_img.png是折线图右侧的装饰线条box_title.png是模块标题背景jinghui.png是静安区logo可直接替换为本地区标。替换指南写在README.md里分三步1.背景图替换保持同名同尺寸bg_img01.png必须是1920×1080否则style.css里的background-size: cover会拉伸失真2.图标替换popUP_bg.png是弹窗蒙层必须是PNG透明底尺寸不限但建议800×6003.Logo替换jinghui.png放在根目录index.html里img srcjinghui.png会自动加载无需改代码。我甚至预留了img/icon/目录但没放任何文件——因为很多社区要加自己的二维码扫码报修直接扔进去就行style.css里已写好.qr-code { width: 12rem; height: 12rem; }。4. 实操部署与二次开发全流程4.1 本地预览与Nginx/Apache部署实录“本地双击index.html即可预览”听起来简单但实际有坑。我记录了三种环境的实操过程场景一Windows双击预览最常用- 直接双击index.html浏览器地址栏显示file:///D:/smart-community/index.html- 此时jquery-3.3.1.min.js等本地JS能加载但echarts.min.js若用CDN则正常若用本地路径需确认文件存在-关键问题Chrome 90默认禁用file://协议下的AJAX所以模拟数据会生效但真实接口无法调用-解决方案在index.js里加判断if (location.protocol file:) { console.log(本地预览模式使用模拟数据); useMockData true; }然后所有ajax都走mockData.js我放在base.js里内置了。场景二Python简易服务器适合调试- 命令行进入项目根目录执行python -m http.server 8000- 浏览器访问http://localhost:8000- 此时所有相对路径正常AJAX可调用需后端开启CORS-注意Python 2.x用python -m SimpleHTTPServer 8000Python 3.x才用http.server。场景三Nginx正式部署推荐- 将整个目录拷贝到/usr/share/nginx/html/smart-community/- 修改Nginx配置location /smart-community/ { alias /usr/share/nginx/html/smart-community/; index index.html; try_files $uri $uri/ /smart-community/index.html; }关键是try_files指令确保前端路由如有能 fallback权限检查chown -R nginx:nginx /usr/share/nginx/html/smart-community避免403错误。Apache部署类似只需在.htaccess里加RewriteEngine On RewriteBase /smart-community/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /smart-community/index.html [L]4.2 二次开发避坑指南从改一个数字到加一个模块我整理了开发者最常踩的7个坑附真实案例坑1改图表颜色后文字看不见- 现象把柱状图颜色改成深蓝结果白色标签被遮住- 原因label.color没同步改默认是#fff- 解决在series[0].label.color里设为#333或用textStyle.color全局设置。坑2热力图不显示控制台报“geo is not registered”- 现象地图空白Console显示Uncaught Error: geo is not registered- 原因china.js没加载或加载顺序错必须在echarts.min.js之后- 解决检查index.html里script标签顺序china.js必须在echarts.min.js下方。坑3rem缩放后图表变形- 现象浏览器缩放到125%图表容器变窄内容挤在一起- 原因ECharts实例没监听resize事件- 解决在initXXXChart()函数末尾加window.addEventListener(resize, () myChart.resize())。坑4添加新模块后旧图表消失- 现象复制#population-chart容器改名为#new-module但人口图不见了- 原因index.js里fetchData()函数只调用了一次initPopulationChart()没调用新图表- 解决在fetchData()末尾加initNewModuleChart()并在infographic.js里写对应函数。坑5中文地图省份名称乱码- 现象上海、北京显示为方块- 原因china.js里name字段是GBK编码但HTML没声明charset- 解决index.html里加meta charsetUTF-8且china.js必须用UTF-8保存。坑6轮询导致浏览器卡死- 现象打开页面几分钟后CPU飙升到100%- 原因setInterval(fetchData, 3000)没做节流且fetchData()里没清理旧定时器- 解决用setTimeout递归替代setInterval并在fetchData()开头加clearTimeout(timer)。坑7部署后图标不显示- 现象border_bg01.png路径404- 原因Nginx配置里alias路径末尾多了斜杠或index.html里img srcborder_bg01.png路径错了- 解决用浏览器开发者工具Network面板看404请求路径对比index.html里的src属性。4.3 中英文README的编写逻辑与实用价值README.md和README.en.md不是翻译关系而是针对不同读者的定制化文档中文版面向社区工作人员语言直白步骤编号带截图指引。比如“第2步打开index.js文件找到第45行将url: /api/population改为你的接口地址”英文版面向集成开发者侧重API契约和架构说明。比如“The data interface must conform to RFC 8259 JSON standard with mandatorycodeanddatafields”两者都包含故障速查表按症状分类| 症状 | 可能原因 | 解决方案 ||—|—|—|| 图表空白 | ECharts未加载 | 检查echarts.min.js路径 || 数据不更新 | 轮询未触发 | 查看Console是否有fetchData日志 || 文字模糊 | rem计算异常 | 检查rem.js是否执行 |最实用的是接口替换检查清单列了5项必验1. 接口返回HTTP状态码2002. JSON中有code字段且值为2003.data字段存在且为数组4. 数组元素有name和value属性柱状图/环形图5. 时间字段格式为ISO 8601折线图必需。5. 常见问题与排查技巧实录5.1 图表渲染异常的12种典型场景与根因分析我把三年项目中遇到的图表问题归为四类每类给出现场排查步骤A类加载失败白屏/报错-现象1控制台报echarts is not defined- 排查检查index.html中echarts.min.js的script标签是否在index.js之前用浏览器Network面板看该JS是否404- 根因脚本加载顺序错或文件路径错误- 解决把echarts.min.js移到所有JS引用最上方路径用./echarts.min.js确保相对正确。现象2地图显示为空白Console无报错排查在Console执行echarts.getMap(china)返回undefined则地图未注册根因china.js未加载或加载晚于ECharts初始化解决确认china.js在echarts.min.js之后加载且echarts.registerMap(china, ...)执行成功。B类数据不显示图表存在但无内容-现象3柱状图有坐标轴但柱子高度为0- 排查在success回调里console.log(res)看res.data是否为空数组- 根因后端返回空数据或data字段名不匹配- 解决检查后端API文档确认字段名或在index.js里加res.data res.data || []兜底。现象4折线图X轴时间错乱显示1970年排查console.log(res.data[0].time)看时间格式是否为2024-05-20T14:30:00Z根因后端返回的时间字符串不是ISO格式ECharts无法解析解决后端改用ISO格式或前端用moment(res.data[i].time).format(YYYY-MM-DD HH:mm:ss)转换。C类样式错位布局混乱-现象5标题边框title_border.png只显示一半- 排查用开发者工具检查该元素的width和height看是否被父容器overflow: hidden裁剪- 根因style.css里.module-title的height设为固定值但图片高度超出- 解决改用min-height或给图片加object-fit: contain。现象6响应式缩放后热力图点位偏移排查console.log(myChart.getWidth(), myChart.getHeight())看尺寸是否随窗口变化根因ECharts实例没绑定resize事件解决在initHeatmapChart()末尾加window.addEventListener(resize, () myChart.resize())。D类交互失效点击无反应-现象7仪表盘指针不动但Console显示数据已更新- 排查console.log(myChart.getOption().series[0].data)看数据是否传入- 根因setOption()时没触发重绘或data格式错误应为[value]数组- 解决确保series[0].data [98.7]不是98.7或{value: 98.7}。5.2 性能优化实战从800ms到120ms的加载提速大屏首屏加载超过500ms领导就会觉得“卡”。我做了三轮优化第一轮资源加载优化- 将jquery-3.3.1.min.js从CDN迁移到本地减少DNS查询- 合并小图标line_img.png、box_title.png等6个PNG合成一张雪碧图sprite.png用CSSbackground-position定位- 结果加载时间从800ms降到620ms。第二轮图表初始化优化- 延迟初始化非首屏图表#energy-consumption模块在DOM加载后300ms再初始化- 用requestIdleCallback替代setTimeout确保主线程空闲时执行- 结果首屏渲染时间降到380ms。第三轮ECharts配置精简- 关闭所有动画animation: falseanimationDuration: 0- 简化提示框tooltip: {show: false}鼠标悬停时再动态启用- 减少网格线xAxis.splitLine.show: falseyAxis.splitLine.show: true只保留Y轴- 结果最终首屏加载稳定在120ms内实测i5-8250U笔记本上帧率保持60fps。5.3 安全加固与合规注意事项虽然这是前端代码但社区场景有特殊要求HTTPS强制README.md里明确要求“部署必须启用HTTPS禁用HTTP访问”因为内网系统常含敏感数据CSP策略在index.html里加meta http-equivContent-Security-Policy contentdefault-src self; script-src self unsafe-inline; img-src self data:;禁止外链脚本XSS防护所有图表title.text、tooltip.formatter都经过escapeHtml()处理base.js里内置了转义函数数据脱敏mockData.js里的模拟数据全部用假名如“静安寺街道”而非真实小区名避免泄露隐私审计日志index.js里加了console.log([Audit] Chart rendered at new Date().toISOString())方便追溯问题。最后分享个小技巧每次部署前用Chrome的Lighthouse跑一次审计重点关注“Accessibility”和“Best Practices”两项。我设定了红线——如果“Color Contrast”得分低于90就必须调整文字颜色如果“Avoids Application Cache”报错说明用了过时的manifest要删掉。这不是为了分数而是确保每个社区老人用放大镜看屏幕时依然能看清告警数字。本文还有配套的精品资源点击获取简介直接可用的社区级数据可视化前端工程用纯HTMLCSSJS实现不依赖Vue、React等框架。首页index.html已集成ECharts 5.x图表库和中文地图数据china.js支持人口分布、安防告警、水电能耗、物业工单、内网设备状态等5类核心指标实时展示。内置折线图看趋势、柱状图比区域、环形图显占比、热力地图标密度、仪表盘显关键数值。所有样式通过style.css统一管理适配PC大屏及常见分辨率rem.js保障缩放一致性图标、背景图、标题边框等视觉资源齐全放在img/或根目录下。JavaScript逻辑拆分为index.js主控、infographic.js图表初始化、base.js工具函数等模块方便二次开发。附带中英文README说明部署方式和接口替换方法本地双击index.html即可预览也可部署到Nginx/Apache。数据源默认模拟实际使用时只需修改ajax请求地址对接后端API支持JSON格式返回。本文还有配套的精品资源点击获取