数据视化Echarts+百度地图API实现市县区级下钻
开始
  这两天公司有个页⾯需要做数据可视化的展⽰，数据视化采⽤的是Echarts+百度地图API做展⽰，需要⽤到县级区级下钻的⼀个联动效果发现⽹上关于Echarts做到县区级下钻的资料很少，有的话也不是很详细，对于刚接触Echarts的让⼈来说可能有些搞不明⽩，在这⾥我把Echarts下钻开发过程中总结的知识分享给⼤家，也能使⾃⼰加深印象，当然啦，对于⼀些在软件⾏业折腾了⼏年的⽼油条来说，这些都是⼀些⾮常基础的东西。但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的⼈。如果哪⾥写的不对，或者有更好的⽅法，也欢迎⼤家吐槽留⾔，互相学习。
进⼊正题
第⼀步
加载中国地图都准备好了后再函数⾥定义⼀个option来设置中国地图的样式如下：
1      function (ec) {
2// 基于准备好的dom，初始化echarts图表
3var myChart = ec.ElementById('main'));
4var SubordinateMap = ec.ElementById('subordinate'));
5
6                option = {
7                    tooltip : {
8                        trigger: 'item', //提⽰框的触发类型。
9                        formatter: '{b}'//内容格式器可以⽀持异步回调函数。返回⼀个你想要提⽰的字符串就可以了
10                    },
11                    dataRange: { //值域选择
12                        min: 0,
13                        max: 100,
14                        calculable: false,
15                        show: false,
16                        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
17                        textStyle: {  //⽂字颜⾊
18                            color: '#fff'
19                        }
20                    },
21                    series: [  //图表⽣成的数据内容数组
22                        {
23                            name: '中国',
24                            type: 'map',  //图表类型为地图
25                            mapType: 'china',  //地图类型中国地图，
26                            selectedMode: 'single', //选中模式，可以设置多选模式和单选，不能选择则删除删除属性
27                            hoverable: false,  //悬浮是否⾼亮
28                            itemStyle:{
29                                normal: {        //地图样式
30                                    borderColor: '#71D1FF', //地图边界颜⾊
31                                    color: '#070C67'//地图颜⾊
32                                },
33                                emphasis: {  //地图选中时样式
34                                    label: {
35                                        show: true,
36                                        textStyle: {
37                                            color: '#fff'//选中时区域名字颜⾊
38                                        },
39                                    },
40                                    color: '#71D1FF'//选中时颜⾊
41                                }
42                            },
43                            data:[
44                                {name:'⼴东',selected:true}  //⼴东默认别选中
45                            ],
46                            geoCoord: {  //每个城市对应的经纬度
47'上海': [121.4648,31.2891] }
这个是全国地图，最后在使⽤setOption（）⽅法加载地图：
1 myChart.setOption(option, true);
第⼆步通过on事件实现省级下钻
添加⼀个省级对象(类似第⼀步的option)设置样式数据等，Echarts2.2.7这⾥不需要下载省级地图，直接通过Data设置数据读取就可以了：
1//省级
2                provinceO = {
3                    title: { //标题
4                        text: '全国34个省市⾃治区',
5                        subtext: '省级'
6                    },
7                    tooltip: {
8                        trigger: 'item'//提⽰框的触发类型。
9                    },
10                    legend: {  //图列
11                        orient: 'vertical', //图列显⽰的⽅式
12                        x: 'right',
13                        data: ['随机数据']
14                    },
15                    series: [
16                        {
17                            name: '随机数据',
18                            type: 'map',
19                            mapType: '湖南',  //要显⽰的省份，下钻就是通过on事件来更改属性
20                            selectedMode: 'single', //选中模式，可以设置多选模式和单选，不能选择则删除删除属性
21                            itemStyle: {
22                                normal: {
23                                    label: { show: true }, //是否显⽰城市名字
24                                    borderColor: '#71D1FF',  //地图边界颜⾊
25                                    color: '#070C67'
26                                },
27                                emphasis: { label: { show: true } } //选中后样式
28
29                            },
30                            data: [
31                                { name: '重庆市', value: und(Math.random() * 1000) }}//类似数据省略
通过on来更改series下的mapType属性，然后通过setOption⽅法来给第⼆个DIV加载地图（当然也可以直接给第⼀个DIV重新加载），这样就实现下钻到省的联动效果了；1var ecConfig = require('echarts/config');
2                (ecConfig.EVENT.MAP_SELECTED, function (param) {
3var name = param.target;//获得选中的城市
4                    provinceO.series[0].mapType = name;//设置series的mapType属性为当前选中的城市
5                    SubordinateMap.setOption(provinceO, true);//给SubordinateMapDIV重现加载地图
6
7                });
第三步通实现市级下钻效果
通过⼀个数组绑定每个城市对应的⽂件名：
1var cityMap = {
2"北京市": "110100", //每个城市对应的json⽂件名
3"天津市": "120100",
4"上海市": "310100",
5"重庆市": "500100"}//重复数据省略
通过循环引⼊地图数据：
1        var mapType = [];
2var mapGeoData = require('echarts/util/mapData/params');
3//console.log(mapGeoData)
4for (var city in cityMap) { //通过循环来引⼊数据
5                    mapType.push(city);
6// ⾃定义扩展图表类型
7                    mapGeoData.params[city] = {
8                        getGeoJson: (function (c) {
9var geoJsonName = cityMap[c]; //通过cityMap数组得到JSON⽂件名
10return function (callback) {
11                                $.getJSON('geoJson/' + geoJsonName + '.json', callback);  //得到地图JSON⽂件数据，⾸先你本地路径下得有这个JSON⽂件
12                            }
13                        })(city)
14                    }
15                }
添加⼀个市级对象设置样式数据，跟上⾯不同的是这⾥需要地图数据，因为Echarts没有带市级地图，需要⾃⼰去⽹上地图数据：
1//市级
2                cityO = {
3                    title: { //标题
4                        text: '全国344个主要城市'
5                    },
6                    tooltip: {
7                        trigger: 'item',  //提⽰框的触发类型。
8                        formatter: '{b}'//内容格式器可以⽀持异步回调函数。返回⼀个你想要提⽰的字符串就可以了
9                    },
10                    series: [  //图表⽣成的数据内容数组
11                        {
12                            name: '全国344个主要城市（县）地图',
13                            type: 'map',  //类型为地图，
14                            mapType: '北京市', //要显⽰的市，下钻就是通过on事件来更改属性
15                            selectedMode: 'single',//选中模式，可以设置多选模式和单选，不能选择则删除删除属性
16                            itemStyle: {
17                                normal: {
18                                    label: { show: true }, //是否显⽰城市名字
19                                    borderColor: '#71D1FF',  //地图边界颜⾊
20                                    color:'#070C67'
21                                },
22                                emphasis: { label: { show: true } } //选中后的样式
23                            },
24                            data: []
25                        }
26                    ]
27                };
然后通过on来更改series下的mapType属性，在通过setOption⽅法来给第⼆个DIV重新加载地图就实现下钻到市级了。
1    (ecConfig.EVENT.MAP_SELECTED, function (param) {
2var name = param.target;//获得选中的城市
3                    cityO.series[0].mapType = name;//设置series的mapType属性为当前选中的城市
4                    SubordinateMap.setOption(cityO, true);//给SubordinateMapDIV重现加载地图
5                });
如果你还需要下钻到更⼩范围⽐如区级，那就只能跟百度地图API结合了，PS：当然也可以⽤Ehcarts⾃定义地图实现但是每个县的区级地图JSON数据⽹上也没有，
并且Echarts⽣成也只能⽣成到县。
如何下钻到县区级：
实现效果：点击某个市的县后，在到百度地图上框出边界线，设置缩放级别调整视⾓。（如果想要更好的效果也可以把边除了框出来的城市外其他的城市不显⽰）
引⼊百度地图API，在页⾯上添加⼀个DIV来加载百度地图，然后初始化百度地图：
1    function (echarts, BMapExtension) {
2var BMapExt = new BMapExtension($('#main')[0], BMap, echarts, {
3                    enableMapClick: false
4                });
5                map = Map();
6var container = EchartsContainer();
7
8var startPoint = { //经纬度
9                    x: 104.114129,
10                    y: 37.550339
11                };
12var point = new BMap.Point(startPoint.x, startPoint.y);
13                AndZoom(point, 5); //根据经纬度调整视⾓
14                ableScrollWheelZoom(true); //开启滚轮缩放
15// 地图⾃定义样式
16                map.setMapStyle({
17                    styleJson: [
18                          {
19"featureType": "background",
20"elementType": "all",
21"stylers": {
22"color": "#444444"
23                              }
24                          }
通过Echarts加载的市级地图的on事件触发百度地图设置函数：
1        　var myChart = echarts.ElementById('main'));
2var ecConfig = require('echarts/config');
3                (ecConfig.EVENT.MAP_SELECTED, function (param) {
4                        getBoundary(param.target);
5                });
由于没个城市的⼤⼩，形状都不⼀样，在DIV⾥⾯显⽰的效果就不⼀样，有⼤的城市没有显⽰全，有些⼩的⼜放的太⼩了，并且视⾓也不是最佳视⾓，所以我这了定义的⼀个数
组⽤来存放每个下钻城市
的视⾓位置，已经缩放级别，这样就跟根据⾃⼰设置的DIV⼤⼩来调整地图的⼤⼩了。
1//定义⼀个数组来存放每个城市的视⾓位置，和放⼤级别
2var PositionData = [{ name: '济宁市', long: 116.782471, lat: 35.226815, zoom: 10 }, { name: '新乡市', long: 114.172514, lat: 35.216547, zoom: 10 }, { name: '⽢孜藏族⾃治州', long: 99.935306, lat: 31.093953, zoom:  3        function getBoundary(city) {
4var ply;
5var bdary = new BMap.Boundary();
6            (city, function (rs) {      //获取⾏政区域
7//map.clearOverlays();        //清除地图覆盖物
8var count = rs.boundaries.length; //⾏政区域的点有多少个
9for (var i = 0; i < count; i++) {
10                    ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#ffff00", fillCo
lor: "none" }); //建⽴多边形覆盖物
11                    map.addOverlay(ply);  //添加覆盖物，这⾥要⽤到初始化时的map ，setoption
12//map.Path());    //调整视野
13                }
14for (var i = 0; i < PositionData.length; i++)
15                {
16if (PositionData[i].name == city) {
17//通过经纬度指定视野的中⼼位置，以及放⼤级别
18                        AndZoom(new BMap.Point(PositionData[i].long, PositionData[i].lat), PositionData[i].zoom);
19break;
20                    }
21else {
22if (i == PositionData.length - 1) {
23//如果数组⾥没有该城市视⾓数据和放⼤级别数据时就设置默认的视⾓位置和放⼤级别
24                            AndZoom(city, 10);
25                        }
26                    }
27                }
28            });
29        }
最后
如果想实现下钻到区级，原理⼀样，这⾥就不讲了，需要源码或地图数据的，可以联系我，如果有什么更好的⽅法，欢迎吐槽留⾔。当然你也可以请我喝杯咖啡（学的，不发个⼆维码都没啥期待，哈哈哈）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。