testecharts effectScatter配置项内容和展示

配置项如下
      var plantCap = [{
    name: 'A',
    value: '53%'
}, {
    name: 'B',
    value: '46%'
}, {
    name: 'C',
    value: '5T'
}, {
    name: 'D',
    value: '95M'
}, {
    name: 'E',
    value: '57%'
}, {
    name: 'F',
    value: '43%'
}];
var datalist = [{
    offset: [56, 48],
    symbolSize: 110,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(67, 186, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(67, 186, 255)'
    }])

}, {
    offset: [30, 70],
    symbolSize: 70,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(67, 186, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(67, 186, 255)'
    }])
}, {
    offset: [5, 43],
    symbolSize: 60,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(27, 96, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(27, 96, 255)'
    }])

}, {
    offset: [93, 30],
    symbolSize: 70,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(48, 191, 191, 0)',
    }, {
        offset: 1,
        color: 'rgb(48, 191, 191)'
    }])
}, {
    offset: [26, 25],
    symbolSize: 65,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(0, 166, 166, 0)',
    }, {
        offset: 1,
        color: 'rgb(0, 166, 166)'
    }])
}, {
    offset: [75, 75],
    symbolSize: 60,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(84, 136, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(84, 136, 255)'
    }])

}];

var datas = [];
for (var i = 0; i < plantCap.length; i++) {
    var item = plantCap[i];
    var itemToStyle = datalist[i];
    datas.push({
        name: item.value + '\n' + item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
            normal: {
                textStyle: {
                    fontSize: 14
                }
            }
        },
        itemStyle: {
            normal: {
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
            }
        },
    })
}
option = {
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },

    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
    }],

    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'effectScatter',//scatter
        symbol: 'circle',
        symbolSize: 120,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#FFF',
                lineHeight: 15,
                textStyle: {
                    fontSize: '30'
                }
            },
        },
        itemStyle: {
            normal: {
                borderWidth: '1',
                borderType: 'solid',
                borderColor: '#00ffff',
                shadowColor: 'rgba(0, 0, 0, .6)',
                shadowBlur: 10,

            }
        },
        data: datas
    }]

}
    
截图如下