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

这两天重构以前一个项目,里面本来是全国地图,需求说是只显示上海市地图,改完效果如下:
如何让Echarts地图只显示某个省、市、区_第1张图片

首先你需要获取当前你要的这个地区的地理json文件,这个github上是完整的:
如何让Echarts地图只显示某个省、市、区_第2张图片
复制了这个json文件后,在你项目下新建一个js文件,我要的是上海市的,我就新建shanghai.js了,将这个json文件放进去,并且把它赋值给一个变量:
如何让Echarts地图只显示某个省、市、区_第3张图片
然后应用,将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

你可能感兴趣的:(Echarts)