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

匿名 (未验证) 提交于 2019-12-03 00:26:01

由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现。
先贴两张图,第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. 三,点击到省之后,没有写返回到全国地图的方法

全国地图的数据格式:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!