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

全国地图的数据格式：

Echarts地图下钻，省钻到市，市钻到县，县钻到乡相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图，需要的省，市，区县的最新的json数据，geoJson数据，下载地址以及可以手动画区域生成json文件，
echarts需要的市区县的json文件,找了好久,找到了2个地址, 一个自定义区域,可以自己画的, 一个是选择省市区县,会下载的, geoJson和json文件内容一样,后缀可以变更. 可以自定义画 ...
如何让Echarts地图只显示某个省、市、区
这两天重构以前一个项目,里面本来是全国地图,需求说是只显示上海市地图,改完效果如下: 首先你需要获取当前你要的这个地区的地理json文件,这个github上是完整的: 复制了这个json文件后,在你项 ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...

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

Echarts地图下钻，省钻到市，市钻到县，县钻到乡相关推荐

最新文章

热门文章