令人惊叹的百度Echarts，大数据分析的必备工具

日期：2021-06-16 栏目：程序人生浏览：次

1.可视化面板介绍
1.1技术要点
1.2案例适配方案
1.3页面主体布局
2.Echarts（重点）
2.1echarts介绍
2.2echarts体验
2.3echarts基础配置
3.Echarts快速使用
3.1官网实例
3.2.社区Gallery

废话少说先上效果图

看完效果图，我在给大家详细的解释一下我们完成这个图所需要的具体的操作与技术吧！

1.可视化面板介绍

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

01-技术要点

div + css 布局

flex 布局

Less

原生js + jquery 使用

rem适配

echarts基础

02-案例适配方案

设计稿是1920px

flexible.js 把屏幕分为 24 等份

cssrem 插件的基准值是 80px
插件-配置按钮—配置扩展设置–Root Font Size 里面设置。
但是别忘记重启vscode软件保证生效

03-页面主体布局

header布局

mainbox布局

公共面板模块 panel

柱形图 bar

因为我们今天的主题是echarts部分所以前面的这些，我就为大家写好框架，里面的布局相信以大家的能力都是分分钟解决的事情。

2.Echarts（重点） echarts介绍

常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

ECharts.js 百度出品的一个开源 Javascript 数据可视化库

Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

AntV 蚂蚁金服全新一代数据可视化解决方案等等

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

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

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

echarts体验

下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0

使用步骤（5大步骤）：
1.引入echarts 插件文件到html页面中
2.准备一个具备大小的DOM容器