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

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

首先你需要获取当前你要的这个地区的地理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

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
echarts 是一个用于数据可视化的开源图表库,可用于显示各个份的各个城。使用 echarts 可以很方便地展示各个城的相关数据。 要显示某个的各个城,首先要准备好数据。可以通过数据库查询或者其他方式获取到各个城的相关数据,比如人口数量、GDP、旅游收入等等。将这些数据整理成符合 echarts 要求的格式。 在 HTML 页面中引入 echarts 的库文件,并创建一个容器元素来放置图表。然后,通过 JavaScript 代码启动 echarts,并设置一些基本配置,如图表类型、标题、图例等。 接着,将从数据库或其他数据源中获取到的城数据与 echarts 的配置结合起来。这个过程中,需要将城名称和对应的数据进行绑定,并根据数据的大小来确定图表的颜色、图形大小等样式。 最后,调用 echarts 的绘图方法,在之前创建的容器元素中生成相应的图表。这样,就可以在页面上显示出某个的各个城了。 需要注意的是,为了更好地展示城数据,可以根据具体需求选择合适的图表类型。例如,可以使用柱状图来比较各个城的数据差异,也可以使用地图来展示城的地理位置和分布情况。 通过以上的步骤,就可以使用 echarts显示某个的各个城了。同时,echarts 还提供了诸多丰富的图表样式和交互功能,可以根据需求进行定制,让页面更加美观和易于交互。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值