echarts设置多级x轴

1.效果图
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)'
      }
    }
  ]
};

你可能感兴趣的:(js,前端开发,echarts,前端)