Echarts地图下钻,省钻到市,市钻到县,县钻到乡

由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现。
先贴两张图,第1张是全国地图:
这里写图片描述
第2张是点击河北后的河北省地图:
这里写图片描述

步骤详解:

1. 引入js

  const echarts = require('echarts');
  require('../../../static/js/china.js');
  require('../../../static/js/all-province.js');

2. 编写初始化全国地图的option

        let _this = this;
        let myChart = echarts.init(document.getElementById('echartContainer'));
        let option = {
          title: {
            text: '演出地场次统计-全国',
            left: 'left'
          },
          tooltip: {
            formatter: function (a, b, c) {
              return ('省份:' + a['name']
                + '</br>场次:' + a['value']);
            }
          },
          toolbox: {
            right: 50,
            show: true,
            feature: {
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          visualMap: {
            min: 0,
            max: _this.maxValue,
            left: 'left',
            top: 'bottom',
            text: ['多', '少'],
            calculable: true,
            colorLightness: [0.2, 100],
            color: ['#c73737', '#e5cf0d', '#4f6cb0'],
            dimension: 0
          },
          series: [
            {
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: _this.oneData
            }
          ]
        };
        var Province = "";
        myChart.on('click', function (params){
          if(!this.isProvince){
              this.isProvince = true;
              var myChart= echarts.init(document.getElementById('echartContainer'));
              Province = params.name;
              option = {
                tooltip: {
                  trigger: 'item',
                  formatter: '{b}'
                },
                series: [
                  {
                    name: '中国',
                    type: 'map',
                    mapType: Province,
                    selectedMode : 'single',
                    layoutCenter: ['50%', '50%'],//距左百分比,距上百分比
                    layoutSize: 600,//省份地图大小为600xp。
                    label: {
                      normal: {
                        show: true
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    data:[
                    ]
                  }
                ]
              };
              myChart.setOption(option);
          }
        });
        myChart.setOption(option);

注意事项:
1. 一,全国地图的数据格式,会在下方贴出
2. 二,点击后某省的数据格式由于经费问题还没有做
3. 三,点击到省之后,没有写返回到全国地图的方法
4. 四,需要的两个js文件,其中的china.js文件官网就有,另外的all-province.js,我已上传到csdn,其下载地址为:https://download.csdn.net/download/bc_aptx4869/10474608

全国地图的数据格式:
这里写图片描述

### 回答1: Echarts是由百度开发的一个优秀的数据可视化库,它可以轻松实现各种类型的图表展示,包括地图。而地图的下功能则是指在地图上可以通过点击某个区域,进一步展示该区域的子区域信息,以实现级地图的展示。 要实现echarts地图的功能,首先需要准备好相关的地理数据,包括国家、份、城级等层级的地图数据。Echarts官方提供了区的地图数据,也可以通过一些第三方的数据源获取更详细的级地图数据。 在echarts的配置选项中,需要设置地图的层级和初始地图的显示区域,可以通过设置`geo`属性来实现。当用户点击某个区域时,可以通过监听地图的`click`事件来获取点击的区域信息。接下来,可以通过判断点击的区域层级,并通过调用`setOption`方法重新配置地图数据,切换到对应的子区域地图。 具体来说,可以在点击事件中使用`echarts.getInstanceByDom`方法获取到当前地图实例,然后根据点击的区域信息的特征码,去调用`getOption`方法获取当前地图的配置选项。然后,通过修改配置选项中的`series`中的`data`数组,更新地图数据,并调用`setOption`方法重新渲染地图。 总结来说,要实现echarts地图级的功能,需要准备好相应的地图数据,配置地图的初始显示,并在地图的点击事件中获取点击的区域信息,然后根据区域信息切换到对应的子区域地图。这样通过灵活运用echarts的配置选项和API,就可以实现地图的下功能。 ### 回答2: ECharts是一个功能强大的可视化图表库,提供了丰富的图表类型和交互方式。其中,ECharts地图可以通过下操作展示不同层次的地理数据。 在ECharts中实现地图下的操作,需要以下步骤: 第一步是准备好相应的地理数据。ECharts支持 geojson 格式的地理数据,可以通过下载相关的地理数据文件来使用。这些地理数据文件中包含了各个行政区划的边界信息。 第二步是配置地图图表。通过设置地图的type为'map',并指定相关的地理数据文件,即可在ECharts中创建一个基础的地图图表。 第三步是添加点击事件。ECharts提供了series中的itemclick事件来处理点击事件。通过监听这个事件,可以在点击某个区域时做出相应的处理。在点击事件的回调函数中,可以根据点击的区域获取其对应的行政区划代码,然后根据这个代码加载下一级别的地理数据。 第四步是更新地图数据。通过调用setOption方法,可以动态更新地图的数据。在点击事件中,可以根据下一级别的地理数据更新地图的series数据,从而实现地图的下效果。 通过以上步骤,就可以实现ECharts地图的功能。用户点击地图上的某个区域时,地图会根据点击的区域加载下一级别的地理数据,并更新地图显示的内容。这样,用户就可以逐级下到具体的级行政区划,实现更加详细的地理数据展示。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值