基于ECharts的中国环...数据可视化系统的设计与实现_刘思妤.pdf

SOFTWARE软 件2022第 43 卷 第 12 期2022 年Vol.43,No.12作者简介：刘思妤（2001）,女,辽宁葫芦岛人,本科,研究方向：计算机科学。基于 ECharts 的中国环境保护情况数据可视化系统的设计与实现刘思妤（辽宁师范大学计算机与信息技术学院，辽宁大连 116000）摘要：目前,用户可获取环保领域数据的途径众多,但所得到的数据往往以表格作为载体,只可凭借传统图表分析进行相关工作的展开,这导致了用户体验的下降。因此,本文提出基于 ECharts 可视化技术并结合 HTML5、CSS3 和 JavaScript技术搭建中国环境保护情况数据可视化系统,为相关研究人员及普通民众提供了交互式、动态数据可视化平台,并可应用于环保事业单位或教育教学部门的数字大屏,在弥补环境保护类可视化平台缺失的同时提升了全民环境保护意识。关键词：ECharts；数据可视化；交互信息设计；数据挖掘中图分类号：TP311.52文献标识码：ADOI：10.3969/j.issn.1003-6970.2022.12.040本文著录格式：刘思妤.基于ECharts的中国环境保护情况数据可视化系统的设计与实现J.软件,2022,43(12):152-155Design and Implementation of Chinas Environmental Protection Data Visualization System Based on EChartsLIU Siyu（Liaoning Normal University,the School of Computer and Information Technology,Dalian Liaoning 116000)【Abstract】：Atpresent,therearemanywaysforuserstoobtaindatainthefieldofenvironmentalprotection,buttheobtaineddataisoftenbasedontables,andrelatedworkcanonlybedonewithtraditionalchartanalysis,whichleadstoadeclineinuserexperience.Basedonthis,thispaperproposestobuildadatavisualizationsystemforChinasenvironmentalprotectionsituationbasedonEChartscombinedwithHTML5,CSS3andJavaScripttechnology,providinganinteractiveanddynamicdatavisualizationplatformforrelevantresearchersandordinarypeople,andcanbeappliedtothedigitallargescreenoftheenvironmentalprotectioninstitutionsortheeducationsector,whichnotonlymakesupforthelackofenvironmentalprotectionvisualizationplatforms,butalsoimprovesthenationalenvironmentalprotectionawareness.【Key words】：ECharts;datavisualization;interactiveinformationdesign;datamining设计研究与应用0 引言随着“绿水青山就是金山银山”“碳中和”“碳达峰”等理念的深入人心,“环保”成为了我国民生工程的关注点1。同时,生态文明建设的不断发展,生态文明体制的深化改革,以及大数据、“互联网+”等信息技术的迅速发展,促使大数据技术成为推进生态文明建设的重要手段,在生态环境保护中的作用越来越明显2。然而,针对相关领域众多且数据量庞大的环境保护情况进行分析,若采用传统图表的方式,其虽具备“图文并茂”的特点,但数据之间相互割裂,容易引起研究人员及大众的视觉疲劳。基于此,为深入挖掘我国近 10 年来在环境保护上的发力点及重大成果,宣扬我国在环境保护上的卓越贡献。本系统以中国国家统计局官网的真实数据为主要研究对象,基于ECharts可视化技术将海量数据用可视化、交互式的图形图表进行展示。在保证科学性的同时,又兼顾了美观性和实用性,更加便捷了环保相关的从业人员或民众了解我国 2011-2020 年间环境保护相关数据、政策解释以及节能环保产业的发展情况等,认识到在环境保护上的“中国智慧”“中国方案”,意识到在“十二五”“十三五”时期中国环保有着十分精彩的 10年,更抱有期待展望“十四五”。以数据共享为前提,153刘思妤：基于 ECharts 的中国环境保护情况数据可视化系统的设计与实现打破了系统内的“信息孤岛”与“数据壁垒”,推进了我国智慧环保大数据平台的建设3。1 需求分析大数据所引发的变革逐渐渗透到各行各业,在生态环境领域中,大数据能够通过分析整合创造出新的价值、实现更好的效果4。对于节能环保产业,其需了解国家近年来的环境数据,贴合环境自身的变化趋势并借助国家的政策支持,进而实现领域的发展创新；对于生态环境宣教工作,其需构建一种便于受众者理解的教育模式,而可视化、交互式的图形图表设计往往能够在教学宣讲中发挥一定的辅助作用,进而实现生态文明建设的提升。综上所述,也就需要一种既能够实现环境数据高效整合又可使其可视化的手段和工具。2 系统设计2.1 数据来源本系统采用的数据来源正规,具有可查证性。环保领域数据类型选用广泛,囊括水资源、森林资源、大气资源、无害工厂数量等诸多方面。由于,网络爬虫已成为大数据时代最重要的信息收集方式5,为提升系统中数据获取的效率,本系统处理的数据均借助网络爬虫技术获取,其中中国环境数据来自中国国家统计局官网,环境保护类的政策文件内容来自中华人民共和国生态环境部门,热搜词云的词语及其频数数据则来自中国知网。2.2 系统架构本文提出设计基于 ECharts 的中国环境保护情况数据可视化系统,ECharts 是基于 HTML5 Canvas 的图标库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器6。系统的前端采用了多页面大屏的显示,使用 ECharts.min.js 组件,ECharts.min.js 所提供的众多图表工具利用自身渲染功能并结合 CSS3 技术可实现图表样式的重绘,完成定制形象可视化图形图表的工作,增加了大屏显示的可视交互效果。系统的后端则是进行解析爬取的环境保护数据的 Excel 表格并进行预处理工作,同时通过 Python 编程语言将其转换成 JSON 格式,最后将数据返回至前端,用户端可通过系统的部署链接或 exe可执行程序直接进行访问使用,架构流程图如图 1 所示。本系统共计包括 4 个界面,分别为首页、热搜词云、政策解释和节能环保。本系统界面的配色上,以暗绿色为背景色调,达到了凸显可视化图形图表的效果,并且图表内对比数据采用互补色显示,保证了全局的色彩平衡,实现了将海量环境保护数据以可视化、交互的形式呈现给用户,降低了用户对于环境保护领域的认知负担。本系统功能体系架构图如图 2 所示。2.3 可视化设计及实现2.3.1 首页在首页界面,共分为左、中、右三栏共计 5 个图形图表模块。左右两栏：展示了我国某些省份地区在有害气体排放、生活垃圾处理、人工造林面积等环境保护数据的统计情况；中间栏：用户可通过顶端图形按钮进行图 1 架构流程图Fig.1 Architecture flowchart图 2 系统功能体系架构图Fig.2 System function architecture diagram映射用户端部署链接exe可执行程序前端HTML5、CSS3、JavaScript技术ECharts.min.js组件可视化图形图表后端预处理工作JSON格式原始数据中国环境保护情况数据可视化系统首页热搜词云政策解释节能环保政策规划相关标准法律法规地区分布专利细分产业产值规模走势科普视频154软 件第 43 卷 第 12 期SOFTWARE切换全国水资源或人工造林面积数据的展示,用户通过时间轴的自动推移或人为选中结点进行跳转至某一年份中国各个省份地区相关环境数据统计情况,以地图中亮点面积和右侧条形图来共同反应排名情况,用户拖动鼠标可进行地图细节的放大,并且通过点击某个省份的亮点还可跳转至该省份地区的生态环境厅官网,如图 3 所示。2.3.2 热搜词云在热搜词云界面,以彩色的、可拖动式的矢量圆形作为载体构成词云网络,展示了在中国知网中搜索“环境保护”四字所出现的相关词语频数,频数越大,矢量圆形的面积也就越大,增加了可视化交互效果,如图 4 所示。2.3.3 政策解释在政策解释界面,包括政策规划、相关标准和法律法规 3 个子页面,以时间流向的形式展示了自 2011 年起国家出台的具有代表性的、惠及人民生产生活的相关文件,鼠标滑动至文件名称左侧圆点还可实现文件内容的具体展示。2.3.4 节能环保在节能环保界面,二级菜单中包括节能环保产业地区分布、专利细分、产业产值、规模走势和科普视频,以浮动框架的形式展示了契合于我国十年来在环境保护领域突飞猛进背景下,我国节能环保产业的相关发展情况,又考虑到“碳中和”于 2021 年被写入了政府工作报告,因此将“碳中和”“碳达峰”的 MG 科普动画嵌入该页面中,如图 5 所示。3 系统实现3.1 平台界面本系统以中国国家统计局官网的全国各个省份地区的多类别环境数据为主要研究对象,相关环境数据可视化界面如图 3 所示。以系统的首页界面为例,在该页面布局设计上,其上层布局设计从大气资源的角度出发,展示了山东省二氧化硫排放量变化及部分省份无害工厂图 3 首页界面Fig.3 Home interface图 4 热搜词云界面Fig.4 Hot search word cloud interface155刘思妤：基于 ECharts 的中国环境保护情况数据可视化系统的设计与实现数量占比情况。下层布局采用 2 个双折线图,从中可看出双变量的共同走势。对于页面中心位置的中国地图的实现,由于百度地 图 API 能 在 Windows、Mac、Linux 的 所 有 平 台中使用7,考虑到网络平台的适用性,遂调用百度地图的 API 并与条形图对象和底部的时间轴组件绑定来实现10 年间（2011-2020 年）全国省份地区人工造林面积及水资源数据统计情况的形象显示。3.2 实例数据分析如图 3 所示：（1）山东省二氧化硫排放量分析：左栏上层山东省二氧化硫排放量变化条形图,2011 年该省二氧化硫排放量为 182.74 万吨,2020 年该省二氧化硫排放量为 19.33 万吨,同比 2011 年排放量下降了89.42%,可见山东省近年来在大气治理上取得了一定成就。（2）中国生活垃圾处理情况分析：左栏下层生活垃圾处理情况折线图,在 2011-2020 年,垃圾清运量及无害处理量逐年递增,其中 2019 年垃圾清运量及无害处理量达到最高水平,分别为 24206 万吨和 24012万吨,可见我国在垃圾处理无害化付出了很大的努力。（3）某年全国水资源排名情况分析：中间栏全国水资源数据统计条形图,需手动点击时间轴中具体年份结点,通过条形图排名情况及中国地图中各个省份亮点面积的大小共同反映。西藏自治区水资源含量连续 10 年位居全国第一名,由此可见,西藏自治区水资源丰厚,可进行有效开发利用。（4）2020 年部分省份无害工厂数量分析：右栏上层 2020 年部分省份无害工厂数量占比玫瑰图。以全国无害工厂数量居前五的省份：河北省、浙江省、江苏省、山东省和广东省为例进行分析,其数量分别为 118、97、85、76、59。（5）北京市森林资源与图 5 节能环保界面Fig.5 Energy saving and environmental protection interface水资源总量分析：右栏下层北京市森林资源与水资源总量占比分析双折线图,通过点击图例,可选中单一数据进行观察,可见,北京市水资源总量在 20 40 亿公顷之间波动。4 结语本系统契合于时代热点,关注节能环保对于人民生产、生活的影响。多个页面编排有序得当,整体界面布局工整。在保证环境保护数据的可视化效果的同时,增强了图形图表之间关联,除了引入传统的统计图,例如,条形图、折线图和饼图之外还选择了玫瑰图、散点图和时间流向式图进行数据可视化展示,进一步增强了可视化界面的交互效果,更为当下环保数据挖掘和大数据分析提供了技术支持。参考文献1王旭.习近平生态文明思想的科学内涵探析J.云南社会主义学院学报,2022,24(1):94-101.2吴寅.简述大数据在环境保护中的作用J.广州化工,2020,48(4):94-95+118.3兰延文,郭丽君,李森.大数据背景下的智慧环保建设与改进措施讨论J.资源节约与环保,2021(9):135-138.4张晨.大数据时代下环保人的宣教工作J.环境教育,2021(4):40-41.5刘晓魁.网络爬虫技术与策略分析J.网络安全技术与应用,2022(5):17-19.6冀潇,李杨.采用ECharts可视化技术实现的数据体系监控系统J.计算机系统应用,2017,26(6):72-76.7向玉云,高爽,陈云红,等.百度、高德及Google地图API比较研究J.软件导刊,2017,16(9):19-21+25.