I’m using timeline with echarts. I need to add more charts to the screen, however, using only one instance of echarts (echarts.init only once). I need to put other charts separate from timeline on the screen, I tried putting a type:“gauge” but it doesn’t work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Gráfico com Timeline e Gauge</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
#chart {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartUse = echarts.init(document.getElementById('chart'));
window.addEventListener("resize", () => {
chartUse.resize();
});
const option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 2000,
rewind: false,
data: ['Jan', 'Fev', 'Mar']
},
grid: {
width: "40%",
height: "50%",
left: "5%"
},
xAxis: {
type: "category",
data: ["Jan", "Fev", "Mar"],
gridIndex: 0
},
yAxis: {
type: "value",
gridIndex: 0
},
series: [
{
// Gauge fixo, sempre visível
type: "gauge",
center: ['75%', '50%'], // Posiciona o gauge à direita
radius: '30%',
detail: { formatter: '{value}%' },
data: [{ value: 50, name: 'Progress' }]
}
]
},
options: [
// Opção 1: Gráfico de barras para janeiro
{
series: [
{
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [10, 20, 30]
}
]
},
// Opção 2: Gráfico de barras para fevereiro
{
series: [
{
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [15, 25, 35]
}
]
},
// Opção 3: Gráfico de barras para março
{
series: [
{
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [20, 30, 40]
}
]
}
]
};
chartUse.setOption(option);
</script>
</body>
</html>
In other words, using just one instance (chartUse) I need to place other charts using the timeline in this same instance. How can I adjust baseOption and options to achieve this result?