echarts地图中城市与省份之间的切换

在使用echarts地图中,可能会用到显示各省份的数据和显示各城市的数据。综合了这两种的配置项,只需传四个参数即可完成对这两种模式的切换。

下面就是配置项代码:

//地图配置
//mapData:图表所需数据;mapType:地图模式或散点图模式(即按省份显示数据或按城市显示数据)
//minValue:视觉映射组件最小值;maxValue:视觉映射最大值
function _setMap(mapData, mapType, minValue, maxValue) {
    var option = {};
    return option = {
        tooltip: {
            trigger: ‘item‘,
            formatter: function (params) {
                return params.name;//自行定义formatter格式
            }
        },
        visualMap: {
            min: minValue || 0,//视觉映射组件的最小值
            max: maxValue || 200,//视觉映射组件的最大值
            calculable: true,
            inRange: {
                color: [‘#50a3ba‘, ‘#eac736‘, ‘#d94e5d‘]
            },
            textStyle: {
                color: ‘#666‘
            },
            left: ‘left‘,
            top: ‘bottom‘,
            text: [‘高‘, ‘低‘],           // 文本,默认为数值文本

        },
        geo: {
            map: ‘china‘,
            label: {
                emphasis: {
                    show: false //城市模式下,鼠标移上去不显示省份名称
                }
            },
            itemStyle: {
                normal: {
                    areaColor: ‘#eeeeee‘,
                    borderColor: ‘#111‘
                },
                emphasis: {
                    areaColor: ‘#00a695‘,
                }
            }
        },
        series: [
            {
                type: mapType,  //mapType可选"scatter"或"map",即选择散点图模式或地图模式(显示省份数据为地图模式,显示城市为散点模式)
                mapType: ‘china‘,
                coordinateSystem: ‘geo‘,
                symbolSize: 14,
                label: {
                    normal: {
                        formatter: ‘{b}‘,   //城市模式下在地图上显示该城市名称
                        textStyle: {
                            color: ‘#000‘
                        },
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: mapData //当为地图模式即显示省份数据时,数据格式为: [{name: ‘山东‘,value: 183 }, {name: ‘云南‘,value: 286 }]
                //当为散点模式即显示城市数据时,数据格式为: [{name:"厦门",value:[118.1,24.46,183]},{name:"武汉",value:[114.31,30.52,199]}]
                //散点模式value代表的含义[经度,纬度,人数]
            }
        ]
    }
}

例如,当显示省份数据时,如下如:

当显示城市时,如下:

时间: 2024-12-19 16:06:12

echarts地图中城市与省份之间的切换的相关文章

ios7中 丰富多彩的UIViewController之间的切换

转载自:http://onevcat.com/2013/10/vc-transition-in-ios7/ 毫无疑问,ViewController(在本文中简写为VC)是使用MVC构建Cocoa或者CocoaTouch程序时最重要的一个类,我们的日常工作中一般来说最花费时间和精力的也是在为VC部分编写代码.苹果产品是注重用户体验的,而对细节进行琢磨也是苹果对于开发者一直以来的要求和希望.在用户体验中,VC之间的关系,比如不同VC之间迁移和转换动画效果一直是一个值得不断推敲的重点.在iOS7中,苹

ubuntu中 不同JDK版本之间的切换

Ubuntu中JDK 的切换前提是同时安装了多个版本,如jdk7和jdk8,若要切换,在终端输入: sudo update-alternatives --config java sudo update-alternatives --config javac

Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可 1 var ecConfig = require('echarts/config'); 2 myChart.on(ecConfig.EVENT.HOVER

百度地图中的标注

使用多个定义好的城市标注,需要用for来循环一下,不然出现的是一个,或者不显示任何的标注 <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(106.234, 38.54), 5); map.addControl(new BMap.NavigationControl()); //

echarts 地图 动态 展示 结合css+js

echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西,比方:通知框.或者其它的东西.我们能够通过css图层的方式在地图之上实现.我实现的效果例如以下: 附上源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&qu

(UWP)通过编写算法实现在地图中的渐变路径

目前的一个App中需要实现这个需求,但是在UWP自带的Bing Map中,绘制的MapPolyline的StrokeColor的类型是Windows.UI.Color,也就是说一条MapPolyline只支持一种颜色,想要实现渐变是根本不可能的--但是我又不想说去拒绝视觉的需求,因为我觉得就算是系统提供的渐变画刷底层肯定也是通过相关的算法实现颜色渐变的,所以只要我们认真研究一下,最终一样可以达到我们想要的需求. 说个题外话,在这次的思路之前我还产生了其他的思路.当时是想在后台代码中实例化一个新的

谈谈地图中的道路绘制

GIS属于可视化领域.一所谓可视化技术是利用计算机图形学和图形处理技术,将数据转化成图形或者图像在屏幕上显示出来,并进行交互处理的理论.方法和技术.个人理解地图中也有几个关键点: 原始数据可以是图像也可以是矢量数据,如我们底图是点.线.面等矢量数据,卫片.街景是图像数据. 渲染即显示到屏幕上,现在各家手机端都是基于opengl,不论图形还是图像最终显示到屏幕都必须像素化(光栅化). 交互性 地图APP中分量最重的就是交互,背后隐藏的巨大的需求. 目前地图中各种Feature数据,楼块是真正三维的

echarts地图中南海诸岛tip提示框显示NaN问题

很显然j数据中没有"南海诸岛"数据项,echarts地图自定义的数据项要和地图的json或js文件中的地区名称匹配: 如下数据中"北京"要和地图的json或js文件中的"北京"相匹配,以确定坐标等信息(不然echarts怎么知道北京是那一块): { name : '北京', value : 0 } 自定义地图数据中没有"南海诸岛"选项,只需: var arryMap = []; var itemsMap = { name :

shp数据转为geojson格式作为ECharts地图扩展文件

项目中进行图表信息展示时采用了Eharts的图表样式,需要用到地图展示方式,但是已有的地图并不能满足项目的个性化需求,采用地图图片的方式既不灵活,也不美观.ECharts地图扩展文件使用geoJson格式,制作方式有很多种,我选择通过shp数据转换为geojson格式,因为可以通过ArcMap制作自己个性化的shp数据,也就能灵活得到满足项目需求的geojson数据,制作方式如下: 1.制作shp数据.地理信息行业的人员都对ArcGis和shp格式的数据编辑比较了解,也不是简单能说清楚的,不再详