前言
ECharts 是一個使用 JavaScript 實現的開源可視化庫，涵蓋各行業圖表，滿足各種需求。
ECharts下載與使用
可以在直接下載 echarts.min.js 並用 <script>標簽引入。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
開發環境下可以使用源代碼版本 echarts.js 並用 <script> 標簽引入，源碼版本包含了常見的錯誤提示和警告。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.js
使用在線 CDN 方法:
Staticfile CDN（國內） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
生成柱狀圖
統計測試報告情況，生成柱狀圖，先看只有一組數據的情況
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成柱狀圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['report', 'pass', 'failed', 'error'],
['10/10', 20, 5, 1]
]
},
// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸，數值軸。
yAxis: {},
// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
生成效果
當測試報告數據有多組的情況，統計最近 5 天的報告情況，dataset 圖標數據
dataset: {
// 提供一份數據。
source: [
['report', 'pass', 'failed', 'error'],
['10/6', 20, 5, 1],
['10/7', 23, 2, 1],
['10/8', 25, 1, 0],
['10/9', 18, 5, 3],
['10/10', 26, 0, 0]
]
}
完整的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成柱狀圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['report', 'pass', 'failed', 'error'],
['10/6', 20, 5, 1],
['10/7', 23, 2, 1],
['10/8', 25, 1, 0],
['10/9', 18, 5, 3],
['10/10', 26, 0, 0]
]
},
// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸，數值軸。
yAxis: {},
// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
生成效果
圖標數據 dataset 也可以是鍵值對的形式
dataset: {
// 提供一份數據。
source: [
{'report': '10/6', 'pass':20, 'failed':5, 'error':1},
{'report': '10/7', 'pass':23, 'failed':2, 'error':1},
{'report': '10/8', 'pass':25, 'failed':1, 'error':0},
{'report': '10/9', 'pass':18, 'failed':5, 'error':3},
{'report': '10/10', 'pass':26, 'failed':0, 'error':0},
]
}
series.seriesLayoutBy 屬性
我們可以使用 series.seriesLayoutBy 屬性來配置 dataset 是列（column）還是行（row）映射為圖形系列（series），默認是按照列（column）來映射。
// 指定圖表的配置項和數據
var option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['report', 'pass', 'failed', 'error'],
['10/6', 20, 5, 1],
['10/7', 23, 2, 1],
['10/8', 25, 1, 0],
['10/9', 18, 5, 3],
['10/10', 26, 0, 0]
]
},
// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸，數值軸。
yAxis: {},
// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'}
]
};
顯示效果
如果圖表數據 dataset 是鍵值對的形式，是不能按行顯示的。
自定義 yAxis
可以自定義Y軸顯示內容
// 聲明一個 Y 軸，數值軸。
yAxis: [
{
type: 'value',
name: '個數',
axisLabel: {
formatter: ' {value}'
}
}
]
顯示效果
設置最小值最大值和間距
// 聲明一個 Y 軸，數值軸。
yAxis: [
{
type: 'value',
name: '個數',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: ' {value}'
}
}
]
寫死最大值會有個弊端，當數量大於100的時候，就超出了圖表范圍了