岁岁最近公司正好需要开发一款数据大屏。用Echarts搞定后，发现走了很多弯路。我今天花时间重新组织了开发过程。.老规矩是先放图：ps：具体做法请直接拉到最下方交流，提前准备好大数据屏。我个人认为最大的难点不在于Echarts的配置项多，而在于产品和UI的天马行空的想象力。因此，在开发之前，建议与产品和UI开个小会，避免后期返工。产品方面和产品确认数据的来源和约束条件，根据展示空间的大小和服务器的性能预测合理的数据量。以直方图为例，如果X轴上的数据点过于密集，就会缩小重叠。需要让产品给出最小/最大数据点数来决定是否启用缩放拖拽等（这部分也会影响ui设计的布局大小和交互）。Y轴数据的来源是业务数据计算出来的还是人为控制的？如果出现异常数据（最小值或最大值），则需要进行过滤。还有一种极端情况是Y轴数据达到1000万级以上（举个栗子），数据可能会被阻塞。有必要切换到科学计数法（影响UI）。图表的选择严格来说，这部分不属于开发工作，但是考虑到产品同学或者甲方爸爸可能对前端已有的图表不熟悉，可以参考下图：如果UI可以，可以让UI同学先看看Echarts或者antV的示例工程，统一风格和要用到的技术栈，加上产品给的数据约束范围，然后输出对应的图形。这应该是完美的情况。最坏的情况就是终极融合怪了。这时候如果有一些奇怪的图表比如3D环形图（可以做，但是真的很费时间），试着和产品一起沟通。无法满足此要求。总结起来，最常见的问题就是产品只考虑了最完美的情况，忽略了一些异常或者极端的情况。同时，UI学生只是针对原型设计绘制图片。这个时候开发最好提前把这些风险项识别出来，然后把问题抛出去（甩锅什么的，一定要抓紧时间）。UI考量的美观度和信息展示度之间的冲突也比较普遍。比如图例是竖排的，如果只有两个数据源没有问题，但是当数据源有多个样式时就会崩溃。可以删除图例信息。设计阶段大屏设计稿的尺寸市场上常见的屏幕比例为16:9，分辨率为1920*1080，当然最好问清楚产品和UI是什么人主要针对。让他们的意见占上风。有几个小细节可能需要提前注意，以便与产品Ui进行沟通（其余见上文）。整个数据大屏是否允许滚动条，即是否覆盖整个屏幕。（原则上不应该出现）如果它覆盖了整个屏幕。还需要确认是否是默认的全屏（F11）。这也与UI图像输出的大小有关。如果不是默认全屏，需要遮屏，浏览器上半部分必须扣掉。高度是可见区域的高度。部分笔记本默认缩放比例为125，如果将商务场景放在电视或其他显示设备上固定显示，影响不大，提前调整好即可。自适应分辨率当用户的屏幕分辨率不符合我们的设计稿时，就需要进行动态适配。目前市面上的方案有使用rem、transformscaling、vh/vw等，笔者这里使用的是rem。主要思路是动态修改根节点的fontSize值，然后通过px转rem函数完成自适应。//在数据大屏页面，初始化并调用该方法created(){//根据屏幕尺寸设置样式。this.setFontSize()constthat=this//Resetwindow.onresize=function(){that.setFontSize()}}/***@description:设置基准字体值*@return{*}*/setFontSize(){letdesignWidth=1920//设计稿的宽度letdesignHeight=1080//设计稿的高度//这里有个constfontSize=(document.documentElement.clientWidth/designWidth)*12document.querySelector('html').style.fontSize=fontSize+'px'}少写@width:1920;//设计稿宽度@height:1080;//设计稿高度@design_font_size:12;.px2rem(@key,@px){@{key}:(@px/@design_font_size)*1rem;}//----------------使用分割线-------------.icon{.px2rem(height,24);.px2rem(宽度,24);}sass写作@functionpx2rem($px){$design_font_size:12;@return($px/$design_font_size)+rem;}地图开发地图数据源http://datav.aliyun.com/portal/school/atlas/area_selector\通过adcode对应不同请求的接口，比如中文地图数据【10000】https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json\河北【130000】\https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json地图绘制[Echarts]使用Echarts地图绘制有两种方式配置类型为map3d。优点是3d可以支持旋转和倾斜角度，更有层次感，缺点也很明显。如果需要在地图上使用某个城市的图片很难配置。对应的series-scatterGL标记符号只支持单路径SVG和内置图标。如果需要做marker，效果比较差。如果想使用series-effectScatter和ripple特效动画的散点，可能会因为角度问题导致坐标不一样。第二种方案是使用geo来设置地图绘制。缺点是不能调整方向和角度，但是可以用series-effectScatter实现高光效果。大概如下图。如果想要有层次感，也可以通过配置系列的方式多设置几张贴图，然后调整相应的尺寸来实现。开发事项如果使用3D地图，记得importimportechartsGLfrom'echarts-gl'并在最后附上代码//地图初始化mapInit(){//地图的点信息也在上面的JSON里面，需要通过JSON数据过滤和后端想要展示的城市拼接组合。这里的假数据是硬编码的constmapData=[{name:'福州市',value:['119.2','26'],itemStyle:{color:'#FF7043'}},{name:'厦门市',value:['118.11022','24.490474'],itemStyle:{color:'#FFAB91'}},{name:'龙岩市',value:['117.02978','25.091603'],itemStyle:{color:'#FFB74D'}}]echarts.registerMap('diyMap',{geoJSON:geoJson//这个数据源就是上面说的那个})constthat=thisconstviewControl=this.getViewControl()constoption={//提示框Components（可以在各个地方设置）tooltip:{show:true,//是否显示提示框组件，包括提示框浮层和axisPointer。trigger:'item',//触发类型。item,axis,noneenterable:true,//鼠标是否可以进入提示框浮层，默认为false,//showContent:true,//是否显示提示框浮层triggerOn:'mousemove',//触发提示框(mousemove|click|none)的条件showDelay:0,//浮层显示延迟，单位ms，默认无延迟，不推荐设置它。当triggerOn为'mousemove'时有效。textStyle:{color:'#fff',fontSize:12},padding:10,hideDelay:10,//浮层格式化器隐藏延迟:(o)=>{return(o.data.name+'
'+'根据你的需要:'+500))},backgroundColor:'#0C0D1F',//提示框浮层的背景色。borderColor:'white',//图形的描边颜色borderWidth:0.5,alwaysShowContent:false,transitionDuration:1//提示框浮层移动动画的过渡时间，单位s，当它设置为0，它会跟随鼠标移动。},series:[{type:'map3D',map:'diyMap',//coloritemStyle:{normal:{//静态模式显示的默认样式borderWidth:2.3,borderColor:'#2ED8F7',color:'#4287E9'},//阴影效果强调:{//样式borderWidth:1.6,borderColor:'#2ED8F7',color:'#2ED8F7'}},regionHeight:3,//地图高度viewControl:viewControl,label:{show:true,//是否显示城市textStyle:{color:'white',//文字颜色fontSize:18//文字大小}},////高亮强调:{label:{show:true,//是否显示高亮textStyle:{color:'#fff'//高亮文字颜色}},},top:'-15%',data:mapData},]}constmapEchart=echarts.init(document.getElementById('map'))mapEchart.setOption(option)},getViewControl(){return{//用于鼠标旋转、缩放等视角控制autoRotate:false,//是否开启自动旋转viewinganglearoundtheobjectdamping:0,//旋转操作灵敏度为0后，不能旋转。rotateSensitivity:0,//不能缩放zoomSensitivity:0,animation:true,//----视角--------//倾斜角度alpha:44,//顺时针旋转角度。beta:9,distance:135,//默认视角到被摄体的距离。它被理解为变相的缩放比例。更大更远。center:[0,0,0],//----------------//animationanimation:true,animationDurationUpdate:500,animationEasingUpdate:'cubicInOut'}}开发插件-在数据跳转CountUp列表无缝滚动vue-seamless-scroll可以参考网站EchartsDemo合集\100组数据大屏demo合集
