Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { Gauge } from '@antv/g2plot';
const gaugePlot = new Gauge(document.getElementById('container'), {
title: {
visible: true,
text: '仪表盘样式',
},
value: 64,
min: 0,
max: 100,
range: [20, 40, 60, 80],
gaugeStyle: {
colors: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
// stripWidth: 30,
// stripBackColor: '#ddd',
// tickInterval: 20,
// tickLabelPos: 'inner',
// tickLabelSize: 16,
// tickLabelColor: '#aaa',
}
.g2plot-gauge-label .value {
font-size: 16px;
color: #8c8c8c;
font-weight: 300;
}
.g2plot-gauge-label .title {
font-size: 30px;
color: #000000;
font-weight: bold;
}
`);
const gaugePlot = new Gauge(document.getElementById('container'), {
title: {
visible: true,
text: '半圆仪表盘',
},
width: 400,
height: 400,
value: 64,
min: 0,
max: 100,
range: [0, 70],
startAngle: -1,
endAngle: 0,
format: (v) => {
if (v === 0 || v === 100) {
return v + '%';
}
import { Gauge } from '@antv/g2plot';
const gaugePlot = new Gauge(document.getElementById('container'), {
title: {
visible: true,
text: '仪表盘',
},
value: 64,
min: 0,
max: 100,
range: [20, 40, 60, 80],
});
gaugePlot.render();