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(); 
   });