关于vue.js:数据大屏开发流程梳理和3d地图绘制

35次阅读

共计 4523 个字符，预计需要花费 12 分钟才能阅读完成。

碎碎念

最近一段时间刚好公司须要开发数据大屏，用 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 合集

正文完
vue.js
发表至： vue.js
2022-09-25
 0
关于vue.js:记一次Vue引入腾讯地图marker自定义图片不显示
关于vue.js:利用免费内网穿透-穿透内网vue项目
关于vue.js:vue-使用此方法初始化数据数据-Objectassignthisdatathisoptionsdata
关于vue.js:600行代码就为了让-wangEditor5-在-vue3-中更好用