echarts制作两个柱状图

ECharts是一个强大的JavaScript数据可视化库，可以用于创建各种图表，包括柱状图。如果你想在ECharts中制作两个柱状图，你可以按照以下步骤操作：

1. 引入ECharts库和必备模块：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. 定义容器元素和配置选项：

// 创建两个柱状图实例
var myChart1 = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));

// 每个图表的配置
var option1 = {
    title: {
        text: '柱状图一'
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {},
    series: [{
        name: '数据1',
        type: 'bar',
        data: [10, 20, 30, 40]
    }]
};

var option2 = {
    title: {
        text: '柱状图二'
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {},
    series: [{
        name: '数据2',
        type: 'bar',
        data: [50, 60, 70, 80]
    }]
};

3. 绑定事件更新图表内容：

myChart1.setOption(option1);
myChart2.setOption(option2);

// 更新第二个图表的数据示例
function updateChart2(newData) {
    option2.series[0].data = newData;
    myChart2.setOption(option2);
}

4. 在HTML中添加对应id的div元素：

<div id="chart1" style="width: 50%; height: 400px;"></div>
<div id="chart2" style="width: 50%; height: 400px;"></div>