首页 前端知识 双X轴的Echarts图

双X轴的Echarts图

2024-06-20 00:06:08 前端知识 前端哥 971 128 我要收藏

场景

如下图所示,需要实现一个带层级关系的双x轴的柱状图,第一个x轴显示子级别的信息,第二个x轴显示父级关系。
在这里插入图片描述
上面的图很好理解,就是一个正常的堆叠柱状图,底下x轴根据层级关系显示分组信息。

解决方法

以第一个x轴为界限,把图分为上下两个网格。上面的网格为常规图,x轴作为子级;下面的网格为x轴的父级,绘制柱状图,每一根柱子设置相同高度,柱子的宽度设置为子级数量占总数的百分比。

数据结构:

[{
    name: 'Group1',
    children: [
        { name: 'Child1-1', count: 10, num: 20 },
        { name: 'Child1-2', count: 15, num: 22 }
    ]
}, {
    name: 'Group2',
    children: [
        { name: 'Child2-1', count: 13, num: 22 }
    ]
}, {
    name: 'Group3',
    children: [
        { name: 'Child3-1', count: 12, num: 24 },
        { name: 'Child3-2', count: 19, num: 28 }
    ]
}]

Grid配置:

[{
    top: 30,
    right: 10,
    left: 60,
    bottom: 60
}, {
    right: 10,
    left: 60,
    height: 50,   // height + bottom = 第一个grid的bottom
    bottom: 10,
    tooltip: {
    	show: false
    }
}]

父级series配置:

{
    type: 'bar',
    data: [{
        name: item.name,    // 父级x轴显示名称 
        value: 1
    }],
    label: {
        show: true,
        position: 'inside',
        formatter: '{b}',
        offset: [0, 10],
        textStyle: {
            color: '#595959'
        }
    },
    barGap: 0,
    barWidth: `${item.children.length / total * 100}%`,   // 设置宽度
    itemStyle: {
        opacity: 0.6,
        color: 'transparent',
        borderColor: '#cccccc',
    },
    labelLine: {
        show: true
    },
    xAxisIndex: 1,
    yAxisIndex: 1,
    animation: false
}

一个小tips:因为父级X轴需要显示分割线,这里是用border实现的,但是border无法设置每一边的宽度和颜色,所以用当前Grid的axisLine盖住了bottom border

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12936.html
标签
评论
发布的文章

爱心

2024-06-27 17:06:24

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!