浅谈数据分析（二）echarts数据可视化
本篇主要讲述使用echarts制作可视化大屏的一些技巧，同时将其用作数据分析中的数据可视化部分
简介
数据可视化的目的是将一串冰冷的数据用图形或图表的方式展示出来，以便更有效和直观地传达技术。通过数据可视化的方式，抽象离散的数据将更容易被解析识别
可视化适配方案
大屏可视化像素适配一般使用分辨率自适应的方式，响应式的分辨率适配一般用于需要指定设备的需求
获取DPR（Device Pixel Ratio）
DPR即设备像素比率，具体指css像素与设备物理像素的比率，例如，DPR为2则表示一个css像素由2*2个物理像素构成。
获取DPR1
var dpr = window.devicePixelRatio || 1;
设置全局字体大小
监听窗口DOM加载完成后根据获取的dpr设置全局字体大小1
2
3
4
5
6
7
8function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
由于css像素一致而不同设备的物理像素不同，因此，将css像素转化为设备像素，从而使不同dpr设备上的用户有相同的使用体验
设置rem单位
比较px、em、rem
px:绝对像素单位，由css本身决定的像素单位em：相对于父元素字体大小的单位，一般用于相对计算，可以继承叠加，因此当嵌套层数变多后就会难以控制rem：相对于html根元素字体大小的单位，容易计算和统一控制
由此可见，rem自然是最适合做可视化大屏的单位1
2
3
4
5
6
7var docEl = document.documentElement;
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
首先将屏幕宽度分为24份用于容器布局，即1rem对应屏幕宽度的1/24，然后调整根节点字体大小，灵活适应不同分辨率的屏幕
监听屏幕大小的变化
监听resize事件，当屏幕大小变化时，实时重新计算rem大小1
2
3
4
5
6window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
pageshow表示页面打开时触发，e.persisted表示页面资源从缓存中加载时触发
检测0.5px支持
用于在高分辨率设备上使图表更加细致1
2
3
4
5
6
7
8
9
10
11if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
flexible.js完整代码
点击查看完整代码
1 | // 来自 https://github.com/amfe/lib-flexible/blob/2.0/index.js |
echarts使用技巧
echarts官方说明文档echarts
引入echarts
通过CDN或npm引入echarts资源包1
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
或使用npm1
2
3
4
5
6
7npm install echarts --save
//在项目中
import * as echarts from 'echarts';
//在原生html文件中
<script src="/dist/echarts.min.js"></script> //本地资源包地址
使用echarts时需要调用生成函数，在原生html中可以使用立即执行函数调用，在vue中可以在mounted()生命周期钩子中调用初始化函数
初始化echarts表格
准备好一个dom元素，并初始化一个echarts实例
在框架如vue中可以使用ref获取dom实例
1 | var myChart = echarts.init(document.getElementById('main')); |
图表绑定的dom元素需要给一个确定的宽高
设置表格配置项
为echarts表格添加配置项，使其符合使用需求1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52var option = {
// backgroundColor: '#000',
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 70,
left: 'left',
top: 'bottom',
text: ['High','Low'], // 文本，默认为数值文本
calculable: true,
textStyle: {
color: '#fff',
},
inRange: {
color: ['#F9FC91', '#FFBF3F', '#F62929']
}
},
geo: {
map: 'world',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#e6f4f1',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
},
light: { main: { intensity: 1, shadow: true, shadowQuality: 'high' } }
},
series: [
{
type: 'map',
map: 'world',
geoIndex: 0,
data: [{"name":"United States","value":62},{"name":"China","value":21},{"name":"United Kingdom","value":16},{"name":"Japan","value":8},{"name":"France","value":7},{"name":"Italy","value":6},{"name":"Germany","value":5},{"name":"South Korea","value":5},{"name":"Canada","value":4},{"name":"New Zealand","value":3},{"name":"Taiwan","value":3},{"name":"India","value":2},{"name":"Switzerland","value":2},{"name":"Mexico","value":1},{"name":"Lebanon","value":1},{"name":"Cyprus","value":1},{"name":"Qatar","value":1},{"name":"Poland","value":1},{"name":"Spain","value":1},{"name":"Iran","value":1},{"name":"Denmark","value":1},{"name":"Sweden","value":1}]
}
]
};
myChart.setOption(option);
echarts常见配置项一览
详情参照echarts官方配置项文档echarts配置项
标题（title）
标题可以设置主标题、副标题、标题的位置、文本样式等1
2
3
4
5
6
7
8
9
10
11
12
13title: {
text: '主标题', // 主标题文本
subtext: '副标题', // 副标题文本
left: 'center', // 标题的位置，可选值：'left', 'center', 'right'
textStyle: { // 主标题文本样式
color: '#333',
fontSize: 18
},
subtextStyle: { // 副标题文本样式
color: '#aaa',
fontSize: 14
}
}
提示框（tooltip）
提示框用于鼠标悬停时设置数据点展示信息1
2
3
4
5
6
7tooltip: {
trigger: 'axis', // 触发类型，可选值：'item', 'axis', 'none'
axisPointer: { // 坐标轴指示器配置项
type: 'shadow' // 指示器类型，可选值：'line', 'shadow', 'none'
},
formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框格式化文本
}
图例（legend）
图例用于显示图表数据系列的标示1
2
3
4
5legend: {
orient: 'vertical', // 布局方向，可选值：'horizontal', 'vertical'
left: 'left', // 图例位置
data: ['销量'] // 图例数据项
}
网格（grid）
设置表格的内边距以及布局1
2
3
4
5
6grid: {
left: '3%', // 网格左边距
right: '4%', // 网格右边距
bottom: '3%', // 网格下边距
containLabel: true // 是否包含坐标轴的刻度标签
}
坐标轴（xAxis和yAxis）
设置图表的 X 轴和 Y 轴，包含类型、数据、轴线样式等1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18xAxis: {
type: 'category', // 坐标轴类型，可选值：'category', 'value', 'time', 'log'
boundaryGap: false, // 坐标轴两边留白策略
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // 坐标轴数据
axisLine: { // 坐标轴轴线配置
lineStyle: {
color: '#333'
}
}
},
yAxis: {
type: 'value', // 坐标轴类型
axisLine: { // 坐标轴轴线配置
lineStyle: {
color: '#333'
}
}
}
数据系列（series）
图表配置核心，配置具体的数据和图表类型1
2
3
4
5
6
7
8series: [{
name: '销量', // 系列名称
type: 'bar', // 图表类型，可选值：'line', 'bar', 'pie', 'scatter', 等
data: [5, 20, 36, 10, 10, 20], // 系列数据
itemStyle: { // 数据点样式
color: '#3398DB'
}
}]
视觉映射（visualMap）
数据范围映射关系1
2
3
4
5
6
7
8
9
10
11visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#50a3ba', '#eac763', '#d94e5d'] // 映射颜色范围
}
}
工具栏（toolbox）
提供数据视图、下载图片、动态类型切换等多种附加功能1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23toolbox: {
feature: {
saveAsImage: { // 保存为图片
title: '保存'
},
dataView: { // 数据视图
title: '数据视图',
readOnly: false
},
magicType: { // 动态类型切换
type: ['line', 'bar']
},
restore: { // 还原
title: '还原'
},
dataZoom: { // 数据区域缩放
title: {
zoom: '区域缩放',
back: '缩放还原'
}
}
}
}
动态修改图表大小
配置完表格后的最后一步就是监听屏幕分辨率变化，动态设置表格大小
在配置函数最后加上这么一段代码1
2
3window.addEventListener("resize", function () {
myChart.resize();
});
示例结果展示
基于Python爬虫数据，使用echarts制作的豆瓣top100电影票房分析可视化大屏
