echarts设置多级x轴

最新推荐文章于 2024-09-12 04:05:15 发布

CenterElse

最新推荐文章于 2024-09-12 04:05:15 发布

阅读量6.4k

点赞数 5

分类专栏： js 前端开发文章标签： echarts 前端

本文链接：https://blog.csdn.net/clearlove_8/article/details/124152799

版权

前端开发同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

该博客展示了如何使用Echarts库创建一个具有多个分类x轴的图表。通过设置不同的`offset`属性，实现了在同一图表上显示不同类别的数据，如日期、省份和季度。同时，包含了四个系列的柱状图数据，分别表示预算金额、项目金额、实付金额和预算执行率，以直观地比较各类别的资金状况。

摘要由CSDN通过智能技术生成

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)'
      }
    }
  ]
};