帕累托图模拟echarts 柱状配置项内容和展示

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

配置项如下
      option = {
            title: {
                text: '帕累托图模拟',
                subtext:'数据纯属瞎编',
                left:'left',
            },
            tooltip: {
                trigger:'item',
                formatter:'{c}%'
                /*axisPointer:{
                    type:'line'
                }*/
            },
            legend: {
                data:['Quantity', {name:'Accumulative Share %',icon:'circle'}],
                icon:'roundRect',
                orient:'vertical',
                right:'14%',
                bottom:'60%'
            },
            xAxis: [
                {
                    splitLine:{
                        show:false
                    },
                    data: ['Issue A', 'Issue B', 'Issue C', 'Issue D', 'Issue E', 'Issue F', 'Issue G']
                },
                {
                    splitLine:{
                        show:false
                    },
                    boundaryGap:false,
                    axisLabel:{
                        show:false
                    },
                    data:['Issue A', 'Issue B', 'Issue C', 'Issue D', 'Issue E', 'Issue F', 'Issue G','total']
                }
            ],
            yAxis: [
                {
                    type:'value',
                    max:100,
                    axisLabel:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    }
                },
                {
                    type:'value',
                    axisLabel:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],
            series: [
                {
                    name:'Quantity', 
                    type:'bar',
                    xAxisIndex:0,
                    yAxisIndex:0,
                    barCategoryGap:'10%',
                    silent:true,
                    label:{
                        normal:{
                            show:true,
                            position:'top',
                            //formatter:'{c}
                            textStyle:{
                                fontWeight:'bold',
                                fontSize:20
                            }
                        }
                    },
                    data:[56, 44, 38, 25, 20, 12, 7]
                },
                {
                    name:'Accumulative Share %', 
                    type:'line',
                    xAxisIndex:1,
                    yAxisIndex:1,
                    smooth:true,
                    clipOverflow:false,
                    symbolSize:9,
                    itemStyle:{
                        normal:{
                            //color:,
                            //borderColor:,
                            borderWidth:3,
                        }
                    },
                    lineStyle:{
                        normal:{
                            //color:,
                            width:4,
                        }
                    },
                    data:[0, 28, 50, 68, 81, 91, 97,100]
                }
            ]
        };

    
截图如下