I need to update two arguments inside series.data, the name and the value. The problem is that I can’t separate this update in a formal way. I even manage to do it, for example, by creating another echarts leaving the rest of the chart invisible and leaving only one argument in this new series.
What I need is to update the name and value without them interfering with each other. For example:
(1) If I change the name, the value can’t be updated
(2) If I change the value, the name cannot be updated
This is because they have different events (one is change and the other is click on different HTML tags).
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Gauge Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<!--INITIAL NAME-->
<span id='nameInput' style='display: none;'>SPAN</span>
<!--NEW NAME-->
<input id='changeInput' type='text'>
<!--BUTTON TO CHANGE NAME-->
<button id='changeButton'>Change name</button>
<!--VALUE-->
<input id='valueInput' type='range' min='0' max='100' value='50'>
<!--PLOT-->
<div id="gaugeChart" style="width: 600px; height: 400px;"></div>
<script>
// Inicialize o gráfico
let echartsGaugeDropUse = echarts.init(document.getElementById('gaugeChart'));
// Função para criar o dataset
function getDataset() {
let name1 = document.getElementById('nameInput').innerText;
let value1 = Number(document.getElementById('valueInput').value);
return {
'source': [
['name', name1],
['value', value1]
]
};
}
// init config
function update1() {
let option = {
title: [{
text: "BEER",
top: '30%',
left: 'center'
}],
series: [{
type: 'gauge',
min: 0,
max: 100,
progress: {
show: true,
overlap: true,
roundCap: true,
clip: false,
width: 20
}
}]
};
echartsGaugeDropUse.setOption(option);
}
update1();
// update funcion
function updateGaugeData() {
let newName = document.getElementById('changeInput').value;
document.getElementById('nameInput').innerText = newName;
let dataset = getDataset();
let gaugeData = [
{
name: dataset.source[0][1],
value: dataset.source[1][1],
title: {
color: 'red'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'green',
borderColor: 'lime'
}
}
}
];
echartsGaugeDropUse.setOption({
series: [{
data: gaugeData
}]
});
}
// value only
document.getElementById('valueInput').addEventListener('change', function() {
updateGaugeData();
});
// name only
document.getElementById('changeButton').addEventListener('click', function() {
updateGaugeData();
});
</script>
</body>
</html>As it is, the change in one interferes with the other. I know this because the same update function is being used in the events. I would like to know if there is a formal way to change the two parameters separately, instead of having to update both simultaneously.