前言
在對一些需要存放液體的工廠進行開發基于物聯網傳感器的監控平臺時，經常需要監控
該蓄水池當前所處的容量占比為多少，
以達到隨時調整其蓄水量的目的，接下來我們看
一下一些常見的水球專案，
有這樣的：
這樣的：
甚至還有這樣的：
今天這篇文章就帶領大家"從零到一"的構建水球圖，話不多說，開干！
步入正題
說起資料可視化，相比大家也了解或使用過一些大名頂頂的開源庫，例如開源社區提供的 D3.js
, Apache ECharts
等，都是相當成熟且優秀的，并且由于Apache ECharts的高度集成API和一些已經很完善的組件,相比于D3.js更加易于上手和開發，所以我們這次將使用Echarts來進行開發水球組件，
查詢組件庫及其插件
當我們要使用Apache Echarts 的API庫時，首先可以去它官網提供的一些示例
來進行選擇，例如你需要一些柱狀圖或折線圖，你就可以找到相關的示例并且點擊后獲取示例中的代碼，如下圖：
回歸正題，
我們想在示例中找一下有沒有類似水球之類的組件，遺憾的是，我們并沒有在官網提供的示例中找到，但經過不懈努力，我們終于找到了由開源社區提供的Apache ECharts 相關的插件
echarts-liquidfill
引入依賴
源檔案引入:
- Github 源檔案下載地址： https://github.com/apache/echarts/tree/master/dist
- 引入相關依賴
<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>
NPM 引入:
# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill
構建Option
一、背景色
首先我們給背景一個背景色，這樣顯得逼格高一點，
var option = {
backgroundColor: '#050038',
title: {},
series: []
}
效果圖：
二、添加標題
var option = {
backgroundColor: '#050038',
title: {
text: '神奇的水球',
textStyle: {
fontWeight: 'normal',
fontSize: 25,
color: 'rgb(97, 142, 205)'
}
},
series: []
}
三、引入組件
現在我們將使用我們找到的ECharts 的插件來構建一個帶有波浪的水球，
var option = {
backgroundColor: '#050038',
title: {
text: 'ewfw',
textStyle: {
fontWeight: 'normal',
fontSize: 25,
color: 'rgb(97, 142, 205)'
}
},
series: [{
type: 'liquidFill',
radius: '45%',
center: ['50%', '50%'],
data: [0.5, 0.5, 0.5],
backgroundStyle: {
borderWidth: 1,
color: 'rgb(255,0,255,0.1)'
},
label: {
normal: {
formatter: (0.5 * 100).toFixed(2) + '%',
textStyle: {
fontSize: 50
}
}
},
}
]
}
代碼中所使用到的API講解：
-
type: Apache Echarts 靠該欄位區分所引入的組件，文中所使用到的插件組件" liquidFill "必須提前引入（ 見:引入依賴 )，
-
radius: 水球的半徑，可以是相對值 % 也可以是絕對值 px，
-
center: 水球所處的位置, 第一個值為X軸，第二個值為Y軸，可以是相對值 % 也可以是絕對值 px，
-
data: 水球內部波浪所處的位置,可以為數值（ 范圍 0-1 ）也可以為Object物件進行更多配置，
例如：
var option = {
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
itemStyle: {
color: 'red' //第二個波浪將為紅色
}
}, 0.4, 0.3]
}]
};
- backgroundStyle : 水球內部背景顏色
- label : 水球內部文字
最終效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/272949.html
標籤：其他