带间隙Top10排名echarts 柱状配置项内容和展示

          var arr1 = []
    var data1 = ['辽宁卫视', '山东卫视', '吉林卫视', '北京TV', '天津卫视', '内蒙古卫视', '山西卫视', '广东卫视', '芒果台', '江苏卫视'];
    var arr2 = [];
    var data2 = ['栏目1', '栏目2', '栏目3', '栏目4', '栏目5', '栏目6', '栏目7', '栏目8', '栏目9', 'top10'];
    var val2 = [];
    var val1 = [];
    var value1 = [482, 378, 446, 518, 238, 358, 312, 378, 220, 452];
    var value2 = [245, 123, 643, 123, 333, 123, 56, 378, 220, 452]
    /*  for (var i = 0 ; i < 10 ; i++) {
          arr1.push(data1[i])
          arr1.push('');
          val1.push(value1[i]);
          val1.push(0);
          arr2.push(data1[i]);
          arr2.push(data2[i]);
          val2.push(0);
          val2.push(value2[i])
      }*/
    arr1 = data1;
    arr2 = data2;
    val1 = value1;
    val2 = value2
    console.log(arr2)
    console.log(val2)
    option = {
        backgroundColor : '#03060f',
        legend: {
            position: "bottom",
            bottom: "32",
            data: [{
                name: '频道'
            }, {
                name: '栏目'
            }],
            itemGap: 32, // 设置间距
            textStyle: {
                color: '#fff',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300
            }
        },
        grid: [
            {
                top: 16, //上边距
                height: 400,
                width: '80%'
            },
            {
                top: 36, //上边距
                height: 400,
                width: '80%'
            },
            {
                top: 16, //上边距
                height: 420,
                width: '80%'
            },
            {
                top: 16, //上边距
                height: 420,
                width: '80%'
            }
        ],
        xAxis: [
            {
                gridIndex: 0,
                max: 500,
                splitNumber: 8,
                show: false,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    lineStyle: {
                        color: '#10899A',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 300
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 14,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
            },
            {
                max: 500,
                show: false,
                gridIndex: 1,
                splitNumber: 8,
                inverse: true,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    lineStyle: {
                        color: '#10899A',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 300
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 14,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
            },
            {
                max: 500,
                show: false,
                gridIndex: 2,
                splitNumber: 8,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    lineStyle: {
                        color: '#10899A',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 300
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 14,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
            },
            {
                max: 500,
                show: false,
                gridIndex: 3,
                splitNumber: 8,
                axisLine: {
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    lineStyle: {
                        color: '#10899A',
                        fontSize: 14,
                        fontFamily: 'PingFangSC',
                        fontWeight: 300
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 14,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
            },
        ],
        yAxis: [
            {
                gridIndex: 0,
                position: 'left',
                data: arr1,
                nameTextStyle: {
                    color: '#32353C',
                    padding: [0, 0, 0, 8],
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                },
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    margin: 10,
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#fff',
                            fontSize: 12,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300
                        }
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                splitLine: {
                    show: false,
                }

            },
            {
                gridIndex: 1,
                data: arr2,
                position: 'right',
                nameTextStyle: {
                    color: '#32353C',
                    padding: [0, 0, 0, 8],
                    fontSize: 14,
                    fontFamily: 'PingFangSC',
                    fontWeight: 300
                },
                top: 12,
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#fff',
                            fontSize: 12,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#10899A'
                    }
                },
                splitLine: {
                    show: false,
                }
            },
            {
                gridIndex: 2,
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 14,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300
                        }
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#32353C'
                    }
                },
                splitLine: {
                    show: false,
                }

            },
            {
                gridIndex: 2,
                position: 'right',
                axisLabel: {
                    formatter: (params) => {
                        return '{marginTop|' + params + '}';
                    },
                    rich: {
                        marginTop: {
                            padding: [0, 0, 0, 0],
                            color: '#06D3CD',
                            fontSize: 12,
                            fontFamily: 'PingFangSC',
                            fontWeight: 300

                        }
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#32353C'
                    }
                },
                splitLine: {
                    show: false,
                }
            }
        ],
        series: [
            {
                name: '频道',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        baseline: 'middle',
                        fontSize: 12,
                        fontWeight: '400',
                        position: 'insideLeft',
                        color : '#fff',
                        lineHeight : 14,
                        padding : [0,12,0,12]
                    }
                },
                itemStyle: {
                    barBorderRadius: 10,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(8,117,255)'
                    },
                        {
                            offset: 1,
                            color: '#6DE667'
                        }
                    ])
                },
                barWidth: 14,
                data: val1
            },
            {
                name: '栏目',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                    normal: {
                        show: true,
                        baseline: 'middle',
                        fontSize: 12,
                        fontWeight: '400',
                        position: 'insideRight',
                        color : '#fff',
                        lineHeight : 14,
                        padding : [0,12,0,12]
                    }
                },
                itemStyle: {
                    barBorderRadius: 10,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#FCB344'
                    },
                        {
                            offset: 1,
                            color: '#F64744'
                        }
                    ])
                },
                barWidth: 14,
                data: val2,
            },

        ]
    };