一、效果图
二、代码实现
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']
},
![[开源]YOLOv8+Pyside6的交通红绿灯目标检测源码](https://i-blog.csdnimg.cn/direct/64fea366a3834e7bbfdeb4ffb2dcbd0c.png#pic_center)
