Echarts 实现label富文本

最新推荐文章于 2025-07-15 18:04:12 发布

Crazy高

最新推荐文章于 2025-07-15 18:04:12 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html web前端 js jQuery

本文链接：https://blog.youkuaiyun.com/fancky58/article/details/81813135

web前端同时被 3 个专栏收录

7 篇文章

订阅专栏

html

4 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了如何使用 Geo Scatter 类型图表来展示带有地理坐标的气泡图，包括气泡图的样式配置、动画效果设置、标签显示方式及数据绑定等关键特性。通过对示例代码的解析，帮助读者理解如何定制化的呈现地理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
                        name: '气泡1',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'rect',
                        symbolSize: [80, 20],
                        symbolOffset: [0, '-100%'],
                        zlevel: 6,
                        animation: true,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 9,
                                }, 
                                formatter: function(params) {
                                    return '{a|' + params.value[2] + '}' + '/ {b|50} / {x|80}';
                                },
                                rich: {
                                    a: {color: '#000'},
                                    b: {color: 'red'},
                                    x: {
                                        color: 'green'
                                    }
                                }

                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff', //标志颜色
                                borderWidth: 1,
                                borderColor: '#333'
                            }
                        },
                        tooltip: {
                            position: 'bottom',
                            formatter: function(params) {
                                var toolTiphtml = '';
                                //打印log查看params的对象属性
                                toolTiphtml += params.name + ": <br>" + params.value[2];
                                toolTiphtml += '(数量/个)';
                                return toolTiphtml;
                            },
                            backgroundColor: '#F08080',
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        data: convertData1(data1)
                    }

这里写图片描述