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

由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现。
先贴两张图,第1张是全国地图:
Echarts地图下钻,省钻到市,市钻到县,县钻到乡_第1张图片
第2张是点击河北后的河北省地图:
Echarts地图下钻,省钻到市,市钻到县,县钻到乡_第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']
                + '
场次:'
+ 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

全国地图的数据格式:
Echarts地图下钻,省钻到市,市钻到县,县钻到乡_第3张图片

你可能感兴趣的:(echarts)