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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

学习目录

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容器

3.初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

4.指定配置项和数据(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'
}]
};

5.将配置项设置给echarts实例对象

myChart.setOption(option);

echarts基础配置

这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴yAxis：直角坐标系 grid 中的 y 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

option = {
// color设置我们线条的颜色注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title: {
text: '折线图堆叠123'
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: 'axis'
},
// 图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图柱状图图表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签如果是true 就显示否则反之
containLabel: true
},
// 工具箱组件可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 设置y轴的相关配置
yAxis: {
type: 'value'
},
// 系列图表配置它决定着显示那种类型的图表
series: [
{
name: '邮件营销',
type: 'line', data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line', data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line', data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line', data: [320, 332, 301, 334, 390, 330, 320]
}
]
};