目录

GASP库

ECharts图表

选择那种渲染器

options配置项（组件）

grid网格配置（直角坐标系绘图区域）

坐标系配置

series系列图配置

title组件

大屏适配

设计稿件

---

GASP库

GSAP3入门 - 掘金 (juejin.cn)

ECharts图表

Apache ECharts官网

ECchatrs是企业级的数据图表、

可以六成的运行在PC和移动设备上、兼容当前绝大部分浏览器

ECharts底层依赖轻量级的ZRender图形库、可提供直观、生动、可交互、可高度个性化制定的数据可视化图表。

应用场景：智慧城市、园区、公安、机房、监所、电力、物业、应急管理、等多个领域的数据可视化展示。

特点：

提供开箱即用的20多种图表和十几种组件、、并支持各种图表以及组件的任意组合

Canvas、SVG双引擎一键切换、增量渲染技术等技术实现千万级数据交互

直接用过编写设置、便可以生成各种图表

选择那种渲染器

canvas更适合绘制图形元素数量较多、如热力图、炫光尾迹、

SVG具有更重要的优势：内存占用低、适配性好、扩展性好、放大缩小图表不会模糊

options配置项（组件）

keyWord	作用
background	设置直角坐标系内绘制图形
grid选项	直接坐标系内绘图区域
yAxis选项	直角坐标系grid中的y轴
xAxis选项	直角坐标系grid中的x轴
title	图表标题
legend	图裂、展现了不同系列的标记、颜色
tooltip	提醒框
toolbox	工具栏、提供操作图标的工具
series	系列、配置系列图表的类型和图像信息数据
visualMap	视觉映射、可以将数据值映射到图形的形状、大小、颜色等
geo	地理坐标系组件、用于地图绘制、支持在地理坐标上绘制散点图、线集

grid网格配置（直角坐标系绘图区域）

• show：是否展示直角坐标系网格系统、boolean类型

• left、right、top、bottom、：grid组件里容器左右上下的距离。string | number 类型

• containLabel：grid区域是否包含坐标轴的刻度标签。boolean类型

• backgroundColor：color类型。网格背景色、默认透明

坐标系配置

• xAxis选项：直角坐标系的grid的x轴

  • show：是否显示x轴

  • name：坐标轴名称

  • type：坐标轴类型。string类型

    • value数值轴

    • category类目轴、适用于离散的类目数据

  • data：类目数据，在类目轴中有效

  • axisLine：坐标轴轴线相关设置、object类型

• yAxis选项：直角坐标系的grid的x轴

  • show：是否显示x轴

  • name：坐标轴名称

  • type：坐标轴类型。string类型

    • value数值轴

    • category类目轴、适用于离散的类目数据

  • data：类目数据，在类目轴中有效

  • axisLine：坐标轴轴线相关设置、object类型

series系列图配置

配置系列图表的类型和图像信息数据，object【】类型、每个Ooject具体配置如下

• name：系列名称、用于tooltip的显示、legend的图例筛选等

• type：指定系统图表的类型、比如主状图、折线图、饼图、散点图、地图

• data：系列中的数值内容数组、数组的每一项为数据项

  • 一维数组：[value,value].

  • 二维数组：

    • [[index,value],[index,value]],index从0开始

    • [[x,y,value],[x,y,value]],x,y表示X轴和Y轴

  • 对象类型。[value:x,name:x,;label:().....]

• label:图形上的文本标签（就近原则、data中的比series高

• itemStyle：图形样式

• emphasis：高亮的图像样式、和标签样式

• coordinateSystem：该系列使用的坐标系，默认为二维直接坐标系。（笛卡尔坐标系

title组件

• text：标题文本

• show：控制是否显示

• left、top、right、bottom控制位置

大屏适配

适配最多的屏幕尺寸：

• pc端电脑：1920px*1080px

• 移动设备：750px*auto

大屏设备-拼接屏

就是由很多个显示屏拼接而成。

常见的就是指挥大厅、展厅、展会

大屏设备-LED屏幕

LED也是现状大屏常用的硬件、它是由若干个单体屏幕模块组成、它的像素点及拼接方式与拼接屏幕有很大区别。

LED可以看出矩形点阵，具体拼接方法也会根据现场实际情况有所不同，

LED屏有很多规格、各规格计算方法相同

• 比如用单体500*500的作为标准计算、每个单体模块像素点横竖都为128px

• 横向12块竖向6块、横向像素为128×12=1536px、竖向128×6=768px。可以根据使用横竖总像素去设计

设计稿件

大多数屏幕分辨率为1920*1080.当然也有一些大屏、拼接屏，分辨率可达：11520×3240，像这种就不太适合设计，会造成GPU负荷过大、卡顿

正常设计应该保持在4k内。

因此设计的时候保存同样的规则，保存大屏的比例缩放就行

注：最好是按照硬件的输出分辨率设计、因为按照输出分辨率设计、一定不会出错

移动屏设计：

基本尺寸为75pxXAuto，设计稿尺寸：750pxXAuto

大屏设尺寸：设计尺寸建议按照输出分辨率设计（重点）

拼接超过4K作用直接按照总和进行设计就行