echarts多组堆叠柱状图

一、效果图

二、代码实现

1、创建容器

 <el-card class="box-card">
      <div slot="header" class="clearfix">
           <span>课堂学习</span>
      </div>
      <div id="class-learning" style="height: 360px"></div>
 </el-card>

2、初始化实例

 created () {
        this.$nextTick(()=>{
            this.initCharts()
        });
    },

 getAnalysisData(result){
            let hasData = result != null && JSON.stringify(result) != '{}';
            this.initCharts(hasData);
        },

 initCharts(hasData){
            this.chartInstances.forEach(chart =>{
                if(chart != null & chart != '' && chart != undefined){
                    chart.dispose();
                }
            })
            this.chartInstances = [
                echarts.init(document.getElementById('class-learning')).setOption(this.learningOption),
            ]
        }

3、设置柱状图样式和内容

 learningOption : {
                title: {
                    text: '课堂学习各指标人数分布',
                    left: '49%',
                    textAlign: 'center',
                },
                // legend的data内容与series中的数据name名称要保持一致 图例的名称和颜色才会显示
                legend: {
                    data: ["专注听讲", "认真思考","积极参与","内容掌握度"],
                    bottom: "20px",
                },
                xAxis: {
                    type: 'category',
                    data: ['语文', '数学', '英语']
                },
                yAxis: {
                    type:'value',
                    // axisLabel: {
                    //     show: true,// 显示x轴标签
                    //     formatter: `{value}%`,
                    //     interval: 0
                    // },
                    // axisTick:{
                    //     show: true //不显示坐标轴刻度线
                    // },
                    axisLine: {
                        show: true, //显示坐标轴线
                    },
                    splitLine: {     //网格线
                        "show": false
                        },
                    // y轴刻度标签设置 对value整除得到list数组的下标 再显示到y轴标签上
                    axisLabel: {
                        formatter: (value) => {
                            const list = ['差', '较差', '','较好','', '好']
                                return list[value/20]
                        }
                    },
                },
                series: [
                    //堆叠柱状图 堆叠在同一个柱子上要设置一样的stack值（可以是数字可以是字符可以是汉字）
                {
                    name: '专注听讲差',
                    type: 'bar',
                    stack: '1',
                    // 鼠标停留时高亮显示 其余内容虚化
                    emphasis: {
                        focus: 'series'
                    },
                    // 柱状图的说明标签显示 标签颜色为黑色 单位为%
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%',//单位
                    },
                    // 柱子带边框
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [8,33,12]
                },
                {
                    name: '专注听讲',
                    type: 'bar',
                    stack: '1',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%', //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [32,20,32]
                },
                {
                    name: '专注听讲较好',
                    type: 'bar',
                    stack: '1',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%', //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [41,26,51]
                },
                {
                    name: '专注听讲好',
                    type: 'bar',
                    stack: '1',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%', //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [19,21,5]
                },
                // stack值不同 则是另外一个柱子
                {
                    name: '认真思考差',
                    type: 'bar',
                    stack: '2',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [15,17,8]
                },
                {
                    name: '认真思考',
                    type: 'bar',
                    stack: '2',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [28,45,26]
                },
                {
                    name: '认真思考较好',
                    type: 'bar',
                    stack: '2',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [34,24,28]
                },
                {
                    name: '认真思考好',
                    type: 'bar',
                    stack: '2',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [23,14,38]
                },
                {
                    name: '积极参与差',
                    type: 'bar',
                    stack: '3',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [22,9,5]
                },
                {
                    name: '积极参与',
                    type: 'bar',
                    stack: '3',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [25,40,46]
                },
                {
                    name: '积极参与较好',
                    type: 'bar',
                    stack: '3',
                    // barGap: 10,
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [48,34,35]
                },
                {
                    name: '积极参与好',
                    type: 'bar',
                    stack: '3',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [5,17,14]
                },
                {
                    name: '内容掌握度差',
                    type: 'bar',
                    stack: '4',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [9,22,25]
                },
                {
                    name: '内容掌握度',
                    type: 'bar',
                    stack: '4',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [41,26,25]
                },
                {
                    name: '内容掌握度较好',
                    type: 'bar',
                    stack: '4',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [48,42,35]
                },
                {
                    name: '内容掌握度好',
                    type: 'bar',
                    stack: '4',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        color:'black',
                        formatter: '{c}%' //单位
                    },
                    itemStyle: {
                        normal: {
                            borderColor:'#fff',
                            borderWidth: 1,
                        }
                    },
                    data: [2,10,15]
                }
                ],
                color:['#335899','#3f6ab7','#7991ce','#b3bedf','#a0460d','#ed7d31','#f4b183','#f8cbad',
                '#bf9000','#ffc000','#ffd966','#ffe699','#548235','#70ad47','#a9d18e','#c5e0b4']
            },