Echarts3实例多环形气泡图

忘是亡心i 2021-09-17 10:00 1140阅读 0赞

### 前言 ###

通过设置多个环形图的半径和位置组合实现气泡图。

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]  
\#\#\#实现代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
            }
            *{
                margin: 0px;
                height: 0px;
            }
            #chartDiv{
                width: 500px;
                height: 245px;
                border: 1px solid red;
            }
        </style>
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
    <div id="chartDiv"></div>
        <script>
            var chartDiv = echarts.init(document.getElementById('chartDiv'));
            var option = {
                title:{
                    text:"多环形气泡图",
                    left:"center"
                },
                series: [
                    {
                        type:'pie',
                        center: ['18%', '27%'],
                        radius: ['35%', '40%'],
                        itemStyle:{
                            color:"#669966"
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: "{b|{b}}\n{b|{c}}万",
                                rich: {
                                    b: {
                                        fontSize:16,
                                        lineHeight: 20,
                                        align: 'center'
                                    },
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                }
                            }
                        },
                        data:[
                            {value:1233, name:'完成投资'},
                        ]
                    },
                    {
                        type:'pie',
                        center: ['50%', '60%'],
                        radius: ['50%', '58%'],
                        itemStyle:{
                            color:"#199ED8"
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: "{b|{b}}\n{b|{c}}万",
                                rich: {
                                    b: {
                                        fontSize:16,
                                        fontWeight:"bold",
                                        lineHeight: 20,
                                        align: 'center'
                                    },
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                }
                            }
                        },
                        data:[
                            {value:4321, name:'计划投资'},
                        ]
                    },
                    {
                        type:'pie',
                        center: ['79%', '31%'],
                        radius: ['38%', '43%'],
                        itemStyle:{
                            color:"#FF9966"
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: "{b|{b}}\n{b|{c}}%",
                                rich: {
                                    b: {
                                        fontSize:14,
                                        lineHeight: 20,
                                        align: 'center'
                                    },
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                }
                            }
                        },
                        data:[
                            {value:(1233/4321*100).toFixed(3), name:'投资完成率'},
                        ]
                    }
                ]
            };
            chartDiv.setOption(option)
        </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/04d91587b2e54c5d9a8e121066d7cbdc.png