echarts 柱状图 前3个柱子为苹果的不同种类a1有2个，a2有2个，a3有2个；后三个为橘子的不同种类o1有2个，o2有2个，o3有2个。x轴标签为a1，a2，a3，o1，o2，o3，y轴为各自的数量。

ECharts是一个强大的JavaScript数据可视化库，可以创建各种图表，包括柱状图。根据您的描述，您想制作一个柱状图，展示了苹果(a1-a3)和橘子(o1-o3)的类别分布，每个类别各有2个。以下是基本步骤：

1. 首先，在HTML文件中引入ECharts库和初始化一个echarts实例：

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

2. 然后在JavaScript中编写代码，设置数据和配置图形：

var option = {
    xAxis: {
        data: ['a1', 'a2', 'a3', 'o1', 'o2', 'o3']
    },
    yAxis: { name: '数量' }, // y轴标题
    series: [
        {
            name: '苹果',
            type: 'bar', // 使用柱状图
            data: [2, 2, 2] // 分别对应a1、a2、a3的数量
        },
        {
            name: '橘子',
            data: [2, 2, 2], // 分别对应o1、o2、o3的数量
            // 如果希望柱子颜色不同，可以设置itemStyle.color属性
            itemStyle: {
                color: ['#ff7f50'] // 示例橙色
            }
        }
    ]
};

// 初始化并渲染图表
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
chart.resize(); // 图表可能需要调整大小以适应内容