如何让Echarts地图只显示某个省、市、区

柔光的暖阳◎ 2023-07-25 09:22 32阅读 0赞

这两天重构以前一个项目，里面本来是全国地图，需求说是只显示上海市地图，改完效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

首先你需要获取当前你要的这个地区的地理json文件，这个[github上是完整的][github]：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
复制了这个json文件后，在你项目下新建一个js文件，我要的是上海市的，我就新建shanghai.js了，将这个json文件放进去，并且把它赋值给一个变量：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
然后应用，将echarts.js和这个刚刚新建的shanghai.js依次引入你的页面，然后代码：

echarts.registerMap('shanghai', shanghaiJson);     //shanghaiJson名称取自shanghai.js里的var  shanghaiJson变量名
    var mapChart = echarts.init(document.getElementById('mapChart'));
    option = {
        tooltip: {
            trigger: 'item',
        },
        title: {
            text: 'xxxxxx(上海市)',
            x: "center",
        },
        geo: {
            map: 'shanghai',
            label: {
            },
            roam: true,
            itemStyle: {
                
            }
        },
        series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize: function (val,params) {
                return 8;
            },
            data:  ,
        }]
    };
    mapChart.setOption(option);

可以看看这两篇：  
https://www.jianshu.com/p/4a55f5f11cf4?tdsourcetag=s\_pctim\_aiomsg  
https://zhidao.baidu.com/question/1116817580279777499.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230528/1b819df4d7f64ee3a288c371f8c7f93c.png
[github]: https://github.com/longwosion/geojson-map-china
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: /images/20230528/8eabaaef96544e6fa2c2a77f780ab18f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: /images/20230528/a08d5ac6e7fd43a797ae866c23193bc3.png