echarts堆叠柱图

效果如下

实现方式

moveDraw(name, isOwner, notOwner, noAppointNum) {
                let myChart = echarts.init(document.getElementById('moveStatic'))
                myChart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            let relVal = params[0].name;
                            let value = 0;
                            for (let i = 0, l = params.length; i < l; i++) {
                                value += params[i].value;
                            }
                            for (let i = 0, l = params.length; i < l; i++) {
                                relVal += '<br/>' + params[i].seriesName + ' : ' + (100 *
                                    parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
                            }
                            return relVal;
                        },
                    },

                    legend: {
                        x: '80px',
                        y: '20px',
                        itemWidth: 20,
                        itemHeight: 10,
                        itemGap: 10,
                        textStyle: {
                            fontSize: 12
                        },
                        data: ['自有车', '外调车','未发车']
                    },
                    color: ['#12C2E9', '#C471ED', '#F64F59'],
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'value',
                        axisLabel:{color:'#666666'},
                        axisLine:{
                            lineStyle:{color: '#EEF3F8'}    // x轴坐标轴颜色
                        },

                        splitLine: {     //网格线
                            show: false
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: name,
                        axisLabel:{color:'#666666'},
                        axisLine:{
                            lineStyle:{color: '#EEF3F8'}    // x轴坐标轴颜色
                        }
                    },
                    series: [
                        {
                            name: '自有车',
                            type: 'bar',
                            barWidth : 18,
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        if (params.value > 0) {
                                            return params.value + '%';
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            },
                            data: isOwner
                        },
                        {
                            name: '外调车',
                            type: 'bar',
                            barWidth : 18,
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        if (params.value > 0) {
                                            return params.value + '%';
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            },
                            data: notOwner
                        },
                        {
                            name: '未发车',
                            type: 'bar',
                            barWidth : 18,
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        if (params.value > 0) {
                                            return params.value + '%';
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            },
                            data: noAppointNum
                        }
                    ]
                })
            }

moveDraw中参数：后台返回值一般是json格式，经过处理后调用moveDraw传参渲染，如有疑问请留言