一. 簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
二. 特性
1. 豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數，就可以從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。
2. 自定義主題構建
你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型後自定義構建。
三. 示例
1. 首先引入 ECharts
通過標籤方式直接引入構建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2. 爲 ECharts 準備一個具備高寬的 DOM 容器
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="myChart" style="width: 600px;height:400px;"></div>
</body>
3. 實例化生成
通過 echarts.init 方法初始化一個 echarts 實例，並通過 setOption 方法生成一個簡單的儀表盤，下面是完整代碼。
（1）常規單儀表盤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="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('myChart'));
// 指定圖表的配置項和數據
var option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}KM/H'
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '速度指標',
type: 'gauge',
detail: {formatter: '{value}KM/H'},
data: [{value: 50, name: '速度'}]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
效果圖
（2）自定義屬性單儀表盤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="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('myChart'));
// 指定圖表的配置項和數據
var option = {
tooltip : {//提示框浮層屬性
show: true,
transitionDuration:0.8,//提示框浮層的移動動畫過渡時間，單位是 s，設置爲 0 的時候會緊跟着鼠標移動。
formatter: "{a} - {c}KM/H"//提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。
},
toolbox: {//工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [//系列列表。每個系列通過 type 決定自己的圖表類型
{
name:'速度',
type:'gauge', // 儀表盤
min: 0, // 最小值
max: 100, // 最大值
precision: 2, // 小數精度，默認爲0，無小數點
splitNumber: 10, // 分割段數，默認爲5
axisLine: { // 軸線相關配置
lineStyle: { // 軸線樣式
color: [[0.2, '#5FB878'], [0.8, '#01AAED'], [1, '#FF5722']], //軸線可以被分成不同顏色的多段，每段的結束位置和顏色可以通過一個數組來表示
width: 50
}
},
axisTick: { // 刻度樣式
splitNumber: 10, // 分隔線之間分割的刻度數
length :15, // 刻度線長，支持相對半徑的百分比
lineStyle: { // 刻度線樣式
color: '#EEE'
}
},
axisLabel: { // 刻度標籤
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔線樣式
show: true, // 默認顯示，屬性show控制顯示與否
length :50, // 分隔線線長，支持相對半徑的百分比
lineStyle: { // 分隔線條樣式
color: '#CCC'
}
},
pointer : { // 儀表盤指針
width : 10
},
title : { // 儀表盤標題
show : true,
offsetCenter: [0, '90%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'rgba(255,255,255,0.7)',
fontSize: 16,
fontWeight: 'bolder'
}
},
detail : { // 儀表盤詳情，用於顯示數據
formatter:'{value}KM/H',
offsetCenter: [0, '56%'],
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'auto',
fontSize: 20,
fontWeight: 'bolder'
}
},
data: [{value: 50, name: '速度'}]
}
]
};
// 使用剛指定的配置項和數據顯示圖表，加個定時生成，讓你的儀表盤動起來
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
</script>
</body>
</html>
效果圖
（4）多儀表盤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="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('myChart'));
// 指定圖表的配置項和數據
var option = {
backgroundColor: '#1b1b1b',
tooltip: {
formatter: '{a} <br/>{c} {b}'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '速度',
type: 'gauge',
min: 0,
max: 220,
splitNumber: 11,
radius: '50%',
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
width: 3,
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
axisLabel: { // 座標軸小標記
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
},
axisTick: { // 座標軸小標記
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
splitLine: { // 分隔線
length: 25, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width: 3,
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
pointer: { // 分隔線
shadowColor: '#fff', //默認透明
shadowBlur: 5
},
title: {
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
detail: {
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 5,
offsetCenter: [0, '50%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data: [{value: 40, name: 'km/h'}]
},
{
name: '轉速',
type: 'gauge',
center: ['25%', '55%'], // 默認全局居中
radius: '30%',
min: 0,
max: 7,
endAngle: 45,
splitNumber: 7,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
axisLabel: { // 座標軸小標記
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
},
axisTick: { // 座標軸小標記
length: 12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
splitLine: { // 分隔線
length: 20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width: 3,
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
pointer: {
width: 5,
shadowColor: '#fff', //默認透明
shadowBlur: 5
},
title: {
offsetCenter: [0, '-30%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
detail: {
//backgroundColor: 'rgba(30,144,255,0.8)',
// borderWidth: 1,
borderColor: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 5,
width: 80,
height: 30,
offsetCenter: [25, '20%'], // x, y，單位px
textStyle: { // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data: [{value: 1.5, name: 'x1000 r/min'}]
},
{
name: '油表',
type: 'gauge',
center: ['75%', '50%'], // 默認全局居中
radius: '30%',
min: 0,
max: 2,
startAngle: 135,
endAngle: 45,
splitNumber: 2,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
axisTick: { // 座標軸小標記
length: 12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
axisLabel: {
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10,
formatter: function (v){
switch (v + '') {
case '0': return 'E';
case '1': return 'Gas';
case '2': return 'F';
}
}
},
splitLine: { // 分隔線
length:15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width:3,
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor: '#fff', //默認透明
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{value: 0.5, name: 'gas'}]
},
{
name: '水錶',
type: 'gauge',
center: ['75%', '50%'], // 默認全局居中
radius: '30%',
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 座標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
width: 2,
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
axisTick: { // 座標軸小標記
show: false
},
axisLabel: {
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10,
formatter: function(v){
switch (v + '') {
case '0': return 'H';
case '1': return 'Water';
case '2': return 'C';
}
}
},
splitLine: { // 分隔線
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width: 3,
color: '#fff',
shadowColor: '#fff', //默認透明
shadowBlur: 10
}
},
pointer: {
width: 2,
shadowColor: '#fff', //默認透明
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data:[{value: 0.5, name: 'gas'}]
}
]
};
setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
myChart.setOption(option);
},2000);
</script>
</body>
</html>
效果圖
四. 後記
其實用起來也簡單，根據自己的顯示需求，遇到不懂的時候多查看官方文檔就好了。
附官方文檔鏈接