echarts数据可视化布局到实现
1、使⽤rem将屏幕划分为多少等分
2、将设计稿⼤⼩除划分的份数,例如 1920/24=80
1rem=80px
3、使⽤cssrem插件设置,插件中点击设置图标选择Extension Settings
旋转动画
animation: rotate1 15s linear infinite;
rotate1调⽤的函数
做动画
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
数据可视化大屏设计Echarts使⽤
1、下载并引⼊echarts.js⽂件 --------图表依赖这个js库
2、准备⼀个有宽⾼的DOM容器 -------------⽣成的图表会放⼊这个容器内
3、初始化echarts实例对象------------------实例化echarts对象
4、指定配置项和数据(option)------------根据需求修改配置选项
5、将配置项设置给echarts实例对象---------让echarts对象根据修改好的配置⽣效
⽴即执⾏函数
为了防⽌变量污染,减少命名冲突,采⽤⽴即执⾏函数,因为⾥⾯都是局部变量
(function () { })();
// 4、让图表跟随屏幕⾃适应
window.addEventListener(‘resize’, function () {
})