SOURCE

window.onload = () => {
    // 初始化 echarts 实例
    var myCharts = echarts.init(document.getElementById('main'));
    var myCharts2 = echarts.init(document.getElementById('main2'));

    // 指定图标的配置项和数据
    var option = {
        title: { // 标题组件
            text: 'Echarts 入门示例', // 主标题文本
        },
        tooltip: { //   提示框组件
        },
        legend: { // 图例组件
            data: ['销量'], // 图例的数据数组
        },
        // x轴
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        },
        yAxis: {}, // y轴
        series: [{ // 系列列表
            name: '销量',
            type: 'bar', // 柱形
            data: [5,20,36,10,10,20] // 数据放在系列里
        }]
    };
    var option2 = {
        title: { // 标题组件
            text: 'Echarts 入门示例', // 主标题文本
        },
        tooltip: { //   提示框组件
        },
        dataset: { // 数据存放在二维数组里
            source: [
                ['衬衫',5,10,'X1X',50],
                ['羊毛衫',12,222,'X2X',12],
                ['雪纺衫',12,231,'X3X',32],
                ['裤子',312,12,'X4X',13],
                ['高跟鞋',32,123,'X5X',12],
                ['袜子',132,32,'X6X',32],
            ]
        },
        legend: { // 图例组件
            data: ['销量'], // 图例值

        },
        xAxis: { // x轴
            type: 'category' // 类目轴，适用于离散的类目数据
        },
        yAxis: {}, // y轴根据数量
        series: [{ // 系列
            type: 'pie', // 饼图
            encode: {itemName:0,value:2}, // 指向二维数组的0列和第2列
            radius: 80, // 半径80
            center: ['50%','50%'], // 坐标居中
        }]
    };
    // 使用该配置项数据
    myCharts.setOption(option);
    myCharts2.setOption(option2);
}

<div id="main" style="width: 600px;height: 400px"></div>
<div id="main2" style="width: 600px;height: 400px"></div>