I am learning how to use eCharts and trying different types. I cut and pasted two eChart bar types, one with drill down (id = main2) and a horizontal with negative values (id = main1); laid out in a single table row.
Both render properly, and the drill down works fine; the back button works as expected and displays the proper initial bar graph; except it stays visible in the top level of the chart after going back. Refreshing the page removes it.
<head>
<meta charset='utf-8' />
</head>
<body>
<table class="container-drilldown" >
<thead>
</thead>
<tbody>
<tr>
<td class='drilldown' class ='center' id='main2' style='width: 30vw; height:45vh' >
<script type='text/javascript'>
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option = {
xAxis: {
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {},
dataGroupId: '',
animationDurationUpdate: 500,
series: {
type: 'bar',
id: 'sales',
data: [
{
value: 5,
groupId: 'animals'
},
{
value: 2,
groupId: 'fruits'
},
{
value: 4,
groupId: 'cars'
}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
}
}
};
const drilldownData = [
{
dataGroupId: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
},
{
dataGroupId: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
{
dataGroupId: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}
];
myChart.on('click', function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
})
},
series: {
type: 'bar',
id: 'sales',
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: 'clone'
}
},
graphic: [
{
type: 'text',
left: 50,
top: 20,
style: {
text: 'Back',
fontSize: 18
},
onclick: function () {
myChart.setOption(option);
}
}
]
});
}
});
option && myChart.setOption(option);
</script>
</td>
<td class='drilldown' class ='center' id='main1' style='width: 30vw; height:45vh' >
<script type='text/javascript'>
var chartDom1 = document.getElementById('main1');
var myChart1 = echarts.init(chartDom1);
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Profit', 'Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: 'Profit',
type: 'bar',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
option && myChart1.setOption(option1);
</script>
</td>
</tr>
The default behavior of echarts#setOption
is to merge the existing option with the new one; that is the reason why the graphic from the
second option is kept after the call myChart.setOption(option). If you want to have the original option to
completely replace the second option, you have to disable option merging:
myChart.setOption(option, {notMerge: true});
Here's a snippet with your code without the unrelated second chart and without the missing css classes:
const chartDom = document.getElementById('main2');
const explDom = document.getElementById('expl');
const myChart = echarts.init(chartDom);
const option = {
xAxis: {
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {},
dataGroupId: '',
animationDurationUpdate: 500,
series: {
type: 'bar',
id: 'sales',
data: [
{
value: 5,
groupId: 'animals'
},
{
value: 2,
groupId: 'fruits'
},
{
value: 4,
groupId: 'cars'
}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
}
}
};
const drilldownData = [
{
dataGroupId: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
},
{
dataGroupId: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
{
dataGroupId: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}
];
myChart.on('click', function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
})
},
series: {
type: 'bar',
id: 'sales',
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: 'clone'
}
},
graphic: [
{
type: 'text',
left: 50,
top: 20,
style: {
text: 'Back',
fontSize: 18
},
onclick: function () {
myChart.setOption(option, {notMerge: true});
explDom.style.visibility = 'visible';
}
}
]
});
explDom.style.visibility = 'hidden';
}
});
myChart.setOption(option);<table class="" >
<thead>
</thead>
<tbody>
<div id='expl' style="text-align:right">[click on a bar for drilldown]</div>
<tr>
<td class='' id='main2' style='/*width: 30vw; height:45vh;*/ width: 500px; height: 250px' >
</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>