x轴顶部多级分组展示ECharts Gallery

20:11:45图表已生成
代码
xData = ['2019-1', '2019-2', '2019-1', '2019-2', '2019-3', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12']
option = {
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        },
        // trigger: 'axis',
        // axisPointer: { // 坐标轴指示器，坐标轴触发有效
        //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        // }
    },
    legend: {
        show: false
    },
    grid: [{
            //tier3
            top: 120,
            bottom: 80,
            borderWidth: 1,
            show: true,
            // borderColor: 'black'
        },
        {
            //tier2
            height: 60,
            top: 60,
            borderWidth: 2,
            show: true,
            // borderColor: 'green',
            tooltip: {
                show: false
            }
        },
        {
            //tier1
            height: 60,
            top: 0,
            borderWidth: 3,
            show: true,
            // borderColor: 'red',
            tooltip: {
                show: false
            }
        }
    ],
    xAxis: [{
            type: 'category',
            // gridIndex:2,
            zlevel: 3,
            gridIndex: 0,
            data: xData,
            splitLine: {
                show: true,
                interval: function(index, value) {
                    if ([1, 2, 4, 6, 9, 11].indexOf(index) != -1) {
                        console.log(index, value)
                        return false;
                    } else {
                        return true;
                    }
                },
                lineStyle:{
                    // color:'red',
                    type:'dashed'
                }
            }
        },
        {
            type: 'category',
            gridIndex: 1,
            zlevel: 2,
            axisTick: {
                show: true,

            },
            // axisTick:{
            //     length:'300',
            //     inside:true
            // }
            // data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        },
        {
            type: 'category',
            gridIndex: 2,
            zlevel: 1
            // data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        }
    ],
    yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
                show: false
            }

        }, {
            type: 'value',
            gridIndex: 1,

            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }, {
            type: 'value',
            gridIndex: 2,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }

    ],
    series: [{
            name: 'Tier3',
            type: 'scatter',
            // smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 0,
            barGap: 0,
            showBackground: true,
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
            // markLine: {
            //     symbol: ['none', 'none'],
            //     label: {
            //         show: false
            //     },
            //     data: [{
            //             xAxis: 3
            //         },
            //         {
            //             xAxis: 3
            //         },
            //         {
            //             xAxis: 5
            //         },
            //         {
            //             xAxis: 7
            //         }
            //     ]
            // },
        }, {
            name: 'Tier3',
            type: 'scatter',
            // smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 0,
            barGap: 0,
            showBackground: true,
            itemStyle: {
                normal: {
                    color: 'green'
                }
            },
            data: [5.9, 10.9, 6.1, 6.7, 8.3, 40.2, 251.6, 66.6, 49.4, 90.4, 109.3, 6.7],
        },
        {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (3 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}'
            },
            barGap: 0,

        }, {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // smooth: true,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (2 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
        }, {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // smooth: true,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (2 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
        }, {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // smooth: true,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (1 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
        }, {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // smooth: true,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (2 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
            barGap: 0,
        }, {
            name: 'Tier2',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // smooth: true,
            data: [{
                name: 'Tier2',
                value: 1
            }],
            barWidth: (2 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
            barGap: 0,
        },
        {
            name: 'Tier1',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            // smooth: true,
            data: [{
                name: 'Tier1',
                value: 1
            }],
            barWidth: (5 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
            barGap: 0,
        },
        {
            name: 'Tier1',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            // smooth: true,
            data: [{
                name: 'Tier1',
                value: 1
            }],
            barWidth: (3 / xData.length) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
            barGap: 0,
        },
        {
            name: 'Tier1',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            // smooth: true,
            data: [{
                name: 'Tier1',
                value: 1
            }],
            barWidth: (1 / 6) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
        },
        {
            name: 'Tier1',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            // smooth: true,
            data: [{
                name: 'Tier1',
                value: 1
            }],
            barWidth: (1 / 6) * 100 + '%',
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
            },
        }

    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
