一、效果图
二、代码实现
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']},
