一、要求:
1、可以通过地图的形式来直观显示疫情的大致分布情况,还可以查看具体省份的疫情统计情况。
2、在全国地图上使用不同的颜色代表大概确诊人数区间,颜色的深浅表示疫情的严重程度,可以直观了解高危区域;
3、鼠标移到每个省份会高亮显示、点击鼠标会显示该省具体疫情情况、点击某个省份显示该省疫情的具体情况
4、显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数;
二、设计思路
1、中国各省份地图界面使用 echart.js 和 china.js 工具显示,以完成要求 1。
2、设置一个从蓝到红的颜色条对于人数从0到35000,之后工具会自动的按照人数比例展示颜色比例,以完成要求 2。
3、自定义,echart 的 tooltip(提示框)按要求去设置提示框的内容,这样就可以实现要求 3、4 鼠标悬停显示详细信息。
4、请求数据,在界面使用ajax请求某天的数据。
5、准备数据,按照用户输入的日期将数据库的数据封装的一个list中。
6、格式转换,使用 Gson 工具将 list 转换成 json 格式的数据,返回给界面。
7、数据处理,将自己的数据转换成 echart 的标准 数据形式(数组)。
三、编写过程中的问题
1、自定义,echart 的 tooltip(提示框)时 只能获取到 name (省的名称)的值和 value (确诊人数)的值(决定颜色),而获取不到自定义的键值对!(注:name、value的名字是固定的不能改)!
解决方法:params['data'].dead_num 而不是直接 params.dead_num(注:这里的'data'是固定的)!
2、chain.js 工具的地区名称和自己的数据的名称不对应
解决方法:自定义名称映射 nameMap
nameMap : {
'南海诸岛' : '南海诸岛', '北京' : '北京市', '天津' : '天津市', '上海' : '上海市', '重庆' : '重庆市', '河北' : '河北省', '河南' : '河南省', '云南' : '云南省', '辽宁' : '辽宁省', '黑龙江' : '黑龙江省', '湖南' : '湖南省', '安徽' : '安徽省', '山东' : '山东省', '新疆' : '新疆维吾尔自治区', '江苏' : '江苏省', '浙江' : '浙江省', '江西' : '江西省', '湖北' : '湖北省', '广西' : '广西壮族自治区', '甘肃' : '甘肃省', '山西' : '山西省', '内蒙古' : "内蒙古自治区", '陕西' : '陕西省', '吉林' : '吉林省', '福建' : '福建省', '贵州' : '贵州省', '广东' :