echarts：简单实现默认显示两柱子折线，点击按钮后显示新的柱子
问：
用echarts实现：默认显示两柱子折线，点击“税率”按钮，显示税率柱子，之前的两柱子折线消失
回答：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 示例</title><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><style>#main {width: 600px;height: 400px;}</style>
</head>
<body><div id="main"></div>
<button id="toggleButton">切换图表</button><script>
// 初始数据
const data = {xAxisData: ['类别1', '类别2'],seriesData1: [120, 200], // 柱子1数据seriesData2: [150, 250], // 柱子2数据lineData: [80, 180], // 折线数据newBarData: [300], // 新增的柱子数据sl_x: ['新类别'], // 新增的横轴数据sl_y: [400] // 新增的纵轴数据
};let isNewBarVisible = false; // 标记是否显示新增的柱子// 初始化图表
const myChart = echarts.init(document.getElementById('main'));
createChart();function createChart() {const option = {title: {text: 'ECharts 示例'},tooltip: {},legend: {data: isNewBarVisible ? ['新增柱子'] : ['柱子1', '柱子2', '折线'] // 根据状态决定显示的图例},xAxis: {data: isNewBarVisible ? data.sl_x : data.xAxisData // 根据状态决定x轴数据},yAxis: {},series: [{name: '柱子1',type: 'bar',data: isNewBarVisible ? [] : data.seriesData1 // 如果只显示新增柱子，则原柱子数据为空},{name: '柱子2',type: 'bar',data: isNewBarVisible ? [] : data.seriesData2 // 如果只显示新增柱子，则原柱子数据为空},{name: '折线',type: 'line',data: isNewBarVisible ? [] : data.lineData, // 如果只显示新增柱子，则折线数据为空smooth: true // 设置折线平滑},{name: '新增柱子',type: 'bar',data: isNewBarVisible ? data.sl_y : [] // 显示或者隐藏新增柱子}]};myChart.setOption(option);
}// 切换图表状态
document.getElementById('toggleButton').onclick = function() {isNewBarVisible = !isNewBarVisible; // 切换状态createChart(); // 重新创建图表
};
</script></body>
</html>