echarths 使用环形柱状图实行环比效果

echarths 使用环形柱状图实行环比效果

var option = {

    angleAxis: {
        startAngle:90, // 开始位置
        clockwise:false,// 是否顺时针
        max:100,// 坐标轴最大值100
        axisLine:{
            show:false // 不显示坐标轴
        },
        splitNumber:1,
        axisTick:{
            show:false,//是否展示刻度
        },
    },
    radiusAxis: {
        type: 'category',
        data: [
            {
                value:10,
                label:{
                    show:true,
                    position: 'top'
                }
            },
            {
                value:20,
                label:{
                    show:true,
                    position: 'top'
                }
            },
            {
                value:30
            },
        ],
        z: 10,
        label:{
            hoverOffset: 0,//高亮扇区的偏移距离。
            clockwise: false,//饼图的扇区是否是顺时针排布。
            startAngle: 90,//起始角度，支持范围[0, 360]。

        },
        axisLine:{
            show:false
        },
        axisTick:{
            show:false,//是否展示刻度
            length:2,// 刻度长度
            splitNumber:20
        },
        axisLabel:{
            inside: false
        }
    },
    polar: {
    },
    series: [
        {
            type: 'bar',
            data: [
                {
                    value: 10,
                    itemStyle:{
                        color:'#3bd8a3'
                    }

                },
                {
                    value: 20,
                    itemStyle:{
                        color:'#f5a623'
                    }
                },
                {
                    value: 30,
                    itemStyle:{
                        color:'#006be0'
                    }
                }

            ],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            barMaxWidth:'27%', // 柱状图的粗细
        },
        {
            type: 'bar',
            data: [
                {
                    value:100-10,
                    itemStyle:{
                        color:'#eceef0'
                    }

                },
                {
                    value: 100-20,
                    itemStyle:{
                        color:'#eceef0'
                    }
                },
                {
                    value: 100-30,
                    itemStyle:{
                        color:'#eceef0'
                    }
                }

            ],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            barMaxWidth:'27%', // 柱状图的粗细
        }
    ],
    // legend: {
    //     show: true,
    //     data: ['A', 'B']
    // }
};