echarts 仪表盘图展示百分比
效果图如下:
背景图一加,效果就好看多了
代码:
let myChart = echarts.getInstanceByDom(
document.getElementById('verificationChart')
)
if (myChart == null) {
// 如果不存在,就进行初始化
myChart = echarts.init(document.getElementById('verificationChart'))
}
const gaugeData = [
{
value: 74,
name: '核查率',
title: {
offsetCenter: ['0%', '20%'],
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '-15%'],
},
},
]
let option = {
series: [
{
type: 'gauge',
radius: 162,
startAngle: 90,
endAngle: -270,
pointer: {
show: false,
},
progress: {
show: true,
// 多组数据时进度条是否重叠
overlap: false,
// width: 20,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 0,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#009EF8', // 0% 处的颜色
},
{
offset: 1,
color: '#30FFFF', // 100% 处的颜色
},
],
},
},
},
axisLine: {
// 是否显示仪表盘轴线
show: false,
lineStyle: {
// 仪表盘轴线宽度也要设置,否则只设置进度条宽度就不生效
width: 20,
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: gaugeData,
title: {
fontSize: 26,
color: '#fff',
},
detail: {
fontSize: 56,
color: '#fff',
fontFamily: 'YouSheBiaoTiHei',
formatter: '{value}%',
},
},
],
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
本文含有隐藏内容,请 开通VIP 后查看