Echarts
ECharts，一個使用 JavaScript實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
通過使用ECharts，可以快速實現數據可視化，下面簡單演示一下直方圖與折線圖的簡單使用
實現效果如下：
echarts的使用大致可以分爲以下5個部分：
- 引入
ECharts.js庫（可以通過官網地址下載） - 爲
ECharts實例準備具備大小的DOM - 初始化實例
- 指定繪圖的相關配置
- 使用實例
本例中使用webpack對文件進行打包，webpack的簡單快速應用可以查看Webpack V4安裝使用與常用配置總結
demo目錄如下:
webpack-demo
|- index.html
|- /src
|- index.js
|- /js
|- dynamic-bar-graph.js
|- /buildindex.html 文件代碼如下，#dynamic-bar-graph 爲準備的用於繪製餅圖的div, bundle.js 爲打包好的js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts-test</title>
<!-- <script src="./lib/echarts.js"></script> -->
<style>
#dynamic-bar-graph {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="dynamic-bar-graph"></div>
<script src="./build/bundle.js"></script>
</body>
</html>繪圖的相關配置放在dynamic-bar-graph.js中:
var echarts = require("echarts");
// 動態直方圖
var myChart = echarts.init(document.getElementById("dynamic-bar-graph"));
myChart.showLoading();
// 定義相關配置
var option = {
// 定義標題
title: {
// 主標題
text: 'ECharts 動態直方圖',
// 副標題
subtext: '定時加載數據',
// 標題顏色
color: '#808080',
// 內邊距
padding: 5
},
// 設置提示框組件
tooltip: {
// 觸發類型（數據項，座標軸，不觸發） ['item', 'axis', 'none']
trigger: 'axis',
// 座標軸指示器
axisPointer: {
// 指示器類型(直線，陰影，十字) ['line', 'shadow', 'cross']
type: 'cross',
// 座標軸指示器的文本標籤。
label: {
// 座標軸指示器背景色
backgroundColor: '#283b56'
}
}
},
// 圖例組件
legend: {
// 圖例類型（默認，滾動）['plain', 'scroll']
type: 'plain',
// 圖例的數據數組
data: ['最新成交價', '預購隊列']
},
// 工具欄
toolbox: {
show: true,
// 佈局朝向(水平， 垂直) ['horizontal', 'vertical']
orient: 'horizontal',
// 各工具配置項
feature: {
// 數據視圖工具
dataView: { readOnly: false },
// 配置項還原
restore: {},
// 保存爲圖片
saveAsImage: {}
}
},
// 數據區域縮放
dataZoom: {
show: false,
start: 0,
end: 100
},
grid: {
top: '15%',
left: '15%'
},
// 直角座標系 grid 中的 x 軸
xAxis: [
{
// 座標軸類型(數值軸：連續值， 類目軸：離散值，時間軸：連續時序數據， 對數軸：對數數據) ['value', 'category', 'time', 'log']
type: 'category',
// 座標軸兩邊留白策略（類目軸爲Boolean，非類目軸爲Array）
boundaryGap: true,
// 定義下方x軸數據名稱
data: (function () {
// 加載10項時間數據，每項相隔20秒
var now = new Date();
var res = [];
var len = 10;
while (len--) {
// 格式化時間
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(now - 2000);
}
return res;
})()
},
{
// 座標軸類型(數值軸：連續值， 類目軸：離散值，時間軸：連續時序數據， 對數軸：對數數據) ['value', 'category', 'time', 'log']
type: 'category',
// 座標軸兩邊留白策略（類目軸爲Boolean，非類目軸爲Array）
boundaryGap: true,
// 定義上方座標軸數據名稱
data: (function () {
var res = [];
var len = 10;
while (len--) {
res.push(10 - len - 1);
}
return res;
})()
},
],
// 直角座標系 grid 中的 y 軸
yAxis: [
{
type: 'value',
// 是否是脫離 0 值比例。(Booolean) 設置成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。
scale: true,
name: '價格',
// 定義了max, min 後boundaryGap會失效
max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
name: '預購量',
// 定義了max, min 後boundaryGap會失效
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
// 圖表數據
series: [
{
name: '預購隊列',
// 定義圖標類型
/**
* line: 折線圖
* bar: 柱狀圖
* pie：餅圖
* scatter：散點圖
* effectScatter：漣漪特效散點圖
* radar：雷達圖
* tree：樹圖
* treemap: 面積樹圖
* sunburst： 旭日圖
* boxplot: 箱圖
* candlestick：K線圖
* heatmap：熱力圖
* map：地圖
* parallel：平行座標系
* lines：帶有起點和終點信息的線數據的繪製（航線圖）
* graph：關係圖
* sankey：桑基圖（可看作是有向無環圖）
* funnel：漏斗圖
* gauge：儀表盤
* pictorialBar：象形柱圖
* themeRiver：主題河流
* custom: 自定義
**/
type: 'bar',
// 對應的X軸數據項索引（默認爲0）
xAxisIndex: 1,
// 對應的Y軸數據項索引（默認爲0）
yAxisIndex: 1,
// 預購隊列數據
data: (function () {
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name: '最新成交價',
type: 'line',
// 最新成交價數據
data: (function () {
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
],
visualMap: {
type: 'piecewise',
seriesIndex: 1,
bottom: '10%',
pieces: [{
gt: 0,
lte: 5,
color: '#ffde33'
}, {
gt: 5,
lte: 10,
color: '#ff9933'
}, {
gt: 10,
color: '#660099'
}],
outOfRange: {
color: '#999'
}
}
};
// 首次繪製表格
myChart.hideLoading();
myChart.setOption(option);
var app = {
count: 11,
}
// 定時生成新數據
setInterval(function () {
// 格式化時間
var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
// 獲取數據項
var data0 = option.series[0].data;
var data1 = option.series[1].data;
// 移除舊數據並生成新數據
data0.shift();
data0.push(Math.round(Math.random() * 1000));
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
// 移除舊數據項並生成新數據項
option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
option.xAxis[1].data.shift();
option.xAxis[1].data.push(app.count++);
// 應用配置
myChart.setOption(option);
}, 2100);
詳情可查看我的github