基echarts实现的地图，⼤屏数据可视化
基echarts实现的地图，⼤数据数据可视化
1、课程⽬标：
实践css布局相关技术
实践jquery相关技术
掌握echarts的基本使⽤
2、项⽬介绍
我们要完成这个项⽬：需要使⽤⼀些基础的DIV+CSS布局，还引⼊了⼀些C3技术，还引⼊了各类图表的绘制，以及⾼级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …
需要具备知识：
完成该项⽬需要具备以下知识：
div + css 布局
flex 布局
css3动画
css3渐变
css3边框图⽚
原⽣js + jquery 使⽤
rem适配
echarts基础
3、Echarts-介绍
理解：实际上就是⼀个JS插件，可以运⾏在PC和移动设备，兼容主流浏览器，提供⾮常多的图表(折线图，柱状图，散点图，饼图，K线图)
4、Echarts-体验
2、进⼊echarts dist/echarts.min.js【引⼊】
3、准备⼀个具备⼤⼩(宽⾼)的 DOM
<div id="main" ></div>
4、初始化echart实例
通过：echarts.init实例化⼀个容器(内部返回)
var myChart = echarts.ElementById('main'));
5、指定图表的配置项和数据 (根据⽂档提供⽰例到option)
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：调⾊盘颜⾊列表【数组传递】
演⽰代码：
html的flex布局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可以实时监控⼤⼩】
页⾯初始化，就需要⼀个基准值，
(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、页⾯改变的时候也需要设置
/
/ 尺⼨改变事件
setFont();
}
})();
注意：书写CSS代码，让px转换rem单位，使⽤⼀个cscode插件 cssrem
vscode插件搜索cssrem，进⾏安装既可
需要在设置中cssrem换算的时候使⽤80的⽐例
// rem换算
"FontSize": 24,//【计算时的基准值】
"cssrem.fixedDigits":// 3,【取三位⼩数】
"cssrem.autoRemovePrefixZero": false,//【是否去除0】
1920设计稿，⽐例80，基准值24，计算式可能有⼩数，很多位，保留3为有效⼩数，不去除0，例如(0.333)；
7、基础布局
html结构
<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做为背景图，在容器内显⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。