echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解

Ming-Afresh

已于 2023-03-22 14:46:05 修改

阅读量3k

点赞数 1

分类专栏： # 数据可视化文章标签： echarts javascript ecmascript

于 2023-01-05 16:35:08 首次发布

本文链接：https://blog.csdn.net/start_simple/article/details/128565396

版权

文章详细介绍了如何使用Echarts创建地图组合散点图，包括如何自定义提示框内容和地图区块信息，以及散点图的点击事件处理。通过示例代码展示了如何利用formatter函数格式化鼠标悬浮时的信息，同时提到了柱状图的点击事件处理和信息显示方法。

摘要由CSDN通过智能技术生成

1、实例

在这里插入图片描述
这次我拿echarts中地图组合散点图的实例

！！！实现效果：滑到散点显示不同于地图块的信息及 formatter 提示窗自定义！！！

这个显示项目名称为"文昌小学校节能项目" ，地图块为"阿城区" 防止重复触发代码：【重点是silent: true】

var mapInit = () =>$.get(mapname,function(yCjson){
   
        echarts.registerMap('haerbin', yCjson, {
   });
        var option = {
    // echarts 配置
            tooltip: {
   
                trigger: 'item',
                //   提示框
                formatter:function(params){
   
                    let text = params.name + 
                            "<br>位置信息：" + params.value 
                    return text
                },
            },
            geo: {
    // 地图配置
                show: true,
                map: 'haerbin', 
                label: {
   
                    normal: {
   
                        show: false
                    },
                    emphasis: {
   
                        show: false
                    }
                },
                roam: false,
                itemStyle: {
   
                    normal: {
   
                        borderColor: '#2AB8FF',   // 边
                        borderWidth: 1.5,
                        areaColor: '#12235c'    // 里
                    },
                    emphasis: {
   
                        areaColor: '#2AB8FF',
                        borderWidth: 0,
                    }
                },
                zoom: 1.2,
                silent: true,                  //  遮罩一层 ！！！
            },
            series: [ {
    // 散点配置
                name: '项目坐标',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: geoCoordMap,
                symbolSize: 15,   // 点的大小
                showEffectOn: 'emphasis',   // 特效渲染前提设置
                rippleEffect: {
   
                    brushType: 'stroke'    // 特效波纹渲染
                },
                hoverAnimation: true,
                label: {
   
                    normal: {
   
                        formatter: '{b}',    // 右侧文字
                        position: 'right',
                        show: fal