echart 完成气泡图效果

   //气泡图
    var myChart_qipao = echarts.init(document.getElementById('_scatter_'));
     //暂时的假数据
    var data = [
        [[50,200,50,'自动化运维',1],[150,643,100,'自动化运维',1],[200,843,100,'自动化运维',1]],
        [[135,500,100,'自动化运维',2],[165,600,150,'自动化运维',2],[30,140,100,'自动化运维',2]],
        [[80,440,150,'自动化运维',3],[204,80,150,'自动化运维',3],[103,100,120,'自动化运维',3]]
    ];
//气泡图的配置项
    option_qipao = {
    // backgroundColor: 
    title: {
        text: ''xxxx“
    },
    legend: {
        show:false,
        right: 10,
        data: ['1', '2','3']
    },
    xAxis: {
        show:false,
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    yAxis: {
        show:false,
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        scale: true
    },
    series: [{
        name: '1',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
            return data[2]
        },
        label: {
            show:true,
            color:"#FFF",
            fontSize:20,
            formatter: function (param) {
                    return param.data[3];
                },
        },
        itemStyle: {
            normal: {
                shadowBlur: 5,
            
                shadowOffsetY: 5,
                        这里的东西实现了一个echart对象径向渐变
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                    offset: 0,
                    color: 'rgb(255, 255, 255,.5)'
                }, {
                    offset: 1,
                    color: 'rgb(251, 94, 0)'
                }])
            }
        }
    }, {
        name: '2',
        data: data[1],
        type: 'scatter',
        symbolSize: function (data) {
            return data[2]
        },
        label: {
            show:true,
            color:"#FFF",
            fontSize:20,
            formatter: function (param) {
                    return param.data[3];
                },
        },
        itemStyle: {
            normal: {
                shadowBlur: 5,
            
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                    offset: 0,
                    color: 'rgb(255, 255, 255,.5)'
                }, {
                    offset: 1,
                    color: 'rgb(122, 207, 130)'
                }])
            }
        }
    },
    {
        name: '3',
        data: data[2],
        type: 'scatter',
        symbolSize: function (data) {
            return data[2]
        },
        label: {
            show:true,
            color:"#FFF",
            fontSize:20,
            formatter: function (param) {
                    return param.data[3];
                },
        },
        itemStyle: {
            normal: {
                shadowBlur: 5,
            
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                    offset: 0,
                    color: 'rgb(255, 255, 255,.5)'
                }, {
                    offset: 1,
                    color: 'rgb(245, 246, 2)'
                }])
            }
        }
    }
    ]
};
    myChart_qipao.setOption(option_qipao);
    myChart_qipao.resize(); 
    window.addEventListener("resize", function(){
       myChart_qipao.resize(); 
   });

转载于:https://www.cnblogs.com/aryu/p/10813527.html