ps:具体实践请直接拉到最下面
事前沟通准备
数据大屏我个人认为最大的难点不在于
Echarts
的配置项多，而是来自于产品和UI天马行空的想象力。因此在开发前墙裂建议拉上产品和UI开个小会，避免后期的返工。
和产品确认好数据的来源和约束，根据展示空间的大小和服务器的性能来预判合理的数据量。
以柱状图为例，X轴的数据点如果太过于密集，就会缩小以至于重叠，需要让产品给出数据点的最小/大数量来判断需不要开启
缩放拖拽
等(这部分也会影响ui设计的版面大小和交互)。
Y轴的数据的来源是通过业务数据推算，还是手动控制，如果出现异常数据（极小值或者极大值）了之后需不需要过滤。还有一直比较极端的情况就是Y轴数据到达了千万以上级别（只是举个栗子），可能会出现数据被遮挡的情况，需不需要改用科学计数法（影响UI）
图表的选择
，严格来说这部分确实不属于开发的活，不过考虑到产品同学可能对前端现有的图表不太熟悉，可以参考以下这张图：
如果可以的话，在出图之前可以让UI同学先去看下
Echarts
或者
antV
的示例项目，统一好风格和要使用的技术栈，加上产品给的数据约束范围，在对应出图。这应该是最完美的情况了。
最坏的情况就是究极融合怪了，这个时候如果有些奇奇怪怪的图表比如3d环图（可以做，但确实费时间）这种，尽量拉上产品一起沟通，统统无效后最后杀招就是
这个需求做不了
。
最常出现的问题就是，产品只考虑了最完美的情况，无视了一些异常或者极端情况。同时UI同学也只是对着原型设计出图，这个时候开发最好还是能提前识别到这些风险项，然后把问题抛出来（甩锅什么的，一定要赶早）。
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;
地图数据来源
datav.aliyun.com/portal/scho…
通过adcode的不同请求对应的接口，比如中国地图数据 【10000】geo.datav.aliyun.com/areas_v3/bo…
河北【130000】
geo.datav.aliyun.com/areas_v3/bo…
地图的绘制【Echarts】
使用Echarts的地图绘制有两种方式
配置type为map3d，好处因为是3d可以支持旋转和倾斜角，比较有层次感，缺点也很明显，如果需要在地图上面的某个城市上配置图片是比较困难的，对应的 series-scatterGL 标记symbol只支持单path SVG和内置图标。如果需要做标记效果是比较差的，如果想要用series-effectScatter带有涟漪特效动画的散点，会因为角度问题坐标有出入。
第二种方案就是利用 geo 设置map绘制，缺点是方向角度不能调节，但是搭配series-effectScatter可以实现高亮效果。大概如下图。如果想要有层次感，也可以通过配置series多设几个map，然后调整对应大小实现。
如果使用3d地图记得引入 import echartsGL from 'echarts-gl'
最后附上代码
mapInit() {
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,
trigger: 'item',
enterable: true,
triggerOn: 'mousemove',
showDelay: 0,
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
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,
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合集
