子弹图-模仿练习echarts 柱状配置项内容和展示

模仿制作了子弹图,本人是前端初学者,,代码还有很多结构不合理的地方,希望相互学习

配置项如下
      option = {
            title: {
                text: '子弹图-模仿练习',
                subtext:'数据纯属虚构',
                left:'left',
            },
            tooltip: {
                show:true,
                trigger:'axis',
                showDelay:0,
                formatter:'{a0}: {c0}<br />{a1}: {c1}',
                extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                axisPointer:{
                    type:'shadow'
                }
            },
            legend: {
                data:['Actual','Object','General','Good', 'Excellent '],
                icon:'roundRect',
                left:'right'
            },
            xAxis: {
            	boundaryGap: true,
            	axisLine:{
            		show:false
            	},
                data: [
                'KPI 1', 'KPI 2', 'KPI 3', 'KPI 4', 'KPI 5'
                ]
            },
            yAxis: {
                type:'value',
                max:120,
                splitLine:{
                	show:false
                },
                axisLabel:{
                	formatter: '{value} %'
                }
            },
            series: [
            {
                name: 'Actual',
                type: 'bar',
                barGap:'-300%',
                barWidth:10,
                z:10,
                itemStyle:{
                	normal:{
                		color:'#29252C'
                	}
                },
                data: [ 110, 94, 97, 78, 68]
            },
            {
                name: 'Object', 
                type: 'scatter' ,
                symbol:'rect',
                silent:true,
                itemStyle:{
                	normal:{
                		color:'#F33535'
                	}
                },
                symbolSize:[30,5],
                symbolOffset:['-30%',0],
                z:20,
                data: [95, 90, 90, 90, 85]
            },
            {
            	name:'General',
            	type:'bar',
            	barWidth:50,
                itemStyle:{
                	normal:{
                		color:'#AACFD0'
                	}
                },
            	stack:'total',
            	data:[70, 70, 70, 70, 70]
            },
            {
            	name:'Good', 
            	type:'bar',
            	barWidth:50,
                itemStyle:{
                	normal:{
                		color:'#79A8A9'
                	}
                },
            	stack:'total',
            	data:[15, 15, 15, 15, 15]
            },
            {
            	name:'Excellent ', 
            	type:'bar',
            	barWidth:50,
                itemStyle:{
                	normal:{
                		color:'#1F4E5F'
                	}
                },
            	stack:'total',
            	data:[15, 15, 15, 15, 15]
            }]
        };
    
截图如下