前言
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
生成折線圖
type:'line' 生成基礎的折線圖
<!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'));
// 指定圖表的配置項和數據
myChart.setOption({
// 標題
title: {
text: '用例數量統計'
},
tooltip: {
trigger: 'axis'
},
// 圖例-每一條數據的名字叫用例數
legend: {
data:['用例數']
},
// 工具箱-保存圖片
toolbox: {
feature: {
saveAsImage: {
show:true
}
}
},
// x軸
xAxis: {
data:["10/5", "10/6","10/7","10/8","10/9","10/10"]
},
// y軸自動生成
yAxis: {},
series: [
{
name:'用例數',
type:'line', //折線圖
// 圖表數據
data:[30, 36, 38, 47, 49, 56]
}
]
});
</script>
</body>
</html>
生成效果
平滑折線圖
smooth: true 生成平滑折線圖
series: [
{
name:'用例數',
type:'line', //折線圖
smooth: true,
// 圖表數據
data:[30, 36, 38, 47, 49, 56]
}
]
生成效果
多個折線圖
分別統計用例總數，成功數和失敗數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 折線圖</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 = {
// 標題
title: {
text: '折線圖'
},
// 提示工具
tooltip: {
trigger: 'axis'
},
// 圖例-可篩選查看
legend: {
data:['用例總數','成功數','失敗數']
},
// 調整折線圖位置
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 工具箱-保存圖片
toolbox: {
feature: {
saveAsImage: {show:true}
}
},
// x軸
xAxis: {
type: 'category',
boundaryGap: false,
data: ["10/5", "10/6","10/7","10/8","10/9","10/10"]
},
// y軸自動生成
yAxis: {
type: 'value'
},
series: [
{
name:'用例總數',
type:'line',
color: '#7a7a7a', // 設置顏色
data:[30, 35, 36, 39, 54, 58]
},
{
name:'成功數',
type:'line',
color: '#00ff00', // 設置顏色
data:[28, 25, 30, 37, 53, 58]
},
{
name:'失敗數',
type:'line',
color: '#d43f3a',
data:[2, 10, 6, 2, 1, 0]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
生成效果
設置底部填充
添加areaStyle，填充底部顏色
series: [
{
name:'用例總數',
type:'line',
color: '#7a7a7a', // 設置顏色
data:[30, 35, 36, 39, 54, 58],
areaStyle: {
normal: {}
}
},
{
name:'成功數',
type:'line',
color: '#00ff00', // 設置顏色
data:[28, 25, 30, 37, 53, 58],
areaStyle: {
normal: {}
}
},
{
name:'失敗數',
type:'line',
color: '#d43f3a',
data:[2, 10, 6, 2, 1, 0],
areaStyle: {
normal: {}
}
}
]
顯示效果
累加折線圖
統計不同渠道訪問量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<!-- 這里是加載剛下好的echarts.min.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 = {
title: {
text: '折線圖-統計'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['web網站','wap手機','app','其它']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'web網站',
type:'line',
stack: '總量',
data:[30, 32, 21, 34, 40, 30, 51]
},
{
name:'wap手機',
type:'line',
stack: '總量',
data:[20, 12, 11, 24, 20, 30, 10]
},
{
name:'app',
type:'line',
stack: '總量',
data:[10, 32, 31, 14, 30, 20, 33]
},
{
name:'其它',
type:'line',
stack: '總量',
data:[5, 12, 3, 4, 9, 10, 3]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
顯示效果
