秒客网

   //气泡图
    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(); 
   });