善用Echart5画图，让大屏可视化炫酷

可视化对于我们来说已经不再陌生，地图也很常用。有很多公司的业务范围可能仅限于某个城区，所以画一张中国地图意义不大。你只需要画出某个省或市区的地图，然后统计每个区域的分布情况。具体效果如图演示：1.实现原理：在画图之前，我们首先要了解实现原理是什么，然后按照具体的实现步骤依次实现效果。如果不懂原理，每次都是复制粘贴。1、开始之前，先确认你的地图需要分成多少层，以及它们的作用。2、要实现这个效果，需要三层贴图才能实现这个效果。在底层放置一层，并设置地图的边框，对应地图中最外层的蓝色地图线。第二层放在中间，实现基本地图图层，显示各区域对应的地名。第三层放在最外层，实现数据标记，对应地图中的圆圈和数据。3.拖动或缩放时出现错位，使缩放和拖动同步。二、使用Echarts的五个步骤：1、下载并导入echartsEcharts已经更新到5.0版本。安装后记得检查你的版本是不是5.0。npminstallecharts--save下载地图的json数据。您可以下载中国及各省、市、区的地图数据。免费文件下载地址：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5。下载对应省市的地图数据。import:import*asechartsfrom"echarts"importchinaJSONfrom'../../assets/json/china.json'2.准备容器定义元素的宽度和高度来容纳地图。3.实例化echarts对象import*asechartsfrom'echarts'importxianJSONfrom'../../assets/json/xian.json'constxian=ref()varmyChart=echarts.init(xian.value)//创建了一个myChart对象如果是绘制的地图，需要先导入注册地图：echarts.registerMap('xa',xianJSON)4.指定配置项和数据varoption={//存储要绘制的图片类型和样式设置}5.为echarts对象设置配置项myChart.setOption(option)3.具体实现步骤第一步：绘制基本地图图层并显示每个区域。具体代码为：第二步：在底部绘制地图图层，设置地图外边框。添加series属性，绘制一个地图层，用z放在最下面。series:[//绘制新地图{type:'map',map:'xa',zoom:1,roam:true,center:[109.00853,34.11078],z:-1,//放在底部layeritemStyle:{normal:{areaColor:'#2e488f',borderColor:'#0074ff',borderWidth:5,//设置外边框线的粗细},},},],第三步：添加数据点分布的标记。series中再添加一个配置项：{type:'effectScatter',//特效散点图coordinateSystem:'geo',symbol:'circle',//symbolSize设置标记点的大小，//限制大小为30-between50symbolSize:function(val){return30+(val[2]/100)*20},colorBy:'series',//显示名称和设置样式label:{show:true,formatter:function(data){returndata.value[2]},color:'#080b1a',fontSize:'16',offset:[0,0],align:'center',},//波纹效果设置rippleEffect:{color:'#32479d',number:3,period:4,scale:2,brushType:'stroke',},itemStyle:{normal:{color:'#00e6ff',borderColor:'#32479d',borderWidth:2,},},data:[{name:'蓝天',value:[109.423479,34.181634,50]},{name:'长安区',value:[108.923479,34.110134,30]},{name:'周至县',value:[108.123479,34.010134,2]},{name:'沪邑区',value:[108.573479,34.100134,4]},{name:'临潼区',value:[109.283479,34.510134,3]},{name:'高陵区',value:[109.059479,34.550134,1]},]]第四步：处理缩放时不同步的问题。捕获georoam事件，当上层geo缩放偏移时，下层地图会同步到上层。添加代码：myChart.on('georoam',function(params){varoption=myChart.getOption()//获取选项对象if(params.zoom!=null&¶ms.zoom!=undefined){//捕获Whenzoomingoption.series[0].zoom=option.geo[0].zoom//下geo的缩放级别随着上geo的改变而变化option.series[0].center=option.geo[0].center//下层geo的中心位置随着上层geo的变化而变化}else{//拖动捕获时option.series[0].center=option.geo[0].center//下层geo的中心位置跟随上层一起改变geo}myChart.setOption(option)//设置option})4.完整源码