const mychartspider1 = echarts.init(document.getElementById('gaugespiderinc1'));
const maxValue = 100;
const numPointers = 4; // Number of pointers
let randomValuesInterval;
let randomColorsInterval;
let centerAnimationInterval;
function getRandomValue(min, max) {
return Math.random() * (max - min) + min;
}
function setRandomValues() {
let data = [];
for (let i = 0; i < numPointers; i++) {
data.push({
value: getRandomValue(0, maxValue)
});
}
updateGaugeSpider(data);
}
function updateGaugeSpider(data) {
option = {
series: [{
type: 'gauge',
min: 0,
max: 100,
splitNumber: 10,
radius: '75%',
center: ['50%', '150%'],
axisLine: {
lineStyle: {
color: [
[1, '#49a6de']
],
width: 3.5
}
},
splitLine: {
distance: -28,
length: 28,
lineStyle: {
width: 5,
color: '#49a6de'
}
},
axisTick: {
distance: -12,
length: 10,
lineStyle: {
width: 2,
color: '#49a6de'
}
},
axisLabel: {
distance: -64,
color: '#49a6de',
fontSize: 36,
fontFamily: 'D-DIN',
textStyle: {
textBorderWidth: 1,
textBorderColor: '#020202'
}
},
anchor: {
show: true,
size: 25,
itemStyle: {
borderColor: "#020202",
borderWidth: 2
}
},
pointer: {
offsetCenter: [0, "10%"],
icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
length: "115%",
itemStyle: {
borderWidth: 1,
borderColor: "#020202",
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowColor: "#020202",
shadowBlur: 10,
}
},
detail: {
valueAnimation: true,
borderWidth: 3,
borderColor: '#858383',
borderRadius: 5,
color: '#020202',
fontWeight: 'bold',
width: 23,
height: 18,
fontSize: 20,
fontFamily: 'DS-Digital',
formatter: function(value) {
return value.toFixed(0) + '%';
}
},
data: data.map((item, index) => {
const colors = ['#dd4b39', 'orange', 'lime', 'cyan'];
const titleName = ['Name 1', 'Name 2', 'Name 3', 'Name 4'];
const offsetName = [
['-45%', '70%'],
['-15%', '70%'],
['15%', '70%'],
['45%', '70%']
];
const offsetDetail = [
['-45%', '84%'],
['-15%', '84%'],
['15%', '84%'],
['45%', '84%']
];
return {
value: item.value,
itemStyle: {
color: colors[index % colors.length]
},
name: titleName[index % titleName.length],
title: {
offsetCenter: offsetName[index % offsetName.length],
color: colors[index % colors.length]
},
detail: {
backgroundColor: colors[index % colors.length],
offsetCenter: offsetDetail[index % offsetDetail.length]
}
};
})
},
{
type: 'gauge',
min: 0,
max: 60,
splitNumber: 6,
radius: '70%',
center: ['50%', '150%'],
axisLine: {
lineStyle: {
color: [
[1, '#fee200']
],
width: 3.5
}
},
splitLine: {
distance: 10,
length: 28,
lineStyle: {
width: 5,
color: '#fee200'
}
},
axisTick: {
show: false
},
axisLabel: {
distance: 10,
fontSize: 33,
color: '#fee200',
fontFamily: 'D-DIN',
textStyle: {
textBorderWidth: 1,
textBorderColor: '#020202'
}
},
pointer: {
show: false
},
title: {
show: false
},
anchor: {
show: true,
size: 14,
itemStyle: {
color: "#f00",
borderColor: "#020202",
borderWidth: 1
}
}
}
]
};
mychartspider1.setOption(option);
}
let colorIndex = 0; // Variável para controlar o índice da cor a ser aplicada
function setNextColor() {
const colors = ['#f00', '#49a6de'];
const color = colors[colorIndex]; // Seleciona a cor atual com base no índice
colorIndex = (colorIndex + 1) % colors.length; // Atualiza o índice para a próxima cor
return color;
}
function setRandomColors() {
const color = setNextColor(); // Obtém a próxima cor sequencialmente
mychartspider1.setOption({
series: [{
axisLabel: {
color: color,
},
axisLine: {
lineStyle: {
color: [
[1, color]
],
}
},
splitLine: {
lineStyle: {
color: color
}
},
axisTick: {
lineStyle: {
color: color
}
}
}]
});
}
// Button click event
$('#startgaugeeffectbtnanimation1').one('click', function() {
// Configure random values and colors initially
setRandomValues();
setRandomColors();
// Update random values and colors every 500 milliseconds for 5 seconds
randomValuesInterval = setInterval(setRandomValues, 500);
randomColorsInterval = setInterval(setRandomColors, 500);
setTimeout(() => {
// Stop updating after 5 seconds
clearInterval(randomValuesInterval);
clearInterval(randomColorsInterval);
// Restore input values
let value1 = Number($('#number1').val());
let value2 = Number($('#number2').val());
let value3 = Number($('#number3').val());
let value4 = Number($('#number4').val());
updateGaugeSpiderFromInputs(value1, value2, value3, value4);
}, 5000);
});
function updateGaugeSpiderFromInputs(value1, value2, value3, value4) {
value1 = Number($('#number1').val());
value2 = Number($('#number2').val());
value3 = Number($('#number3').val());
value4 = Number($('#number4').val());
// Verifique se o intervalo está definido e, se sim, pare a animação
if (randomValuesInterval) {
clearInterval(randomValuesInterval);
clearInterval(randomColorsInterval);
}
// Defina as cores finais diretamente
updateGaugeSpider([{
value: value1
},
{
value: value2
},
{
value: value3
},
{
value: value4
}
]);
}
// Input change event
$('#number1, #number2, #number3, #number4').on('change', function() {
updateGaugeSpiderFromInputs();
});
updateGaugeSpiderFromInputs();
// animation center downUp
// Função para iniciar a animação do centro do gauge para '50%'
function startCenterAnimation() {
let centerPosition = 150; // Inicializa a posição central
let startTime; // Armazena o horário de início da animação
function animateCenterChange(timestamp) {
const duration = 5000; // Duração da animação em milissegundos
const startValue = centerPosition; // Valor inicial da posição central
const endValue = 50; // Valor final da posição central
const progress = (timestamp - startTime) / duration; // Progresso da animação
// Calcula o próximo valor da posição central com base no progresso
const nextValue = startValue + (endValue - startValue) * progress;
// Define o centro do gráfico com base no próximo valor
mychartspider1.setOption({
series: [{
center: ['50%', nextValue + '%']
},
{
center: ['50%', nextValue + '%']
}
]
});
// Continua a animação se ainda não atingiu o fim
if (progress < 1) {
requestAnimationFrame(animateCenterChange);
}
}
function handleClick() {
startTime = performance.now(); // Obtém o horário de início da animação
requestAnimationFrame(animateCenterChange); // Inicia a animação
}
document.getElementById('startgaugeeffectbtnanimation1').addEventListener('click', handleClick, {
once: true
});
}
// Inicializa a animação do centro do gauge quando o botão for clicado
startCenterAnimation();
#gaugespiderinc1 {
height: 500px;
width: 500px;
}
body {
background: #333;
}
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<input type="range" id="number1" min="0" max="100" value="25">
<input type="range" id="number2" min="0" max="100" value="50">
<input type="range" id="number3" min="0" max="100" value="75">
<input type="range" id="number4" min="0" max="100" value="100">
<div id='gaugespiderinc1'></div>
<button id='startgaugeeffectbtnanimation1'>
Click me
</button>
