echarts 象形图实现三角柱图

曾经终败给现在 2024-03-23 02:30 107阅读 0赞

![在这里插入图片描述][0b0cb7bfdaad400e9a81a9dffb2abd55.png]

option = {
        
        xAxis: {
        
            type: 'category',
            data: ['小于1年', '1-5年', '6-10年', '10-12年', '12年以上'],
            splitLine: {
        
                show: true,
                lineStyle: {
        
                    type: 'dashed',
                },
            },
        },
        yAxis: {
        
            name: "单位：套",
            nameTextStyle: {
        
                padding: [0, 10, 0, 0]
            },
            type: 'value',
            splitLine: {
        
                lineStyle: {
        
                    type: 'dashed',
                },
            },
            splitArea: {
        
                show: true,
                areaStyle: {
        
                    color: ['#fff', '#F7FAF9'],
                },
            },
        },
        series: [
            {
        
                label: {
        
                    show: true,
                    position: 'top',
                    color: '#E0A93A',
                    fontSize: 18,
                    fontWeight: 'bold',
                },
                name: 'test',
                data: [4, 17, 17, 5, 15],
                type: 'pictorialBar',
                barWidth: 66,
                symbol: 'path://M150 50 L130 130 L170 130  Z',
                itemStyle: {
        
                    color: {
        
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
        
                                offset: 0,
                                color: '#E0A93A',
                            },
                            {
        
                                offset: 1,
                                color: '#FBE7BB',
                            },
                        ],
                        global: false,
                    },
                },
            },
        ],
    };

[0b0cb7bfdaad400e9a81a9dffb2abd55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ca88d3b9a0d244539a1cae9eddc87c74.png