基于ECharts数据可视化项目

最新推荐文章于 2024-04-26 09:38:30 发布

小白加菲

最新推荐文章于 2024-04-26 09:38:30 发布

阅读量694

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_73198722/article/details/127356222

版权

基于ECharts数据可视化项目

什么是数据可视化

数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

数据可视化的场景

目前互联网公司通常有这么几大类的可视化需求：

在这里插入图片描述

常见的数据可视化库

D3.js : 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js: 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js: 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV : 蚂蚁金服全新一代数据可视化解决方案

Highcharts 和 Echarts 就像是 Office 和 WPS 的关系。

数据可视化项目概述

项目目的

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

项目技术

HTML5 + CSS3 布局；
CSS3 动画、渐变；
jQuery库+ 原生 JavaScript；
flex布局和 rem 适配方案；
图片边框 border-image；
ES6 模板字符；
ECharts 可视化库等等；

ECharts简介

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网地址：https://www.echartsjs.com/zh/index.html

优点：

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明

ECharts的基本使用

ECharts 使用五步曲

在这里插入图片描述

数据可视化项目适配方案

rem适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
  
  插件-配置按钮—配置扩展设置–Root Font Size 里面设置。
  
  但是别忘记重启vscode软件保证生效
3. 要把屏幕宽度约束在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;
     }
 }