echarts在同一个dom元素中创建两个图表

核心：使用grid进行分区

// 直角坐标系内绘图网格 左右通过left和right分 上下通过top和bottom分
grid: [
    { left: '10%', right: '55%', width: '30%' },
    { left: '55%', right: '10%', width: '30%' },
],

实例效果图：

 实例代码：

initEcharts() {
    var chartDom = document.getElementById('myChart')
    var myChart = echarts.init(chartDom)
    var option = {
        toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {
                // 还原
                restore: {
                    show: true,
                },
                // 保存为图片
                saveAsImage: {
                    show: true,
                    // 保存图片的分辨率比例，可以设置为大于 1 的值
                    pixelRatio: 2,
                },
            },
        },
        // 直角坐标系内绘图网格
        grid: [
            { left: '10%', right: '55%', width: '30%' },
            { left: '55%', right: '10%', width: '30%' },
        ],
        xAxis: [
            {
                type: 'category',
                // 对应坐标轴所在grid的索引
                gridIndex: 0,
                data: ['2021', '2022'],
            },
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
                name: '计划量',
                // y轴网格线
                // splitLine: { show: false },
            },
            {
                type: 'value',
                gridIndex: 0,
                name: '完成量',
            },
        ],
        series: [
            {
                name: '计划量',
                type: 'bar',
                // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [300, 410],
                barWidth: 20,
                label: {
                    show: true,
                    position: 'top',
                },
            },
            {
                name: '完成量',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [150, 250],
                barWidth: 20,
                label: {
                    show: true,
                    position: 'top',
                },
            },
            {
                type: 'pie',
                //饼图你可以显示文字，data写法如下
                data: [
                    { name: 'Ⅰ类', value: 10 },
                    { name: 'Ⅱ类', value: 20 },
                    { name: 'Ⅲ类', value: 30 },
                    { name: 'Ⅳ类', value: 60 },
                ],
                //饼图位置
                left: 220,
                radius: 50,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b} : {c}({d}%)',
                },
            },
        ],
    }
    myChart.setOption(option)
    this.chartObj = myChart
},