echart 实现上下双X轴数据展示

最新推荐文章于 2024-03-06 17:30:08 发布

码海遨游

最新推荐文章于 2024-03-06 17:30:08 发布

阅读量1k

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/weixin_46221246/article/details/132011081

版权

直接上图上配置
在这里插入图片描述

 const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    Calculable: true,
    legend: {//图例
      data: ['在线','离线','I级异常','II级异常'],
      
      
    },
    grid: [{bottom:"50%"},{top:'50%'}],
    xAxis: [
        {
            type: 'category',
            show:true,
            axisLine: {show: true, onZero: false},
            axisTick: {show: false},
            axisLabel: {show: false,color:"green",fontSize:16},
            splitArea: {show: false},
            splitLine: {show: false},
            data:['7/01','7/02','7/03','7/04','7/05'],
            position:"top",
            min:0,
            nameTextStyle:{fontSize:16},
        },
        {
            type: 'category',
            show:true,
            axisLine: {show: true, onZero: false},
            axisTick: {show: false},
            axisLabel: {show: true,color:"green",fontSize:16},
            splitArea: {show: false},
            splitLine: {show: false},
            data:['7/01','7/02','7/03','7/04','7/05'],
            gridIndex:1,
            position:"bottom",
            zlevel:10,
            min:0,
            nameTextStyle:{fontSize:16},
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {show: true, onZero: false,lineStyle:{color:"#000"}},
            axisLabel: {formatter: '{value}',fontSize:16},
            minInterval:1,
            splitLine:false,
            inverse:true, 
            nameTextStyle:{fontSize:16},
            min:0,
            max:24,
        },
        {
            type: 'value',
            axisLine: {show: true, onZero: false,lineStyle:{color:"#000"}},
            axisLabel: {formatter: '{value}',fontSize:16},
            minInterval:1,
            position:"left",
            splitLine:false,
            gridIndex:1,
            nameTextStyle:{fontSize:16},
            min:0,
            max:24,
        }
    ],
    series: [
        {type:"bar",name:"在线",barMaxWidth:40,data:[10, 2, 3, 4, 5],itemStyle:{normal:{color:'green'}}},
        {type:"bar",name:"离线",barMaxWidth:40,data:[5, 4, 3, 2, 10],itemStyle:{normal:{color:'gray'}}},
        {type:"bar",name:"I级异常",barMaxWidth:40,data:[12, 12, 5, 5, 4],xAxisIndex: 1,yAxisIndex: 1,itemStyle:{normal:{color:'orange'}}},
        {type:"bar",name:"II级异常",barMaxWidth:40,data:[12, 24, 5, 5, 4],xAxisIndex: 1,yAxisIndex: 1,itemStyle:{normal:{color:'red'}}},
    ]
};