系列文章目录

第一章：数据可视化项目基础配置
第二章：数据可视化项目Echarts图表模块
第三章：数据可视化项目数据切换效果模块

文章目录

系列文章目录
项目介绍：
项目展示：
技术分析：
基础布局：
- REM适配
- 布局
- 边框
搭好的基本框架图

项目介绍：

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。
该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

项目展示：

技术分析：

完成该项目需要以下知识：

div + css 布局
flex 布局
css3动画
css3渐变
css3边框图片
rem适配
原生js + jquery 使用
echarts基础

这篇博客先介绍html+css构成的基础框架。

基础布局：

REM适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
（插件-配置按钮—配置扩展设置–Root Font Size 里面设置。

但是别忘记重启vscode软件保证生效）
1. 要把屏幕宽度约束在1024~1920之间有适配，实现代码：

// 实现rem适配
@media screen and (max-width: 1024px) {html {font-size: 42.66px !important;}}@media screen and (min-width: 1920px) {html {font-size: 80px !important;}}

布局

body 设置背景图，行高1.15
viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
- 需要居中显示
- 使用logo.png做为背景图，在容器内显示
- 内间距 88px 20px 0
column 列容器，分三列，占比 3：4：3
- 中间容器外间距 32px 20px 0

<body><div class="viewport"><div class="column"><!--概览-->                                    <div></div><!--监控-->                                    <div></div> <!--点位-->                                    <div></div>                                           </div><div class="column"><!--地图-->                                    <div></div><!--用户-->                                    <div></div>                                          </div><div class="column"><!--订单-->                                    <div></div><!--销售-->                                    <div></div>                                  <div><!--渠道-->                                    <div></div><!--季度-->                                    <div></div></div><!--排行-->                                    <div></div>                                     </div>                        </div>
</body>

/* 基础布局 */
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;
}

边框

面板 .panel
容器 .inner 内边距是上下24px 左右 36px

/* 公共面板样式  */
.panel {position: relative;border: 15px solid transparent;border-width: .6375rem .475rem .25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;margin-bottom: .25rem;
}
.inner {position: absolute;top: -0.6375rem;left: -1.65rem;right: -0.475rem;bottom: -0.25rem;padding: .3rem .45rem;}
.panel h3 {font-size: 0.25rem;color: #fff;font-weight: 400;
}

搭好的基本框架图

接下来可以往每个模块添加图表和数据

数据可视化项目【一】基础配置相关推荐

数据可视化项目【三】数据切换效果模块
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录监控区域-效果切换功能: 动画功能: 销售 ...
ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
数据可视化项目知识点以及代码演示
DAY01-可视化项目项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 ...
ECharts数据可视化项目-大屏数据可视化【持续更新中】
ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用二.技术栈三.数据可视化四.可 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
echarts数据可视化项目搭建（一）
目录直角坐标系通用配置项 tooltip toolbox legend dataZoom 柱状图常见效果折线图常见效果散点图常见效果其他坐标系饼图基本实现常见效果地图地图基本展示 ...
数据可视化项目落地复盘
近期落地了工作中的数据可视化项目,今天原创复盘下这中间的历程. 在复盘前,首先一个问题:数据可视化到底是不是一个需求? 提出这个问题的原因: 数据可视化只是让数据更直观,是数据的另一种展现形式.这种形 ...

数据可视化项目【一】基础配置