Echarts介绍
数据可视化
数据可视化主要目的：借助图形化手段，清晰有效地传达与沟通信息
数据可视化可以把数据从冰冷地数字转化为图形，揭示蕴含在数据中的规律和道理
Echarts简介
Echarts是一个JavaScript实现的开源可视化库，可以流畅的运行在PC和移动端设备上，兼容当前大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网地址：echarts.apache.org/zh/index.ht…
Echarts基本使用
Echarts使用五部曲
1.下载并引入Echarts.js文件
<script src="./echarts.js"></script>
2.准备一个具备大小的DOM容器
<div class='box' style="width: 600px;height:400px;"></div>
3.初始化echarts实例对象
var myChart = echarts.init(document.querySelector('.box'))
4.指定配置项和数据（opation）
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
5.将配置项设置给echarts实例对象
myChart.setOption(option);
基础配置
- title：标题组件
- tooltip:提示框组件
- legend：图例组件
- toolbox：工具栏
- grid：直角坐标系内绘制网格
- xAxis：直角坐标系grid中的X轴
- yAxis：直角坐标系grid中的y轴
- series：系列列表
- color：调色盘颜色列表
折线图
步骤
- 封装好函数，为后续传入真实数据做准备
- 初始化echarts
- 设置配置项，空的option 即可
- 创建图表
- 查找官方示例
- 按需求，自定义配置图表
自定义配置
-
将官方示例中除了option之外的其他代码删除，并自己添加X轴数据和series中的数据。
-
系列数据
- 增加一条线
- 修改 name 为 '期望薪资' 和 '实际薪资'
- 线的拐点为平滑拐点
- 线条和X轴对齐位置，无特殊标记
symbol: 'none'
-
分析数据缩放组件
dataZoom -
增加标题，标题颜色 #6d767e
-
分析tooltip（官方示例已带）。
-
增加图例，距离顶部20px。
-
分析坐标轴留白策略
boundaryGap完成后的配置项 option 如下：
let option = {
// 图例
legend: {
top: 20,
},
// 鼠标移入的提示
tooltip: {
trigger: 'axis', // 轴触发
position: function (pt) {
// pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
// 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
return [pt[0], '10%'];
}
},
// 标题
title: {
text: '薪资 Salary',
textStyle: {
color: '#6d767e'
}
},
xAxis: {
type: 'category',
boundaryGap: false, // x轴两边的留白策略，false表示不留空白
data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
},
yAxis: {
type: 'value',
// Y轴类型为value，则留白策略指的是对数据的延伸。
// 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
boundaryGap: [0, '50%'],
},
// 数据缩放组件
dataZoom: [
// {
// type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
// start: 0,
// end: 10
// },
{
type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
start: 0, // 拖动滑块起始位置（这是一个百分比）
end: 15 // 拖动滑块结束位置（这是一个百分比）
}
],
// 数据部分
series: [
{
name: '期望薪资',
type: 'line',
smooth: true, // 表示使用平滑曲线
symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
itemStyle: { // 单独控制这条线的颜色
color: '#ee6666'
},
data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
},
{
name: '实际薪资',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: { // 单独控制这条线的颜色
color: '#5470c6'
},
data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
}
]
};
柱状图
步骤
- 封装好函数，为后续传入真实数据做准备
- 初始化echarts
- 设置配置项，空的option 即可
- 创建图表
- 查找官方示例
- 按需求，自定义配置图表
自定义配置
-
修改X轴及series中的数据
['1组', '2组', '3组', '4组', '5组', '6组', '7组'] [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78] [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2] [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4] [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4] 复制代码 -
多个Y轴
- 第一个y轴（索引0）表示平均分，范围0~100，根据数字10，将Y轴分为10份
- 第二个y轴（索引1）表示人数，范围0~10（根据班级情况而定），根据数字1，将y轴分为10份。
-
系列数据
- 增加至 4 组数据，并修改每组 name
- 修改每个柱子的宽度为 15px
- 让平均分使用第一个Y轴（
yAxisIndex: 0），让人数使用第二个Y轴（yAxisIndex: 1）
-
调整网格（图表的宽高）
- 上下 30px，左右 7%
-
分析tooltip（官方示例已带）
let option = {
// 网格（整个图表区域设置）
grid: {
top: 30,
bottom: 30,
left: '7%',
right: '7%'
},
// 鼠标移入的提示
tooltip: {
trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
axisPointer: { // 坐标轴指示器配置项
// 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// 图例
legend: {},
// X轴
xAxis: [
{
type: 'category',
data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
type: 'shadow'
}
}
],
// Y轴
yAxis: [
{
type: 'value',
min: 0, // y轴数据最小值
max: 100, // y轴数据最大值
interval: 10, // step步长，把y轴的数据分成多少份
axisLabel: { // Y轴文字设置
formatter: '{value}分', // Y轴文字
}
},
{
type: 'value',
min: 0,
max: 10,
interval: 1,
axisLabel: {
formatter: '{value}人'
}
}
],
// 数据部分（4组数据）
series: [
{
name: '平均分',
type: 'bar',
data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
barWidth: '15',
},
{
name: '低于60分人数',
type: 'bar',
data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
barWidth: '15',
yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
},
{
name: '60到80分之间',
type: 'bar',
yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
barWidth: '15',
data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4]
}
,
{
name: '高于80分人数',
type: 'bar',
yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
barWidth: '15',
data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
}
]
};
饼状图
步骤
- 封装好函数，为后续传入真实数据做准备
- 初始化echarts
- 设置配置项，空的 option 即可
- 创建图表
- 查找官方示例
- 按需求，自定义配置图表
自定义配置
-
增加标题，标题颜色 #6d767e
-
增加鼠标移入提示。（比如：“各地学员分布 北京市 12人 占比6.8%”）
-
系列数据
- 修改 name 为 '各地学员分布'
- 饼图，内圈半径 10%，外圈半径 60%
- 居中显示
- 面积模式
- 扇形轮廓圆角（4px） 完成后的配置：
let option = {
tooltip: {
// {a} 表示series中的name
// {b} 表示数据中的series.data中的name
// {c} 表示每一项的值
// {d} 表示百分比
formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
},
title: {
text: '籍贯 Hometown',
textStyle: {
color: '#6d767e' // 标题演示
},
},
series: [
{
name: '各地人口分布',
type: 'pie', // pie 表示饼图
radius: ['10%', '65%'], // 内外圈的半径
center: ['50%', '50%'], // 中心点
roseType: 'area', // area表示面积模式，radius表示半径模式
itemStyle: { // 每一项的设置
borderRadius: 4, // 扇形边缘圆角设置
},
data: [
{ value: 40, name: '北京' },
{ value: 38, name: '山东' },
{ value: 32, name: '上海' },
{ value: 30, name: '江苏' },
{ value: 28, name: '河北' },
{ value: 26, name: '山西' },
{ value: 22, name: '河南' },
{ value: 18, name: '辽宁' }
]
}
]
};
数据可视化项目适配方案
需求分析
- 设计稿是1920px
- pc端适配：宽度在1024~1920之间页面元素宽高自适应
适配方案
- flexible.js 检测浏览器宽度 修改html文字大小
- rem单位 页面元素根据rem适配配合cssrem插件
- flex布局 页面快速布局
/* 宽度在1024~1920之间页面元素宽高自适应 */
@media screen and (max-width:1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (max-width:1920) {
html {
font-size: 80px !important;
}
}
.box {
width: 400px;
height: 400px;
background-color: pink;
}
