使用echarts完成气泡图的绘制

    // 生成气泡图
    function bubbleCharts(){
        var data = dataBubbleCharts

        var format = ['label','amount','percent']
        
        $("#bubbleCharts").parent().empty().append('<div id="bubbleCharts" style="width: 100%; height: 100%">');
        var projectScaleDom = document.getElementById('bubbleCharts');
        var myChart = echarts.init(projectScaleDom);

        let [maxValue, temp] = [0, []]
        data.forEach(item => {
            temp.push(item[format[1]])
        })
        maxValue = Math.max.apply(null, temp)

        // 气泡颜色数组
        let color = [ '#deebf7','#7dc7d9','#aae8d2','#f3f6bc' ]
        // 气泡颜色备份
        let bakeColor = [...color]
        // 气泡数据
        let bubbleData  = []
        // 气泡基础大小
        let basicSize = getEchartsFontSize(90)
        // 节点之间的斥力因子,值越大,气泡间距越大
        let repulsion = getEchartsFontSize(100)
        // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
        if (data.length >= 5 && data.length < 10) {
            basicSize = getEchartsFontSize(120)
            repulsion = getEchartsFontSize(230)
        }
        if (data.length >= 10 && data.length < 20) {
            basicSize = getEchartsFontSize(100)
            repulsion = getEchartsFontSize(130)
        } else if (data.length >= 20) {
            basicSize = getEchartsFontSize(80)
            repulsion = getEchartsFontSize(90)
        }

        // 填充气泡数据数组bubbleData
        for (let item of data) {
            var curColor = ''
            // 根据占比来赋予气泡颜色
            if(item.percent>=0 && item.percent<=25){
                curColor = bakeColor[0]
            }else if(item.percent>25 && item.percent<=50){
                curColor = bakeColor[1]
            }else if(item.percent>50 && item.percent<=75){
                curColor = bakeColor[2]
            }else if(item.percent>75 && item.percent<=100){
                curColor = bakeColor[3]
            }

            // 气泡大小设置
            let size = (item[format[1]] * basicSize * 2) / maxValue
            if (size < basicSize) size = basicSize

            bubbleData.push({
                "name": item[format[0]],
                "value": item[format[1]],
                'percent': item[format[2]],
                "symbolSize": size,
                "draggable": true,
                "itemStyle": {
                    "normal": {
                        "color": curColor,
                        'borderColor': '#6694b4', // 设置气泡边缘线颜色
                        'borderWidth': 1,
                    }
                }
            })
        }

        var option = {
            backgroundColor: '#fff',
            animationEasingUpdate: 'bounceIn',
            grid: {
                left:'10%',
                containLabel: true, // 这个属性可以确保图表内容不会溢出画布
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params){ 
                    return params.name+"</br>个数: "+ params.value +'个</br>占比：' +params.data.percent+"%";
                },  
                textStyle: {  // 提示文字的样式
                    color: '#fff',
                    fontSize: getEchartsFontSize(16)
                }
            },
            legend: {
                orient: 'vertical',
                bottom:'0',
                right: '10',
                textStyle: {
                    fontSize: getEchartsFontSize(16)
                },
                data:['0-25%','26%-50%','51%-75%','76%-100%'],
                color: [ '#deebf7','#7dc7d9','#aae8d2','#f3f6bc' ]
            },
            series: [{
                type: 'graph',
                layout: 'force',
                label: {
                    show: true,
                    color: '#333', // 设置气泡上文字的颜色
                },
                // 是否使用张力
                force: {
                    repulsion: repulsion,
                    edgeLength: getEchartsFontSize(10)
                },
                categories:[
                    {name: '0-25%', itemStyle: { color:'#deebf7' } },
                    {name: '26%-50%',itemStyle: { color:'#7dc7d9' } },
                    {name: '51%-75%',itemStyle: { color:'#aae8d2' } },
                    {name: '76%-100%',itemStyle: {  color:'#f3f6bc' }},
                ],
                // 是否开启鼠标缩放和平移漫游
                roam: false,
                data: bubbleData,
                emphasis: {
                    
                    symbolSize: 15, // 设置节点高亮时的大小为 20
                }
            }]
        }
        
        option && myChart.setOption(option)

        // 监听点击气泡
        myChart.on('click', function (params) {
            if (params.dataType === 'node') {
                ...
            }
        });

        // 监听 legend 点击事件
        // myChart.on('legendselectchanged', function (params) {
        //     const selected = params.selected;
        //     // const selectedNodes = nodes.filter(node => selected[node.name]);

        //     for(var i in selected){
        //         if(!selected[i]){
        //             console.log(i,'i')
        //         }
        //     }
        // });
          
    }

数据结构在以下:

需要注意的是，数据中不能有相同label的内容，否则渲染的时候就会报错

// 需要注意的是，数据中不能有相同label的内容，否则渲染的时候就会报错
var dataBubbleCharts  = [
    {label: '苹果', amount: 100, percent:80},
    {label: '香蕉', amount: 70, percent:40},
    {label: '梨', amount: 30, percent:80},
    {label: '橘子', amount: 50, percent:19},
]

效果图如下：

张力越大，泡泡之间缝隙就越大