三联水球图

描述:当前是关于Echarts图表中的 水球图 示例。
 
            var attrs = [{
    'name': '总用户数',
    'value': 518167,
    'center_l': '25%'
}, {
    'name': '买家数',
    'value': 4167,
    'center_l': '50%'
}, {
    'name': '卖家数',
    'value': 18167,
    'center_l': '75%'
}]
var datas = [
    [0.6, 0.6, 0.6],
    [0.1, 0.1, 0.1],
    [0.2, 0.2, 0.2]
];


var series = [];
for (var i = 0; i < datas.length; i++) {
    var item = {
        type: 'liquidFill',
        radius: '22%',
        center: [attrs[i].center_l, '50%'],
        //  shape: 'roundRect',
        data: datas[i],
        backgroundStyle: {
            color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(4,33,77, 0)'
                }, {
                    offset: 0.5,
                    color: 'rgba(4,33,77, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(4,33,77, 1)'
                }],
                globalCoord: false
            },
        },
        outline: {
            borderDistance: 5,
            itemStyle: {
                borderWidth: 5,
                borderColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(50,115,233, 1)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(50,115,233, .5)'
                    }, {
                        offset: 1,
                        color: 'rgba(50,115,233, 1)'
                    }],
                    globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#000',
            }
        },
        color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 1,
                color: 'rgba(72,107,254, 0.8)'
            }, {
                offset: 0.75,
                color: 'rgba(21,216,238, .5)'
            }, {
                offset: 0,
                color: 'rgba(72,107,254, 1)'
            }],
            globalCoord: false
        }],
        label: {
            normal: { //此处没有生效,本地生效
                textStyle: {
                    fontSize: 30,
                    color: '#e6e6e6',
                },
                formatter: function(params){
                   console.log(params)
                   return 

                }

            }
        }
    }
    series.push(item);
}

option = {
    backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        offset: 0,
        color: '#010612'
    }, {
        offset: 1,
        color: '#091638'
    }]),
 graphic: [],
    series: series
};