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

最新推荐文章于 2024-08-05 05:00:00 发布

慢半拍、

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.3w

点赞数 5

分类专栏： Echarts

本文链接：https://blog.csdn.net/huanhuan03/article/details/105504450

版权

Echarts 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

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

首先你需要获取当前你要的这个地区的地理json文件，这个github上是完整的：
在这里插入图片描述
复制了这个json文件后，在你项目下新建一个js文件，我要的是上海市的，我就新建shanghai.js了，将这个json文件放进去，并且把它赋值给一个变量：

然后应用，将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