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

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

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值