• echarts中国地图配置部分

    发布时间:2020-02-24 11:42:08
    作者:ynkulusi
  • 中国地图option配置部分
    var option_chmap = {
    	"title": [
    		{
    			"text": "中国肺炎疫情地图",
    			"subtext": "ynkulusi.com",
    			"left": "center",
    			"top": "8%",
    			"textStyle": {
    				"color": "#555555",
    				"fontSize": 18
    			},
    			"subtextStyle": {
    				"fontSize": 12,
    				"color": "#000"
    			}
    		}
    	],
    	"toolbox": {
    		"show": true,
    		"orient": "vertical",
    		"left": "center",
    		"top": "center",
    		"feature": {
    			"saveAsImage": {
    				"show": true,
    				"title": "save as image"
    			},
    			"restore": {
    				"show": true,
    				"title": "restore"
    			},
    			"dataView": {
    				"show": true,
    				"title": "data view"
    			}
    		}
    	},
    	
    	"tooltip": {
    		"trigger": "item",
    		"triggerOn": "mousemove",
    		"color": "white",
    		"axisPointer": {
    			"type": "line"
    		},
    		"textStyle": {
    			"fontSize": 14
    		},
    		"backgroundColor": "rgba(50,50,50,0.7)",
    		"borderColor": "#333",
    		"borderWidth": 0
    	},
    	"series": [
    		{
    			"name": param_mapdata.mapname,  //'现存确诊数',
    			"mapType": 'china', //显示地图区域
    			"zoom": 1.25,  //地图放大倍数
    			"selectedMode": false, //single,multiple;false鼠标点击移开后不会一直保持选中颜色
    
    			itemStyle: {
    				normal: {//未选中状态
    					borderWidth: 1,//边框大小
    					borderColor: 'grey',
    					areaColor: '#F0F0F0',//背景颜色
    					label: {
    						show: true,  //显示名称
    					}
    				},
    				emphasis: { //也是选中样式,做了下级地图展示,取消选择效果
    					borderWidth: 1,
    					borderColor: 'dimgrey',
    					areaColor: 'white',  //鼠标覆盖颜色,默认白色
    					//opacity: 0.5,
    					label: {
    						show: true,
    						textStyle: {
    							color: '#8800AA'
    						}
    					}
    				}
    			},
    
    			"type": "map",
    			"symbol": "circle",     //标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    									//可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
    									//可以通过 'path://' 将图标设置为任意的矢量路径。
    			"label": {  //地图上显示省份名称标签
    				"normal": {
    					"show": true,
    					"position": "center",
    					//"formatter": "{b}\n{c}",  //配置显示标签
    					"textStyle": {
    						"fontSize": 12
    					}
    				},
    				"emphasis": {  //鼠标悬浮效果
    					"show": false,
    					"textStyle": {
    						"fontSize": 12
    					}
    				}
    			},
    			//"data": {{ mapdata.now_confirm|tojson }},
    			"data": param_mapdata,
    			"roam": false,  //是否开启鼠标缩放和平移漫游;默认为 True,为True时,地图可以拖动和缩放;如果只想要开启缩放或者平移,可以设置成'scale'或者'move'
    			"showLegendSymbol": false,  //是否显示地图标记红点,默认为 True.
    		}
    	],
    	"legend": [
    		{
    			"data": [
    				""
    			],
    			"selectedMode": "multiple",  //图例选中模式,点击图例更改地图显示样式,可以为True或者False
    			"show": true,
    			//"left": "center",
    			//"top": "top",
    			"orient": "horizontal",
    			"textStyle": {
    				"fontSize": 12
    			}
    		}
    	],
    	"dataRange": {
    		show: true,  //显示或隐藏
    		orient: "vertical",  //默认'vertical'垂直,'horizontal'水平图例组件条的方向
    		padding: 5,
    		//图例每项之间的间隔。默认间隔为 10,横向布局时为水平间隔,纵向布局时为纵向间隔。
    		itemGap: 5,
    		//图例标记的图形宽度。默认宽度为 25
    		itemWidth: 25,
    		//图例标记的图形高度。默认高度为 14
    		itemHeight: 12,
    		//type: "continuous", //continuous连续,piecewise分段
    		x: '3.6%', //
    		y: 'bottom', //left,right,center,top,bottom,%
    		//text: ['高值','低值'],//该值存在会覆盖splitList中文本部分
    		textStyle: {
    			color: "#300000",
    			fontSize: 11,
    		},
    		dimension: 0, //指定用数据[data]的『哪个维度』映射到视觉元素上,默认映射到最后一个维度,不设定该选项默认值也是0;在直角坐标系中,x 轴为第一个维度(0),y 轴为第二个维度(1)
    		//自定义『分段式视觉映射组件』的每一段的范围,以及每一段的文字,以及每一段的特别的样式。
    		pieces: [  //splitList,pieces为分段列表,pieceList为连续列表;start,end可改为min,max
    			{min: 10000, label: "10000及以上", color: "#700000"}, //不指定 max,表示 max 为无限大(Infinity)
    			{min: 1000, max: 9999, color: "#AE0000"},
    			{min: 500, max: 999, color: "#E80000"},
    			{min: 100, max: 499, color: "#FF8000"},//#FE1080,#EE7600
    			{min: 10, max: 99, color: "#FFC1C1"},//#FFDA8E
    			{min: 1, max: 9, color: "#FFE0E0"},
    			{min: 0, max: 0, label: "0", color: "#00FF7F"},
    			// 不指定 min,表示 min 为无限小(-Infinity)
    		],
    	{#splitList: [#}
    	{#    {start: 10000, label: '10000及以上', color: '#700000'},#}
    	{#    {start: 1000, end: 9999, color: "#AE0000"},#}
    	{#    {start: 500, end: 999, color: "#E80000"},#}
    	{#    {start: 100, end: 499, color: "#FF8000"},//#FE1080,#EE7600#}
    	{#    {start: 10, end: 99, color: "#FFDA8E"},#}
    	{#    {start: 1, end: 9, color: '#FFE0E0'},#}
    	{#    //{end: 0, label: '未感染地区', color: '#FFFFFF'}#}
    	{#],#}
    	{#    //color: ['red','orange','green','blue']//值域颜色,最少两个#}
    	},
    	"animation": true, //是否开启动画
    
    	"visualMap": {  //默认图例色条
    		"show": false,  //是否显示默认图例色条组件条(不论true或false,颜色都能映射),上面启用了dataRange后改设置默认无效
    		"orient": "vertical", //默认'vertical',visualMap 组件条的方向。有'vertical', 'horizontal'可选
    		"type": "piecewise",  //continuous图例连续,piecewise分段,设定为分段时要配置分段范围列表pieces
    		"pieces": [
    			{start: 10000, label: '10000及以上', color: '#700000'},
    			{start: 1000, end: 9999, color: "#AE0000"},
    			{start: 500, end: 999, color: "#E80000"},
    			{start: 100, end: 499, color: "#FF8000"},//#FE1080,#EE7600
    			{start: 10, end: 99, color: "#FFDA8E"},
    			{start: 1, end: 9, color: '#FFE0E0'},
    			//{end: 0, label: '未感染地区', color: '#FFFFFF'},
    		],
    		//"min": 0,  //连续型设置最小最大值
    		//"max": 10000,
    		"text": [  //文本样式
    			"high",
    			"low"
    		],
    		"textStyle": {
    			"color": "#000",
    			"fontSize": 10,  //图例文字大小
    		},
    		"inRange": {   //如果分段型指定的min和max里带颜色属性,此处则无效
    			"color": [
    				//"white",//"#50a3ba",
    				"#FFFFE0",
    				"#FFC1C1",
    				"#FFA500",
    				"#9D3700",//"#eac763",
    				"#750000",//"#d94e5d",
    				//"black",
    
    			]
    		},
    		"calculable": true,  //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
    		inverse: false,  //是否反转 visualMap 组件
    		precision: 0,    //数据展示的小数精度,默认为0,无小数点
    		dimension: 0,    //指定用数据的『哪个维度』,映射到视觉元素上。
    		//seriesIndex: 1,   //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列
    		hoverLink: true,   //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值在图表中对应的图形元素,会高亮
    		zlevel: 0,  //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    		z: 2,      //所属组件的z分层,z值小的图形会被z值大的图形覆盖
    		//"splitNumber": 3, //当上面设定为piecewise分段时,把颜色(inRange中color)划分为几个分段区域,默认为5
    		left: "3.6%",   //left和top优先级高于right和bottom
    		right: "",  //不指定默认该值不存在,按默认left为0处理
    		//top: "",  //不指定数值,默认为0,优先级高于bottom
    		bottom: 0,  //不指定默认该值不存在,按默认top为0处理
    		itemGap: 5,
    		itemHeight: 10,
    		itemWidth: 20,
    		backgroundColor:"transparent",            //标题背景色
    		borderColor:"#000",                         //边框颜色
    		borderWidth:1,                               //边框线宽
    		"showLabel": true, //是否显示每项的文本标签
    		formatter: function (value) {                 //标签的格式化工具。
    			return '<' + value + '>';                    // 范围标签显示内容。
    		}
    	}
    };

  • 分类:javascript
    标签: 中国地图
    评论数:0 阅读数:1074