一個簡單的溫度計，見下圖：
1. 首先引入 ECharts
通過標籤方式直接引入構建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2. 爲 ECharts 準備一個具備高寬的 DOM 容器
通過標籤方式直接引入構建好的 echarts 文件
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="myChart" style="width: 600px;height:400px;"></div>
</body>
3. 實例化生成
通過 echarts.init 方法初始化一個 echarts 實例，並通過 setOption 方法生成一個簡單的儀表盤，下面是完整代碼。
<!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 temperature = (62 + (Math.random())).toFixed(1);
var unit = '℃';
var svgPath = 'path://M570,729.5V86.4c0-42.2-31.4-76.4-70-76.4s-70,34.2-70,76.4v643c-41.7,24.3-70,68.9-70,120.6c0,77.3,62.7,140,140,140s140-62.7,140-140C640,798.3,611.7,753.7,570,729.5z';//溫度計SVG路徑
var option = {
backgroundColor: '#2F4056', //背景顏色
title: { //標題樣式
text: '溫度計', //主標題
subtext: `${temperature}${unit}`, //副標題
textStyle: { //標題的樣式
color: '#FFF',
fontFamily: 'Microsoft YaHei',
align: 'center',
verticalAlign: 'middle'
},
subtextStyle: { //副標題的樣式
color: '#FFF',
fontSize: 16
},
top: '45%',
left: '55%',
itemGap: 10,//主副標題之間的間距。
backgroundColor: '#EEE' //標題背景色，默認透明，設置無效
},
tooltip: { //提示框浮層屬性
show: true, //默認爲true
transitionDuration: 0.8, //提示框浮層的移動動畫過渡時間，單位是 s，設置爲 0 的時候會緊跟着鼠標移動
formatter: function(item) { //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
return `${temperature}${unit}`;
}
},
series: [{
name: '溫度', //系列名稱
type: 'liquidFill', //系列類型
shape: svgPath, //水填充圖的形狀 circle默認圓形 rect圓角矩形 triangle三角形 diamond菱形 pin水滴狀 arrow箭頭狀 還可以是svg的path
center: ['50%', '50%'], //圖表相對於盒子的位置[水平, 垂直]，默認是[50%,50%]在水平、垂直方向居中 可設置百分比活着具體數值
radius: '50%', //圖表的大小 值是圓的直徑 可以是百分比 也可以是具體值 100%則佔滿整個盒子 默認是40% 百分比下是根據寬高最小的一個爲參照依據
amplitude: 3, //振幅 是波浪的震盪幅度 可以取具體的值 也可以是百分比 百分比下是按圖標的直徑來算
waveLength: '50%', //波的長度 可以是百分比也可以是具體的像素值 百分比下是相對於直徑的 取得越大波浪的起伏越小
phase: 0, //波的相位弧度 默認情況下是自動
direction: 'left', //波移動的速度 兩個參數 left 從右往左 right 從左往右
waveAnimation: true, //控制波動畫的開關，布爾值： false關閉動畫，true開啓動畫（默認值）
animationEasing: 'linear', //初始動畫
animationEasingUpdate: 'quarticInOut', //數據更新的動畫效果
animationDuration: 2000, //初始動畫的時長，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更絢麗的初始動畫效果
animationDurationUpdate: 200, //數據更新動畫的時長
data: [{
name: '溫度', //數據項名稱
value: (temperature - 0) / 100,
rawValue: temperature
}],
label: { //圖表內部字體
normal: {
formatter: ''
}
},
outline: { //輪廓樣式
show: false, //是否顯示輪廓 布爾值
borderDistance: 0, //外部輪廓與圖表的距離 數字
itemStyle: {
// borderColor: 'rgba(255,255,255,0.8)', //邊框的顏色
borderColor: '#fd4d49', //邊框的顏色
borderWidth: 0, //邊框的寬度
shadowBlur: 10, //外部輪廓的陰影範圍 一旦設置了內外都有陰影
shadowColor: new echarts.graphic.LinearGradient(
//4個參數用於配置漸變色的起止位置, 依次對應右/下/左/上四個方位
0, 0, 0, 1,
//數組, 用於配置顏色的漸變過程. 每一項爲一個對象, 包含offset和color兩個參數. offset的範圍是0 ~ 1, 用於表示起始位置
[ //外部輪廓的陰影顏色
{
offset: 0,
color: "#cffc03"
},
{
offset: 1,
color: '#ecfc03'
}
]
)
}
},
backgroundStyle: {
color: 'transparent', //圖表的背景顏色
borderWidth: 10, //圖表的邊框寬度
borderColor: 'rgba(255,255,255,0.8)', //圖表的邊框顏色
shadowBlur: 10, //陰影模糊
shadowColor: new echarts.graphic.LinearGradient(
//4個參數用於配置漸變色的起止位置, 依次對應右/下/左/上四個方位
0, 0, 0, 1,
//數組, 用於配置顏色的漸變過程. 每一項爲一個對象, 包含offset和color兩個參數. offset的範圍是0 ~ 1, 用於表示起始位置
[ //外部輪廓的陰影顏色
{
offset: 0,
color: "#cffc03"
},
{
offset: 1,
color: '#ecfc03'
}
]
),
itemStyle: {
shadowBlur: 10, //設置無效
shadowColor: '#f60', //設置無效
opacity: 1 //設置無效
}
},
color: [ //水波的顏色
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: "#8bf707"
},
{
offset: 1,
color: '#cffc03'
}
]
)
],
itemStyle: {
opacity: 0.5, //波浪的透明度
shadowBlur: 10, //波浪的陰影範圍
shadowColor: '#ecfc03' //陰影顏色
},
emphasis: {
itemStyle: {
opacity: 1 //鼠標經過波浪顏色的透明度
}
}
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
後記
Echarts官方文檔中沒找到關於liquidFill類型的詳細屬性描述，估計是文檔更新以後舊的內容沒有維護好，有些是屬性是直接參考百度上的一些案例，你會發現設置有些屬性是無效的，只能自己一個個去嘗試摸索了，點擊DEMO案例可進入在線編輯預覽，一些屬性的說明及添加，歡迎大夥補充指正。