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

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

猜你喜欢

转载自blog.csdn.net/bc_aptx4869/article/details/80667940