Echarts疫情地图

## 一、项目、课程介绍 课程目的： ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。该项目除了使用了基础的页面布局，应用了ECharts技术，快速构建各类图表。主要功能有：柱状图、折线图、地图。 课程目标： ​ 掌握ECharts的使用方式 工具： ​ ECharts、jQuery 简介： - ECharts制作图表 - 原生js 与 jQuery 来操作DOM、数据 - flex 布局 - rem页面适配 代码统计： - css 150行 (有效) - html 30行 (有效) - js 360行 (有效) ## 二、ECharts介绍 ### 基本介绍 ​ ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender](https://github.com/ecomfe/zrender)，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 - JavaScript 库 - 在PC与移动设备性流畅运行 - 兼容主流浏览器 - 提供常用图表，且可**高度定制** ### ECharts示例  ### ECharts官网 https://echarts.apache.org/ ## 三、ECharts的使用 ### 1、基本用法演示 1. 下载ECharts https://github.com/apache/echarts 2. 引入ECharts所需js文件 ``` 引入dist目录下echarts.js文件 ``` 3. 准备图表容器 ``` 图标容器即绘制图表的位置，为一个有宽高的盒子 ``` 4. 初始化echarts实例 ```js echarts.init(DOM对象); // 返回值是echarts实例 ``` 5. 设置图表的配置项 ``` echarts实例.setOption(配置对象); ``` ### 2、部分配置项介绍 - series：系列列表。每个系列通过 `type` 决定自己的图表类型（指定什么类型的图标） - xAxis：直角坐标系x 轴 - yAxis：直角坐标系y 轴 - grid：直角坐标系内绘图网格 - title：标题组件 - tooltip：提示框组件 - legend：图例组件 - visualMap：视觉映射组件  ## 四、书写项目页面布局 ### 1、创建项目结构 - 创建项目目录 - 在页面中引入js、css资源 引入CSS资源 ```html <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> ``` 引入js资源 ```html <script src="js/flexible.js"></script> <script src="js/jquery.min.js"></script> <script src="js/echarts.js"></script> <script src="js/china.js"></script> <script src="js/getSinaData.js"></script> <script src="js/getTecentData.js"></script> ``` ### 2、页面基础布局 HTML结构 ```html <div class="main"> <!-- 头部标题 --> <!-- 疫情数据概述 --> <!-- 中国疫情地图 --> <!-- 疫情确诊数据 --> <!-- 疫情趋势 --> </div> ``` CSS样式 —— 设置部分默认样式 ```css *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } i{ font-style: normal; } em{ font-style: normal; } ``` CSS样式 —— 设置布局容器 ```css body { background-color: #00b1b7; } .main { width: 10rem; padding-bottom: 0.390625rem; margin: 0.390625rem auto; background-color: #fff; border-radius: 0.13020833rem; } ``` ### 3、头部标题 HTML结构 ```html <header> <ul> <li> <a class="active" href="javascript:;">国内疫情</a> </li> <li> <a href="javascript:;">国外疫情</a> </li> </ul> </header> ``` CSS代码 ```css .main header ul { display: flex; border-bottom: 0.01302083rem solid #F5F6F7; } .main header ul li { flex: 1; display: flex; justify-content: center; height: 0.59895833rem; } .main header ul li a { display: flex; align-items: center; color: #000; } .main header ul li a.active { color: #00B1B7; border-bottom: 0.0390625rem solid #10aeb5; } ``` ### 4、疫情数据概述 HTML结构 ```html <div class="details"> <h3 class="title">国内疫情</h3> <h4 class="time">数据更新至 <span>2021.01.17 12:26</span></h4> <ul class="info"></ul> </div> ``` CSS代码 ```css .main .details { padding: 0 0.1953125rem; } .main .details .title { font-size: 0.234375rem; color: #000; margin: 0.26041667rem 0 0.078125rem; } .main .details .time { font-size: 0.1953125rem; font-weight: 400; color: #999999; margin-bottom: 0.390625rem; } .main .details .info { display: flex; flex-wrap: wrap; height: 2.65625rem; } .main .details .info li { width: 25%; text-align: center; margin-bottom: 0.26041667rem; } .main .details .info li h5 { font-size: 0.234375rem; color: #333333; font-weight: normal; } .main .details .info li p { font-size: 0.28645833rem; font-weight: 700; margin: 0.10416667rem 0 0.02604167rem; } .main .details .info li span { display: flex; justify-content: center; font-size: 0.16927083rem; } .main .details .info li span em { color: #999999; } ``` ### 5、中国疫情地图 HTML结构 ```html <section class="china_map"> <nav> <a href="javascript:;" class="active">现有确诊</a> <a href="javascript:;">累计确诊</a> </nav> <div class="title">现有确诊病例数，排除治愈、死亡</div> <div class="content"></div> </section> ``` CSS代码 ```css .main .china_map { height: 8.58072917rem; padding: 0.26041667rem 0.1953125rem 0; background-color: #F8F9FA; } .main .china_map nav { height: 0.52083333rem; border-radius: 0.06510417rem; background-color: #E2E6EB; display: flex; padding: 0.02604167rem; box-sizing: border-box; } .main .china_map nav a { flex: 1; display: flex; align-items: center; justify-content: center; color: #000; } .main .china_map nav a.active { font-weight: 700; background-color: #fff; border-radius: 0.0390625rem; } .main .china_map .title { margin-top: 0.20833333rem; font-size: 0.15625rem; text-align: center; color: #666; } .main .china_map .content { height: 7.3046875rem; } ``` ### 6、疫情趋势 HTML结构 ```html <section class="trend"> <div class="title">全国 总新增确诊/新增境外输入确诊 趋势</div> <div class="content"></div> </section> ``` CSS代码 ```css .main .trend { border: 0.01302083rem solid #ccc; margin: 0.390625rem 0.1953125rem 0; border-radius: 0.06510417rem; box-sizing: border-box; padding: 0 0.1953125rem; } .main .trend .title { font-size: 0.234375rem; color: #555555; font-weight: 700; margin: 0.1953125rem 0; } .main .trend .content { height: 6.2890625rem; } ``` ### 7、疫情确诊数据 HTML结构 ```html <section class="confirm"> <div class="title">新增确诊分布</div> <div class="content"></div> </section> ``` CSS代码 ```css .main .confirm { border: 0.01302083rem solid #ccc; margin: 0.390625rem 0.1953125rem 0; border-radius: 0.06510417rem; box-sizing: border-box; padding: 0 0.1953125rem; } .main .confirm .title { font-size: 0.234375rem; color: #555555; font-weight: 700; margin: 0.1953125rem 0; } .main .confirm .content { height: 6.0546875rem; } ``` ## 五、新浪数据 ### 1、获取数据 #### 请求地址 ```js // 新浪数据地址 https://news.sina.com.cn/project/fymap/ncp2020_full_data.json ``` #### 发出请求、保存数据 ```js $.ajax({ url: 'https://news.sina.com.cn/project/fymap/ncp2020_full_data.json', dataType: "jsonp", jsonCallback:"jsoncallback" }) function jsoncallback(data) { // 1、获取数据 console.log(data); // 2、设置更新时间 // 3、设置详情信息 // 4、设置中国疫情地图 // 5、设置中国疫情新增趋势 } ``` ### 2、设置更新时间 #### 提取相关数据 ```js var allData = data.data; var historylist = allData.historylist; ``