效果图

JS

let rst = [
            {
                name: 'Matcha Latte',
                data:[{time: '2012',num: 365},
                    {time: '2013',num: 815},
                    {time: '2014',num: 665},
                    {time: '2015',num: 565},
                ]
            },{
                name: 'Milk Tea',
                data:[{time: '2012',num: 265},
                    {time: '2013',num: 615},
                    {time: '2014',num: 465},
                    {time: '2015',num: 965},
                ]
            },{
                name: 'Cheese Cocoa',
                data:[{time: '2012',num: 765},
                    {time: '2013',num: 215},
                    {time: '2014',num: 765},
                    {time: '2015',num: 165},
                ]
            }
        ];
        

        let chartOption = {
            el:'#chart',// 放置图表的元素 css 选择器
            title: '市场饮料销售情况',// 图表标题
            unit: '吨',
            dataArr: rst,
            
        }

        
        /**
         * chtOption = {
         *  el:'', // 放置图表的元素 css 选择器
            title: '', // 图表大标题
            unit: [], // 单位
         * }
         * 
         * */
        function barChart (chtOption){let myChart = echarts.init(document.querySelector('#chart'));
            let dataObj = {series: [],// 系列数据
                xData:[],// x 轴数据
                yData:[],// 类目数据
                source: [],
                chartType: [],}
            for(let i in chtOption.dataArr[0].data){dataObj.series.push(chtOption.dataArr[0].data[i].time);
            }
            for(let i in chtOption.dataArr){let perSeries = [];
                perSeries.push(chtOption.dataArr[i].name);
                for(let j in chtOption.dataArr[i].data){perSeries.push(chtOption.dataArr[i].data[j].num);
                    
                }
                dataObj.xData.push(perSeries);
                dataObj.yData.push(chtOption.dataArr[i].name);
            }
            let dataSeries =  ['name_value'];
            for(let i in dataObj.series){dataSeries.push(dataObj.series[i]);
                dataObj.chartType.push({type: 'bar'});
            }
            dataObj.source.push(dataSeries);
            for(let i in dataObj.xData){dataObj.source.push(dataObj.xData[i]);
            }
            let option = {
                title: {
                    text: chtOption.title,
                    textAlign: 'left'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'}
                },
                legend: {data: chtOption.series},
                grid: {
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                dataset: {source: dataObj.source},
                xAxis: [{ gridIndex: 0,name: '单位:' + chtOption.unit}
                ],
                yAxis: [{type: 'category',gridIndex: 0}
                ],
                series: dataObj.chartType
            };

            myChart.setOption(option);
        }
        
        barChart(chartOption);