这是一款使用echarts编写的比较火炫酷的动态大数据可视化面板,功能算是比较齐全的,感兴趣的可以改改数据,用于自己使用,也是很nice的。详情可以查看演示。
一、可视化项目:
1、基础掌握:
– 实践css布局相关技术
– 实践jquery相关技术
– 掌握echarts的基本使用
2、项目介绍
我们要完成这个项目:需要使用一些基础的DIV+CSS布局,还引入了一些C3技术,还引入了各类图表的绘制,以及高级的地图数据可视化案例。主要功能有:饼状图、柱状图、线形图、地图 …
二、具备知识:
1、完成该项目需要具备以下知识:
– div + css 布局
– flex 布局
– css3动画
– css3渐变
– css3边框图片
– 原生js + jquery 使用
– rem适配
– echarts基础
2、Echarts-介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11XQ,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
理解:实际上就是一个JS插件,可以运行在PC和移动设备,兼容主流浏览器,提供非常多的图表(折线图,柱状图,散点图,饼图,K线图)
4、Echarts-体验
1、下载源码:(文章末尾,包含打包后版本)
2、进入echarts dist/echarts.min.js【引入】
3、准备一个具备大小(宽高)的 DOM
<div id=\"main\" ></div>
4、初始化echart实例
通过:echarts.init实例化一个容器(内部返回)
var myChart = echarts.init(document.getElementById(\'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、使用刚指定的配置项和数据显示图表
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:调色盘颜色列表【数组传递】
演示代码:
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、页面改变的时候也需要设置
// 尺寸改变事件
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);
转载请注明文章来处:稀饭资源网 原文链接地址https://www.xifanzyw.cn/
暂无评论内容