碎碎念

最近一段时间刚好公司须要开发数据大屏，用Echarts做完发现走了不少的弯路，趁明天有空把开发流程从新梳理了下。老规矩先放图：

ps:具体实际请间接拉到最上面

事先沟通筹备

数据大屏我集体认为最大的难点不在于Echarts的配置项多，而是来自于产品和UI天马行空的想象力。因而在开发前墙裂倡议拉上产品和UI开个小会，防止前期的返工。

产品方面

  1. 和产品确认好数据的起源和束缚，依据展现空间的大小和服务器的性能来预判正当的数据量。
  2. 以柱状图为例，X轴的数据点如果太过于密集，就会放大以至于重叠，须要让产品给出数据点的最小/大数量来判断需不要开启缩放拖拽等(这部分也会影响ui设计的版面大小和交互)。
  3. Y轴的数据的起源是通过业务数据推算，还是手动管制，如果出现异常数据（极小值或者极大值）了之后需不需要过滤。还有始终比拟极其的状况就是Y轴数据达到了千万以上级别（只是举个栗子），可能会呈现数据被遮挡的状况，需不需要改用迷信计数法（影响UI）
  4. 图表的抉择，严格来说这部分的确不属于开发的活，不过思考到产品同学或者甲方爸爸可能对前端现有的图表不太熟悉，能够参考以下这张图：

UI

  1. 如果能够的话，在出图之前能够让UI同学先去看下Echarts或者antV的示例我的项目，对立好格调和要应用的技术栈，加上产品给的数据束缚范畴，在对应出图。这应该是最完满的状况了。
  2. 最坏的状况就是究极交融怪了，这个时候如果有些奇奇怪怪的图表比方3d环图（能够做，但的确费时间）这种，尽量拉上产品一起沟通，通通有效后最初杀招就是这个需要做不了。

总结

  1. 最常呈现的问题就是，产品只思考了最完满的状况，忽视了一些异样或者极其状况。同时UI同学也只是对着原型设计出图，这个时候开发最好还是能提前辨认到这些危险项，而后把问题抛出来（甩锅什么的，肯定要赶早）。
  2. UI思考的好看和信息展现水平抵触也是比拟常见的。比方图例如果是竖向排序，只有两个数据源的状况下没有问题，然而数据源一多样式就崩了，这种状况下如果UI一开始给的版面没有思考到这种状况，那也只能把图例信息去掉。

设计阶段

大屏设计稿的尺寸

市面上常见的屏幕比例是16：9，分辨率1920 * 1080。当然最好还是问下产品和UI次要是针对哪方面的人群。以他们的意见为准。有几个小细节可能须要提前留神和产品Ui沟通（其余的见下面）

  • 整个数据大屏允不容许呈现滚动条，即是不是铺满整个屏幕。（按理来说是不该呈现的）
  • 如果是铺满整个屏幕。还须要确认下是不是默认全屏（F11）。这也关系到UI的出图尺寸，如果不是默认全屏又须要铺满屏幕，就还要扣掉浏览器下面的局部。高度就是可视区域的高度。
  • 一些笔记本的默认缩放比是125的，如果业务场景是放在电视或者其余显示器设施上固定展现的影响不大，当时调整就行。

自适应分辨率

当用户的屏幕分辨率不合乎咱们的设计稿时，就须要动静适配。目前市面的解决方案有应用rem，transform缩放，vh/vw等。

笔者这边应用的是rem。

次要思路是动静批改根节点的fontSize值，而后通过px转rem的函数实现自适应，

// 在数据大屏的页面，初始化调用这个办法created() {   // 依据屏幕大小设置款式。   this.setFontSize()   const that = this   //窗口变动后从新设置   window.onresize = function () {   that.setFontSize()  }}/**   * @description: 设置基准字体值  * @return {*}  */ setFontSize() {   let designWidth = 1920 //设计稿的宽度   let designHeight = 1080 //设计稿的高度   // 这边是以宽度为优先级进行设置的   const fontSize = (document.documentElement.clientWidth / designWidth) * 12   document.querySelector('html').style.fontSize = fontSize + 'px' }

less写法

@width: 1920;//设计稿的宽度@height: 1080;//设计稿的高度@design_font_size: 12;.px2rem(@key, @px) {   @{key}:(@px/@design_font_size) * 1rem;}//-----------------应用分割线-------------  .icon {    .px2rem(height,24);    .px2rem(width,24);  ｝

sass写法

@function px2rem($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的地图绘制有两种形式

  1. 配置type为map3d，益处因为是3d能够反对旋转和倾斜角，比拟有层次感，毛病也很显著，如果须要在地图下面的某个城市上配置图片是比拟艰难的，对应的 series-scatterGL 标记symbol只反对单path SVG和内置图标。如果须要做标记成果是比拟差的，如果想要用series-effectScatter带有涟漪特效动画的散点，会因为角度问题坐标有出入。
  2. 第二种计划就是利用 geo 设置map绘制，毛病是方向角度不能调节，然而搭配series-effectScatter能够实现高亮成果。大略如下图。如果想要有层次感，也能够通过配置series多设几个map，而后调整对应大小实现。

开发事项

  1. 如果应用3d地图记得引入 import echartsGL from 'echarts-gl'

最初附上代码

// 地图初始化 mapInit() {   // 地图的点位信息也在下面的JSON中，这个须要本人对JSON数据过滤后和后端想要展现的城市拼接组合。这边假数据写死   const  mapData =  [     {       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 //这个数据起源就是下面所说的   })   const that = this   const viewControl =     this.getViewControl()   const option = {     //提示框组件(能够设置在多种中央)     tooltip: {       show: true, //是否显示提示框组件，包含提示框浮层和 axisPointer。       trigger: 'item', //触发类型。item,axis,none       enterable: true, //鼠标是否可进入提示框浮层中，默认为false，       // showContent: true,          //是否显示提示框浮层       triggerOn: 'mousemove', //提示框触发的条件(mousemove|click|none)       showDelay: 0, //浮层显示的提早，单位为 ms，默认没有提早，也不倡议设置。在 triggerOn 为 'mousemove' 时无效。       textStyle: {         color: '#fff',         fontSize: 12       },       padding: 10,       hideDelay: 10, //浮层暗藏的提早       formatter: (o) => {         return (         o.data.name +'<br/>' +'依据本人须要来: ' + 500)          )       },       backgroundColor: '#0C0D1F', //提示框浮层的背景色彩。       borderColor: 'white', //图形的描边色彩       borderWidth: 0.5,       alwaysShowContent: false,       transitionDuration: 1 //提示框浮层的挪动动画过渡工夫，单位是 s，设置为 0 的时候会紧跟着鼠标挪动。     },     series: [       {         type: 'map3D',         map: 'diyMap',         // 色彩         itemStyle: {           normal: {             //动态模式下显示的默认款式             borderWidth: 2.3,             borderColor: '#2ED8F7',             color: '#4287E9'           }, //暗影成果           emphasis: {             // 鼠标移上去的款式             borderWidth: 1.6,             borderColor: '#2ED8F7',             color: '#2ED8F7'           }         },         regionHeight: 3, //地图高度         viewControl: viewControl,         label: {           show: true, //是否显示市           textStyle: {             color: 'white', //文字色彩             fontSize: 18 //文字大小           }         },         // // 高亮         emphasis: {           label: {             show: true, //是否显示高亮             textStyle: {               color: '#fff' //高亮文字色彩             }           },         },         top: '-15%',         data: mapData                },     ]   }   const mapEchart = echarts.init(     document.getElementById('map')   )   mapEchart.setOption(option) }, getViewControl() {   return {     //用于鼠标的旋转，缩放等视角管制。     autoRotate: false, //是否开启视角绕物体的主动旋转查看     damping: 0,     //  旋转操作的灵敏度为0后无奈旋转。     rotateSensitivity: 0,     //  不能缩放     zoomSensitivity: 0,     animation: true,     // ----视角-------     // 倾斜角     alpha: 44,     //  顺时针旋的角度。      beta: 9,     distance: 135, //默认视角间隔主体的间隔. 变相了解成缩放比。 越大越远。     center: [0, 0, 0],     //-----------------     // 动画     animation: true,     animationDurationUpdate: 500,     animationEasingUpdate:       'cubicInOut'   } }

开发插件

  • 数据跳动 CountUp
  • 列表无缝滚动 vue-seamless-scroll

能够参考的网站

EchartsDemo汇合 \

100套数据大屏demo合集