我正在学习如何使用 eCharts 并尝试不同的类型。我剪切并粘贴了两种 eChart 条形类型，一种带有向下钻取 (id = main2)，一种带有负值的水平 (id = main1)；它们排列在单个表格行中。
两者都能正确呈现，向下钻取功能也运行良好；后退按钮按预期工作并显示正确的初始条形图；只不过返回后它在图表的顶层仍然可见。刷新页面会将其删除。
<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>
