双坐标系, 坐标轴格式化echarts 柱状配置项内容和展示

Top5

      
var names = ['hbj_jdcpt_db', 'mzj-w01', 'rsj-db', 'xzzx-ptweb', 'szb_cd02'];
var dataList = [15, 35,45,60,80.26];

option = {
    backgroundColor: '#071347',
    title: [{
        left: '20px',
        top: '20%',
        text: 'CPU',
        textStyle:{
            color: '#fff',
        },
        subtext: 'Top5',
        subtextStyle:{
            color: '#fff'
        },
        textAlign: 'center',
    }, {
        left: '20px',
        top: '75%',
        text: '内存',
        textStyle:{
            color: '#fff'
        },
        subtext: 'Top5',
        subtextStyle:{
            color: '#fff'
        },
        textAlign: 'center',
    }],
    grid: [{
        left: '50px',
        top: '2px',
        right: '2px',
        bottom: '55%',
        containLabel: true,
    }, {
        left: '50px',
        top: '55%',
        right: '2px',
        bottom: '2px%',
        containLabel: true,
    }],
    xAxis: [{
        type:'value',
        position:'top',
        splitNumber:2,
        gridIndex: 0,
        splitLine: {
            show: true,
            lineStyle:{
                color:'#65ebff',
                width:2,
                type:'dashed'
            }
        },
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            show: true,
            formatter: function(value) {
                return value.toLocaleString() + '%';
            },
           textStyle: {
                color: '#fff',
                fontSize:16
            },
        },
        z:3
    }, {
        type: 'value',
        position: 'top',
        splitNumber:2,
        gridIndex: 1,
        splitLine: {
            show: true,
            lineStyle:{
                color:'#65ebff',
                width:2,
                type:'dashed'
            }
        },
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            show: true,
            formatter: function(value) {
                return value.toLocaleString() + '%';
            },
           textStyle: {
                color: '#fff',
                fontSize:16
            },
        },
        z:3
    }],
    
    yAxis: [{
        type:'category',
        data: names,
        gridIndex: 0,
        splitLine: {show: false},
        axisLabel:{ 
            show:false,
        },
        axisTick: { show: false },
        axisLine: { show: false  },
        z:3
    }, 
    {
        type:'category',
        data: dataList,
        gridIndex: 0,
        splitLine: {show: false},
        axisTick: { show: false },
        axisLine: { show: false  },
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 16
            },
            formatter: function(value) {
                return value.toLocaleString() + '%';
            },
        },
    }, 
    {
        type:'category',
        data: names,
        gridIndex: 1,
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false  },
    },
    {
        type:'category',
        data: dataList,
        gridIndex: 1,
        splitLine: {show: false},
        axisTick: { show: false },
        axisLine: { show: false  },
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: 16
            },
            formatter: function(value) {
                return value.toLocaleString() + '%';
            },
        },
    }],

    series: [{
        name: 'CPU Top5',
        type: 'bar',
		itemStyle: {
			color: {
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [
					{
						offset: 0,
						color: '#FAD961',
					},
					{
						offset: 1,
						color: '#F76B1C',
					},
				],
				global: false, // 缺省为 false
			},
		},
		label:{
		    show: true,
		    position: 'insideLeft',
		    formatter(params){
		        return params.name;
		    }
		},
		showBackground: true,
		backgroundStyle: {
			color: 'rgba(17,40,95, 0.8)',
		},
		barWidth: 16,
		xAxisIndex: 0,
        yAxisIndex: 0,
        data: dataList,
    }, {
        name: '内存 Top5 ',
        type: 'bar',
		itemStyle: {
			color: {
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [
					{
						offset: 0,
						color: '#FAD961',
					},
					{
						offset: 1,
						color: '#F76B1C',
					},
				],
				global: false, // 缺省为 false
			},
		},
		label:{
		    show: true,
		    position: 'insideLeft',
		    formatter(params){
		        return params.name;
		    }
		},
		showBackground: true,
		backgroundStyle: {
			color: 'rgba(17,40,95, 0.8)',
		},
		barWidth: 16,
        xAxisIndex: 1,
        yAxisIndex: 2,
        data: dataList,
    }]
};