ECharts添加地图标点(笔记）

最新推荐文章于 2025-06-06 09:07:54 发布

人生莫如饥荒

最新推荐文章于 2025-06-06 09:07:54 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32953185/article/details/107399473

本文介绍了一个使用ECharts绘制的广西地区医院分布地图，通过加载特定的JS文件和配置地图选项，实现了医院位置的精确标记，并提供了丰富的交互功能，如点击查询具体医院信息。

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

如图：

实例html:

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> -->
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> -->
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="E:\incubator-echarts-4.8.0\map\js\province\guangxi.js"></script>
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
       <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
    "南宁医院":[108.324994,22.810701]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
    }
    console.log(res);
    return res;
};


option = {
    backgroundColor: '#fff',
    title: {
        text: '广西区合作医院分布',
        subtext: 'data from 数字广润',
        sublink: 'http://gxgrtech.com.cn/',
        left: 'center',
        textStyle: {
            color: '#000'
        }
    },
    tooltip: {
        trigger: 'item',
        //formatter: "名称:{a}<br />坐标:{c}"
        formatter:function(params){
            console.log(params);
            console.log(params.data[3]);
            var res = '名称:'+params.data[3]+'<br/>';
            return res;
        }

    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['医院'],
        textStyle: {
            color: '#fff'
        }
    },
    visualMap: {
        min: 0,
        max: 300,
        splitNumber: 5,
        color: ['#d94e5d','#eac736','#50a3ba'],
        textStyle: {
            color: '#fff'
        },
        dimension:3
    },
    geo: {
        map: '广西',
        label: {
            normal: {
                show:true,
                areaColor: '#ffefd5',
                borderColor: '#111',
                textStyle:{color:"#c71585"}
            },
            emphasis: {
                show: false,
                textStyle:{color:"#fff"}
            }
        },
        itemStyle: {
            normal: {
                show:false,
                areaColor: '#ffefd5',
                borderColor: '#009fe8'
            },
            emphasis: {
                show:false,
                areaColor: '#f47920'
            }
        }
    },
    series: [
        {
            name: '医院',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData([
                {name: "南宁医院", value: 9}
            ]),
            encode: {
                value: 2
            },
            symbolSize: 12,
            label: {
                normal: {
                        show: false,//显示市区标签
                        textStyle:{color:"#c71585"}//省份标签字体颜色
                    },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,    //关闭文字 （这东西有问题得关）
                    textStyle:{color:"#800080"}
                }
            },
            itemStyle: {
                normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor:"#ffefd5",//区域颜色
                    },
                emphasis: {
                    show:true,
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor:"#f47920",
                }
            }
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>