大数据可视化展现之echarts实操
2017-09-08 本文已影响1133人
山东大葱哥
前言
作为大数据分析的最终目的是为了得到某种形式的输出结果，而这些输出结果大都以可视化图表的形式进行展示，当然了有些大数据分析不需要图表展示如推荐系统。
而可视化展现自然需要一套好用的图表插件，市场上有很多可以展现各种图表的插件，今天我给大家介绍的是百度出品的echarts，目前最新版本为echarts3，作为实例我使用的echarts2。
echarts2简介
echarts是一套基于javascript的轻量级图表框架，使用方式非常简单，而展现的图表形式很丰富，而且展现的图表集成了很多实用的交互展示，如可以根据需要对图表中的数据项进行隐藏，支持对数据进行拖拽、可以到处为图片格式等等。
动手操练
本地新建一个html文件，引入echarts，构造对应的展示数据，然后就可以双击这个html文件在浏览器中访问了，就是这么简单，甚至都不需要应用服务器、web服务器的支持。是不是超级轻量级呢。
- 基本的页面代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>数据展示</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用柱状图就加载bar模块，按需加载
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/funnel' //漏斗图
],
function (ec) {
chart1(ec); //绘制chart的函数，便于查看独立出来
}
);
//绘制图表1
function chart1(ec){
//具体代码见下文
}
</script>
</body>
- 直角系图表
2.1. 构造对应直角系绘图代码如下：
function chart1(ec){
//基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
myChart.hideLoading();
var option = {
title : {
text: '2016年每日数据分析',
subtext: '测试数据'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}",
show: true
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data:['注册人数','实名人数','充值人数',
'当日新注册投资人数',"投资总人数","首投人数",
"复投人数","还款人数","提现人数"]
},
xAxis : [
{
type : 'category',
data : ["A月1日","A月2日","A月3日","A月4日","A月5日",
"A月6日","A月7日","A月8日","A月9日","A月10日",
"A月11日","A月12日","A月13日","A月14日","A月15日",
"A月16日","A月17日","A月18日","A月19日","A月20日",
"A月21日","A月22日","A月23日","A月24日","A月25日",
"A月25日","A月25日","A月25日","A月29日","A月30日",
"A月31日"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:"注册人数",
type:'bar',
stack:'group1',//堆积展示
data:[12,10,11,7,4,5,16,15,27,19,13,13,15,29,18,15,23,19,
15,8,26,30,26,22,17,17,17,17,82,70,74]
},
{
name:"实名人数",
type:'bar',
stack:'group1',//堆积展示
data:[7,3,4,4,1,4,7,4,16,4,6,6,4,20,7,8,17,12,4,6,13,13,
15,14,10,10,10,10,54,58,56]
},
{
name:"充值人数",
type:'line',
data:[19,19,23,15,14,5,27,22,30,27,21,
14,14,42,33,36,31,47,
20,12,47,48,46,50,42,42,42,42,80,84,65]
},
{
name:"当日新注册投资人数",
type:'line',
data:[2,2,0,2,1,0,6,1,4,2,1,4,1,17,5,6,7,8,3,4,9,4,
7,7,7,7,7,7,39,46,44]
},
{
name:"投资总人数",
type:'line',
data:[52,66,64,61,52,66,69,77,93,59,71,71,59,113,96,80,
75,89,77,46,113,79,112,102,82,82,82,82,148,143,96]
},
{
name:"首投人数",
type:'line',
data:[3,6,3,3,5,0,8,2,7,6,2,5,1,19,7,8,7,11,4,5,13,6,
14,10,13,13,13,13,42,58,51]
},
{
name:"复投人数",
type:'line',
data:[49,61,62,60,48,66,62,75,87,54,69,66,
58,95,90,75,70,
80,74,41,101,74,99,93,92,92,92,92,108,87,46]
},
{
name:"还款人数",
type:'line',
data:[71,52,129,0,0,177,0,33,98,0,140,
89,78,105,116,68,
110,82,33,36,162,37,181,81,70,70,70,70,145,27,0]
},
{
name:"提现人数",
type:'line',
data:[47,43,30,46,0,0,92,29,32,46,14,0,0,112,52,63,42,
56,0,0,129,54,30,60,39,39,39,39,42,74,40]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
2.2. 直角系效果展示图一
直角系折线图及柱形图展示
2.3. 直角系效果展示图一
隐藏掉部分图例
- 漏斗图
3.1. 漏斗图代码构造
如果需要展示漏斗图，则首先要在声明也就是require 'echarts/chart/funnel'，然后就是修改对应的构造绘图代码部分。
unction chartFunnel(ec){
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main3'));
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
myChart.hideLoading();
var option = {
title : {
text: '注册实名投资漏斗图',
subtext: '每日漏洞转换'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}",
show: true
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data:['注册人数','实名人数','当日新注册投资人数']
},
calculable:true,//允许拖拽重新计算
series : [
{
name:"A月1日漏斗",
type:'funnel',
sort : 'descending',
width:'40%',
data:[
{value:12,name:'注册人数'},
{value:7,name:'实名人数'},
{value:2,name:'当日新注册投资人数'}
]
},
{
name:"A月2日漏斗",
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
normal: {
label: {position: 'left'}
}
},
width:'40%',
data:[
{value:10,name:'注册人数'},
{value:3,name:'实名人数'},
{value:2,name:'当日新注册投资人数'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
3.2. 漏斗图效果
漏斗图展示效果
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入我们一起学技术！
小总结
基本上操练下来，还是很顺畅和简洁的。而且echarts提供了在线的excel表格数据转javascript数据或json格式工具，只需要复制表格到在线工具，即可方便的生成对应的数据格式。
小建议：为了图表展示的美观性，每一个维度的纵坐标数据最好在一个量级内，如果某一个指标的量级较大，会造成别的维度数据纵坐标太低而看不到效果。
