[JavaScript知识库] echarts设置多级x轴

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> echarts设置多级x轴 -> 正文阅读

[JavaScript知识库]echarts设置多级x轴

1.效果图
在这里插入图片描述
2.实现的核心代码
设置多个x轴

xAxis:[
    {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  {
        type: 'category',
        position: 'bottom',
        offset: 25,
        axisPointer: {
            type: 'none'
        },
        axisTick:{
            show: false
        },
        axisLine:{
            show: false
        },
        data: ['', '省份1','','省份2 ', '']
    },
  {
        type: 'category',
        position: 'bottom',
        offset: 45,
        axisPointer: {
            type: 'none'
        },
        axisTick:{
            show: false
        },
        axisLine:{
            show: false
        },
        data: ['', '季度', '',]
    }
  ],

3.完整代码

option = {
  xAxis:[
    {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  {
        type: 'category',
        position: 'bottom',
        offset: 25,
        axisPointer: {
            type: 'none'
        },
        axisTick:{
            show: false
        },
        axisLine:{
            show: false
        },
        data: ['', '省份1','','省份2 ', '']
    },
  {
        type: 'category',
        position: 'bottom',
        offset: 45,
        axisPointer: {
            type: 'none'
        },
        axisTick:{
            show: false
        },
        axisLine:{
            show: false
        },
        data: ['', '季度', '',]
    }
  ],
  legend: {
      data: ['预算金额', '项目金额',"实付金额","预算执行率"]
 },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [60, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [120, 200, 150, 80, 70, 190, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 0, 0, 0.2)'
      }
    },
    {
      data: [120, 20, 100, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 0, 0.2)'
      }
    },
    {
      data: [120, 20, 150, 180, 70, 110, 180],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 0, 180, 0.2)'
      }
    }
  ]
};