更新时间：2020-01-15 09:59:39
可视化项目：
1、课程目标：
- 实践css布局相关技术
- 实践jquery相关技术
- 掌握echarts的基本使用
2、项目介绍
我们要完成这个项目：需要使用一些基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...
需要具备知识：
完成该项目需要具备以下知识：
- div + css 布局
- flex 布局
- css3动画
- css3渐变
- css3边框图片
- 原生js + jquery 使用
- rem适配
- echarts基础
3、Echarts-介绍
1 | 地址：/ |
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11XQ，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
理解：实际上就是一个JS插件，可以运行在PC和移动设备，兼容主流浏览器，提供非常多的图表（折线图，柱状图，散点图，饼图，K线图）
4、Echarts-体验
1、下载：下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
2、进入echarts dist/echarts.min.js【引入】
3、准备一个具备大小（宽高）的 DOM
1 | <div id="main" ></div> |
4、初始化echart实例
通过：echarts.init实例化一个容器（内部返回）
1 | var myChart = echarts.init(document.getElementById('main')); |
5、指定图表的配置项和数据 (根据文档提供示例找到option)
1 2 3 4 5 6 7 8 9 10 11 12 13 | var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]}; |
6、使用刚指定的配置项和数据显示图表
1 | myChart.setOption(option); |
5、Echarts-基础配置
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
大致划分两大类，有轴的和无轴的
- series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- xAxis：直角坐标系 grid 中的 x 轴
- yAxis：直角坐标系 grid 中的 y 轴【Y依赖数据显示】
- grid：直角坐标系内绘图网格
- title：标题组件
- tooltip：提示框组件【鼠标放上显示】
- legend：图例组件【需要数据有name属性】
- color：调色盘颜色列表【数组传递】
演示代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var option = { xAxis: { type: 'category', data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '用户注册', data: [820, 932, 901, 934, 9222, 1330, 1320], type: 'line' }, { name: '用户数据', data: [820, 932, 600, 934, 1290, 1330, 1320], type: "bar", }], grid: { show: true, // top : 100 }, tooltip: { trigger: "axis" }, title: { text: '年度统计' }, color: ['red', 'yellow'], legend: { data: ['用户注册', '用户数据'] }}; |
6、REM适配
- 设计稿是1920px ，约定rem基准值为 24px （基准值html的font-size）。【不同设配等比显示，例如320和375等设备】
- [1024-1920]
- 那么：设备宽度与rem基准值比例为 80 。
- 结论：适配设备的时候保持80的比例即可。
- 将来：换算rem单位的时候，使用24px基准值即可。
实现代码，在页面底部加载index.js文件实现动态设置基准值逻辑：
【不用媒体查询，需要查询区间，如果用JS可以实时监控大小】
页面初始化，就需要一个基准值，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | (function () { // 1、页面一加载就要知道页面宽度计算 var setFont = function () { // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数 var html = document.documentElement;// 获取html // 获取宽度 var width = html.clientWidth; // 判断 if (width < 1024) width = 1024 if (width > 1920) width = 1920 // 设置html的基准值 var fontSize = width / 80 + 'px'; // 设置给html html.style.fontSize = fontSize; } setFont(); // 2、页面改变的时候也需要设置 // 尺寸改变事件 window.onresize = function () { setFont(); } })(); |
注意：书写CSS代码，让px转换rem单位，使用一个cscode插件 cssrem
- vscode插件搜索cssrem，进行安装既可
- 需要在设置中cssrem换算的时候使用80的比例
// rem换算
"cssrem.rootFontSize": 24,//【计算时的基准值】
"cssrem.fixedDigits":// 3,【取三位小数】
"cssrem.autoRemovePrefixZero": false,//【是否去除0】
1920设计稿，比例80，基准值24，计算式可能有小数，很多位，保留3为有效小数，不去除0，例如（0.333）；
7、基础布局
html结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <div class="viewport"> <div class="column"> <!--概览--> <div class="overview panel"> </div> <!--监控--> <div class="monitor panel"> </div> <!--点位--> <div class="point panel"> </div> </div> <div class="column"> <!-- 地图 --> <div class="map"> </div> <!-- 用户 --> <div class="users panel"> </div> <div class="column"> <!-- 订单 --> <div class="order panel"> <div class="inner"> <!-- 筛选 --> <div class="filter"> </div> <!-- 数据 --> <div class="data"> </div> </div> </div> <!-- 销售额 --> <div class="sales panel"> </div> <!-- 渠道 季度 --> <div class="wrap"> </div> <!-- 排行榜 --> <div class="top panel"> </div> </div> </div> |
- body 设置背景图 ，行高1.15，字体12px，内外边距清除
- viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
- 需要居中显示
- 使用logo.png做为背景图，在容器内显示
- 内间距 88px 20px 0
- column 列容器，分三列，占比 3：4：3
- 中间容器外间距 32px 20px 0
css样式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /* 基础布局 */ body{ font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; font-size: 0.5rem; line-height: 1.15; background: url(../images/bg.jpg) no-repeat 0 0 / cover; } h4,h3,ul{ margin: 0; padding: 0; font-weight: normal; } ul{ list-style: none; } a{ text-decoration: none; } .viewport{ max-width: 1920px; min-width: 1024px; margin: 0 auto; min-height: 780px; padding: 3.667rem 0.833rem 0; background: url(../images/logo.png) no-repeat 0 0 / contain; display: flex; } .column{ flex: 3; position: relative; } .column:nth-child(2){ flex: 4; margin: 1.333rem 0.833rem 0; } |
8、边框图片
css3中自适应边框图片运用：
组合写法：
1 | border-image: url("images/border.jpg") 167/20px round; |
拆分写法：
1 2 3 4 | border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;border-image-repeat: round; |
解释：
- 边框图片资源地址
- 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
- 边框图片的宽度，默认边框的宽度。
- 平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。
DEMO代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边框图片</title> <style> ul{ margin: 0; padding: 0; list-style: none; } li{ width: 350px; height: 160px; border: 20px solid #ccc; margin-top: 20px; } li:nth-child(1){ /*border-image: url("images/border.jpg") 167/20px round;*/ border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; /*环绕 是完整的使用切割后的图片进行平铺*/ border-image-repeat: round; } li:nth-child(2){ /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/ border-image: url("images/border.jpg") 167/20px repeat; } li:nth-child(3){ &n
|