echarts 使用儀表盤圖展示百分比
阿新 • • 發佈:2021-01-25
echarts案例: 儀表盤圖展示百分比樣式
在實際開發工作中,很多時候需要用到資料視覺化,echarts是比較常用的資料視覺化工具,下面分享一個echarts儀表盤圖展示百分比樣式的案例。效果圖如下:
步驟如下:
1.下載並引入echarts
npm install echarts --save
在需要的使用echarts的js檔案中引入
import echarts from 'echarts'
2.獲取dom元素,建立option
let ginsengGauge = echarts.init(document.getElementById ('ginsengGauge'))
let option ={
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
type: 'gauge', //型別:儀表盤圖
name: '製造業',
title: {
offsetCenter: [0, '120%'], //系列標題文字(效果圖中的“製造業”)的位置,第一個為橫座標,第二個為縱座標
color: "#fff", //字型顏色
fontSize: 16,
},
center: ['15%', '45%'], //儀表盤圖的中心點相對於dom容器的位置
detail: { //設定效果圖中文字“30.25%”的相關配置
formatter: '{value}%',
offsetCenter: [0, 0],
color: "#FFF",
fontSize: 18
},
data: [{
value: 30.25 , //此處要改資料
name: '製造業'
}],
radius: '50%', //環形的大小
clockwise: true,
axisLine: {
show: true,
lineStyle: {
color: [
[0.3025, '#1A8FC5'], //佔總數的30.25%,即value/100,顏色為'#1A8FC5'
[1, '#E1E8EE'] //基底大圈比例為1,顏色為'#E1E8EE',
],
width: 10, //環形的粗細
}
},
splitLine: {
show: false //不顯示分隔線
},
axisTick: {
show: false //不顯示儀表盤刻度
},
axisLabel: {
show: false
},
pointer: {
show: false //不顯示儀表盤指標
},
},
]
}
歡迎訪問個人部落格歌洞章