Echart結(jié)合圓形實現(xiàn)儀表盤的繪制詳解
更新時間：2022年03月17日 14:48:04 作者：Ciao_Traveler
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)儀表盤的繪制，感興趣的可以學(xué)習一下
效果圖
注意：使用startAngle: 200,endAngle: -20,在數(shù)據(jù)為零時，會出現(xiàn)一個實心圓，需要調(diào)整一下角度。
效果
代碼
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "80%",
startAngle: 190,
endAngle: -10,
// minAngle:10,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "-5%"],
fontSize: "14px",
ffontFamily: "Impact",
formatter: "{value} %",
color: "#fff",
},
data: data
},
]
};
效果圖
主要使用：echarts中的儀表盤、和三個圓進行實現(xiàn)
代碼
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "95%",
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "2%"],
fontSize: 12,
// fontWeight: "bolder",
formatter: "{value} %",
color: "#fff",
},
data: [
{
value: this.props.data || 100
}
]
},
{
name: "數(shù)量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["70%", "70%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虛線
borderColor: "#78d7ff",// 虛線顏色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "數(shù)量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["65%", "65%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虛線
borderColor: "#78d7ff",// 虛線顏色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "數(shù)量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: "55%",
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
color: "#53bcf9",
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
}
]
};
到此這篇關(guān)于Echart結(jié)合圓形實現(xiàn)儀表盤的繪制詳解的文章就介紹到這了,更多相關(guān)Echart儀表盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了利用PHP實現(xiàn)記錄代碼運行時間的封裝類的相關(guān)教程，文中給出了詳細的示例代碼供大家參考學(xué)習，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了JS實現(xiàn)的N多簡單無縫滾動代碼,包含了文字及圖文等多種滾動效果,涉及JavaScript遞歸調(diào)用及定時函數(shù)觸發(fā)實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2015-11-11
今天抽空用原生javascript寫了個返回頂部效果，由于本人水平有限，如有問題請指出,在下很樂意接受，有需要的朋友可以參考下2013-01-01
這篇文章主要介紹了使用zrender.js繪制體溫單效果,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
本文主要介紹了js中函數(shù)的length是多少，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對象方法解析
本文主要對javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對象方法進行解析，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
防止Layui form表單重復(fù)提交的實現(xiàn)方法
今天小編就為大家分享一篇防止Layui form表單重復(fù)提交的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端輪播圖滑動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript實現(xiàn)簡易飛機大戰(zhàn)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了js 獲取掃碼槍輸入數(shù)據(jù)的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06