数据可视化概念
数据可视化的概念和作用
- 将数据以图表的形式呈现
- 更有效的传达数据中的信息
常见的可视化工具
- 报表类
- BI类
- 编程类
ECharts基础使用
ECharts的介绍
- ECharts是一个使用JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表
- ECharts能满足绝大多数可视化图表实现
- 兼容性强
- 使用方便
- 功能强大
- ECharts官网
ECharts的特点
- 丰富的可视化类型
- 折线图、柱状图、饼图、线图…
- 多种数据格式支持
- key-value数据格式
- 二维表
- TypedArray格式
- 流数据的支持
- 流数据的动态渲染
- 增量渲染技术
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 三维可视化
- …
ECharts的快速入门
- 5分钟上手ECharts
- 步骤1:引入echarts.js文件
- 步骤2:准备一个呈现图表的盒子
- 步骤3:初始化echarts实例对象
- 步骤4:准备配置项
- 步骤5:将配置项设置给echarts实例对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图表的盒子 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 步骤3:初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'))
// 步骤4:准备配置项
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)
</script>
</body>
</html>
ECharts的配置项
- 基础配置
- xAxis:直角坐标系中的x轴(
类目轴category``数值轴value
) - yAxis:直角坐标系中的y轴
- series:系列列表,每个系列通过 type 决定自己的图表类型
- xAxis:直角坐标系中的x轴(
- 通用配置
- title:标题,用于配置标题的各种样式
- 文字样式:
textStyle
- 标题边框:
borderWidth``borderColor``borderRadius
- 标题位置:
left``top``right``bottom
- 文字样式:
- tooltip:提示框,用于配置鼠标滑过或点击图标时的显示框
- 触发类型:
trigger
(鼠标在圆柱内:item``鼠标在竖轴内:axis
) - 触发时机:
triggerOn
(鼠标经过:mouseover``鼠标点击:click
) - 格式化:
formatter
(字符串模板``回调函数
)
- 触发类型:
- toolbox:ECharts提供的工具栏
- 显示工具栏按钮:
feature
- 内置导出图片:
saveAsImage
- 数据视图:
dataView
- 重置:
restore
- 数据区域缩放:
dataZoom
- 动态类型切换:
magicType
- 内置导出图片:
- 显示工具栏按钮:
- legend:图例,用于筛选系列,需要和series配合使用
- legend中的data是一个数组
- legend中的data的值需要和series数组中某组数据的name值一致(全筛选可省略data,默认都有)
- title:标题,用于配置标题的各种样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'))
var option = {
//配置标题
title: {
text: '成绩展示',
textStyle: {
//文字样式
color: 'red'
},
borderWidth: 5, //边框宽度
borderColor: 'blue', //边框颜色
borderRadius: 10, //边框圆角
left: 50, //边框位置
top: 10
},
//配置提示框
tooltip: {
trigger: 'item', //触发类型
triggerOn: 'click', //触发时机
formatter: function (arg) {
//格式化内容
return arg.name + '的分数是:' + arg.data
}
},
//配置工具栏
toolbox: {
feature: {
saveAsImage: {
}, //导出图片功能
dataView: {
}, //数据视图
restore: {
}, //重置
dataZoom: {
}, //数据区域缩放
magicType: {
//动态类型切换
type: ['bar', 'line']
},
}
},
//配置图例筛选
legend: {
data: ['语文', '数学'] //都显示时可以省略
},
//配置X轴
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '小明']
},
//配置Y轴
yAxis: {
type: 'value',
},
//配置图表系列
series: [
{
name: '语文',
type: 'bar',
data: [56, 81, 34, 90],
//显示最大值最小值
markPoint: {
data: [{
type: 'max' }, {
type: 'min' }]
},
//显示平均值
markLine: {
data: [{
type: 'average' }]
},
//显示数值
label: {
show: true,
rotate: 10,
position: 'top'
},
//设置柱宽度
barWidth: '20%',
},
{
name: '数学',
type: 'bar',
data: [86, 61, 64, 40]
}
]
};
myChart.setOption(option)
</script>
</body>
</html>
ECharts的常用图表
7大图表:柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图
柱状图
基本的柱状图:
- 基本的代码结构
- x轴和y轴的数据
- series中的type设置为bar
柱状图常见效果:
- 最大值/最小值
markPoint
- 平均值
markLine
- 数值的显示
label
- 柱的宽度
barwidth
柱状图特点:
- 柱状图描述的是分类数据,呈现的是每一个分类中有多少,通过柱状图,可以很清晰的看出每个分类数据的排名情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'))
var option = {
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '小明']
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
data: [56, 81, 34, 90],
//显示最大值最小值
markPoint: {
data: [{
type: 'max' }, {
type: 'min' }]
},
//显示平均值
markLine: {
data: [{
type: 'average' }]
},
//显示数值
label: {
show: true, //显示
rotate: 10, //角度
position: 'top' //位置
},
//设置柱宽度
barWidth: '30%',
}
]
};
myChart.setOption(option)
</script>
</body>
</html>
折线图
基本的折线图:
- 基本的代码结构
- x轴和y轴的数据
- series中的type设置为line
折线图常见效果:
- 最大值/最小值
markPoint
- 平均值
markLine
- 标注区间
markArea
- 线条控制
smooth``lineStyle
(平滑、风格) - 填充风格
areaStyle
- 紧挨边缘
boundaryGap
- 缩放:脱离0值比
scale
- 堆叠图
stack
折线图特点:
- 折线图常用来分析数据随时间的变化趋势
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'))
var option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
//配置紧挨边缘
boundaryGap: false
},
yAxis: {
type: 'value',
//配置缩放:脱离0值比例
scale: true
},
series: [
{
name: '康师傅',
type: 'line',
//配置堆叠图,两个图的该值要相同
stack: 'all',
data: [1000, 2000, 3000, 2000, 2000, 2500, 1500, 3500, 2200],
//显示最大值最小值
markPoint: {
data: [{
type: 'max' }, {
type: 'min' }]
},
//显示平均值
markLine: {
data: [{
type: 'average' <