ECharts双柱图

 <div id="myChart" :style="{ width: '500px', height: '400px' }"></div>

js里面

drawManyBar(container, titleName, legendData, xData, seriesDatas) {
    var ticket = this.$echarts.init(document.getElementById("myChart"));
    var ticketOption = {
        //标题样式
        title : {
            text : titleName,
            textStyle : {
                color : '#17273B',
            },
            left : 'left'
        },
        //提示框
        tooltip : {
            trigger : 'axis',
            backgroundColor : 'gray',
            axisPointer : {
                type : 'shadow'
            },
            //提示信息格式，支持html样式
            formatter : function(params) {
                var res = '<div style="color:#00C7FF">';
                res += '<strong>' + params[0].name + '（万元）</strong>';
                for ( var i = 0, l = params.length; i < l; i++) {
                    res += '<br/>' + ((i == 4) ? '&nbsp;&nbsp;' : '')
                            + params[i].seriesName + ' : '
                            + params[i].value;
                }
                res += '</div>';
                return res;
            }
        },
        //菜单
        legend : {
            //菜单字体样式
            textStyle : {
                color : '#17273B'
            },
            //菜单位置
            // x : 'right',
             bottom : '0',
             left:'20',
            //菜单数据
            data : legendData
        },

        xAxis : [ {
            type : 'category',
            axisLine : {
                show : true,
                //x轴线样式
                lineStyle : {
                    color : '#17273B',
                    width : 1,
                    type : 'solid',
                }
            },
            //x轴字体设置
            axisLabel : {
                show : true,
                fontSize : 12,
                color : '#17273B'
            },
            data : xData
        } ],
        yAxis : [ {
            type : 'value',
            //y轴字体设置
            axisLabel : {
                show : true,
                color : '#17273B',
                fontSize : 12,          
                // formatter : function(value) {
                //     return value + '万';
                // }
            },
        max: 5000,
        } ],
        series : [  {
            name : '押金数',
            type : 'bar',
            barWidth :30,
            itemStyle : {
                color : 'rgb(59,161,255)',
            },
            data : seriesDatas[0]
        }, {
            name : '押桶数',
            type : 'bar',
            barWidth : 30,
            itemStyle : {
                color : 'rgb(249,205,20)',
            },
            data : seriesDatas[1]
        } ]
    };
    ticket.setOption(ticketOption);
},

调用

    this.service({    //请求
          method: "post",
          url: "/api/admin/getBucketStatisticsLsit",
          data: data,
        })
        .then((res) => {   //请求成功之后得到要用的数据
        that.tongjilist=res.data
            var titleName = '押桶统计图';
            var legendData = [ '押金数', '押桶数' ];
            var xData = [];
            var seriesDatas = [[  ], [  ]];
            for(var k in res.data.list){
            xData.push(res.data.list[k].class_name)
            seriesDatas[0].push(res.data.list[k].amount)
            seriesDatas[1].push(res.data.list[k].number)
}
   that.drawManyBar('manyBar', titleName, legendData, xData, seriesDatas);
        });

效果图