【报表和BI大屏】ECharts数据可视化大屏 / 驾驶舱

Apache ECharts

Apache ECharts 是前端 JS 开源可视化图表库(Apache2.0 协议,免费商用),底层基于 ZRender 渲染引擎,专门用来在网页绘制各类图表、大屏可视化 ,**不是完整 BI 平台,只是图表渲染原材料,**前身百度 ECharts,现在归属 Apache 基金会。

架构

复制代码
业务数据(后端接口返回JSON)
    ↓
ECharts实例,接收 option 配置(声明式)
    ↓
ZRender 渲染引擎(底层绘图内核)
    ↓
Canvas / SVG 二选一渲染到div容器
  • ZRender:ECharts 底层 2D 绘图引擎,负责图形绘制、事件拾取、动画、图层管理Apache ECh...
  • 渲染模式:
    • Canvas:大屏、大数据量优先,性能更好;
    • SVG:矢量,放大不失真,适合移动端、小图表、导出图片。
  • 编程模型:声明式 Option ,配置对象包含:title、tooltip、legend、xAxis、yAxis、series、grid,修改 option 即可更新图表,不用操作 DOM。

内置图表类型

基础图表:柱状、折线、饼图、环形、K 线、散点、雷达、仪表盘 Gauge

高级:地图、热力图、漏斗图、树图、旭日图、关系图、平行坐标、自定义图形custom

扩展:ECharts GL(3D 地图 / 3D 柱状图)

组件(辅助元素):提示框 tooltip、图例 legend、数据缩放 dataZoom、标线 markLine、markPoint、brush 刷选、工具箱 toolbox。

商业化产品

永洪 BI,自研

Apache Superset开源,React+ECharts,私有化大数据探索,大屏能力偏弱

AJ-Report / 积木报表,开源,底层封装 ECharts,拖拽大屏,自动生成 ECharts 配置,后端管理数据集,低代码平台常用,大屏 + 报表一体

百度 SugarBI、阿里 QuickBI

帆软体系里:私有化或Saas部署

**FineReport 做决策报表(大屏),**自研封装 ECharts,

**FineBI 自助分析,也支持大屏驾驶舱,**自研封装 ECharts

和简道云表单 / 流程引擎是独立模块。

帆软大屏不是 ECharts 手写页面,是自研可视化引擎:

  1. FineReport:决策报表(决策大屏) ,绝对布局,拖拽组件(KPI、柱状图、折线、地图、表格),写数据集 SQL,配置自动刷新。
    • 数据集:JDBC 直连 MySQL/Oracle、API、存储过程、Excel
    • 保存:大屏布局 JSON + 数据集定义,存帆软内置库
    • 渲染:帆软自研前端渲染引擎,底层封装 ECharts
  2. FineBI:仪表板 / 驾驶舱,自助拖拽,适合业务人员自己做分析看板,也可以发布为大屏全屏模式。
相关推荐
深蓝AI7 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒8 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=08 小时前
Vue 3 模板语
前端·javascript·vue.js
用户7610304473718 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿8 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺9 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李9 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying9 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一9 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js9 小时前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化