【报表和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:仪表板 / 驾驶舱,自助拖拽,适合业务人员自己做分析看板,也可以发布为大屏全屏模式。
相关推荐
小蜗 strong2 小时前
和电脑猜拳(随机程序应用)
服务器·前端·python
下家3 小时前
为了脱离前端鄙视链,于是自己写个框架 - React 党看完沉默了
前端·前端框架
zhiyouTech3 小时前
从“被看见“到“被信任“:关于信源评级机制的一点观察
大数据·前端·人工智能
Hashan3 小时前
Vibe Coding 下前后端怎么对接接口?后端不给力的兜底方案
前端·后端·vibecoding
你挚爱的强哥4 小时前
【sgKeyboard】自定义组件:虚拟键盘
前端·javascript·计算机外设
锅里游的鱼吖4 小时前
echarts自定义折线图
前端·javascript·数据库
hunteritself4 小时前
卷卷卷!GPT-6 Sol、Luna 正式发布,OpenAI 开始卷价格了
大数据·前端·人工智能·深度学习·transformer
何何____5 小时前
Vue 全局事件总线详解
前端·javascript·vue.js
涉密IT资质笔记5 小时前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库
u0111026755 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画