大資料視覺化展現之echarts實操
阿新 • • 發佈：2019-01-11
前言
作為大資料分析的最終目的是為了得到某種形式的輸出結果，而這些輸出結果大都以視覺化圖表的形式進行展示，當然了有些大資料分析不需要圖表展示如推薦系統。
而視覺化展現自然需要一套好用的圖表外掛，市場上有很多可以展現各種圖表的外掛，今天我給大家介紹的是百度出品的echarts，目前最新版本為echarts3，作為例項我使用的echarts2。
echarts2簡介
echarts是一套基於javascript的輕量級圖表框架，使用方式非常簡單，而展現的圖表形式很豐富，而且展現的圖表集成了很多實用的互動展示，如可以根據需要對圖表中的資料項進行隱藏，支援對資料進行拖拽、可以到處為圖片格式等等。
動手操練
本地新建一個html檔案，引入echarts，構造對應的展示資料，然後就可以雙擊這個html檔案在瀏覽器中訪問了，就是這麼簡單，甚至都不需要應用伺服器、web伺服器的支援。是不是超級輕量級呢。
- 基本的頁面程式碼如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>資料展示</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom --> - 直角系圖表
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. 漏斗圖效果
漏斗圖展示效果如下：
學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入技術愛好者交流群373107565，我們一起學技術！
小總結
基本上操練下來，還是很順暢和簡潔的。而且echarts提供了線上的excel表格資料轉javascript資料或json格式工具，只需要複製表格到線上工具，即可方便的生成對應的資料格式。
小建議：為了圖表展示的美觀性，每一個維度的縱座標資料最好在一個量級內，如果某一個指標的量級較大，會造成別的維度資料縱座標太低而看不到效果。