使用echarts将中国各个省的数据以气泡的形式显示

落日映苍穹つ 2021-12-11 05:09 495阅读 0赞

**参考代码网址为：[https://gallery.echartsjs.com/editor.html?c=xBJDR584vG][https_gallery.echartsjs.com_editor.html_c_xBJDR584vG]**

**效果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

**但是3.x以上版本本的echarts会遇到一个问题，就是气泡上显示的不是数据信息，而是维度信息，这时需要修改部分代码，修改的代码如下（已标红处理）：**

**\{  
                            name: '点',  
                            type: 'scatter',  
                            coordinateSystem: 'geo',  
                            symbol: 'pin', //气泡  
                            symbolSize: function(val) \{  
                                var a = (maxSize4Pin - minSize4Pin) / (max - min);  
                                var b = minSize4Pin - a \* min;  
                                b = maxSize4Pin - a \* max;  
                                return a \* val\[2\] + b;  
                            \},  
                            label: \{  
                                normal: \{  
                                    show: true,  
                                    textStyle: \{  
                                        color: '\#fff',  
                                        fontSize: 9,  
                                    \},  
                                    formatter:function(params)\{   
                                        console.log(params) // return params   
                                        return params.value\[2\];   
                                    \},  
                                \}  
                            \},  
                            tooltip: \{   
                                trigger: 'item',   
                                formatter: function (params) \{   
                                    return params.name + ' : ' + params.value\[2\];   
                                \},  
                            \},   
                            itemStyle: \{  
                                normal: \{  
                                    color: '\#F62157', //标志颜色  
                                \}  
                            \},  
                            zlevel: 6,  
                            data:convertData(list),//geoCoordMap  
                        \},**

[https_gallery.echartsjs.com_editor.html_c_xBJDR584vG]: https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20211211/8a2b74bc11a445a4a4187cb22d04d599.png