前端常用可视化图表组件大全

🖥️ PC端主流图表库(通常也支持移动端)

这些是功能最强大、应用最广泛的库,能覆盖绝大多数PC端仪表盘和后台管理系统的需求。

库名称核心特点适用场景渲染技术开源/许可
ECharts国产全能型:图表类型极丰富(50+种),配置灵活,中文文档友好,社区庞大。支持Canvas和SVG双引擎渲染,性能优异 。企业级后台、大屏展示、PC端各类复杂图表需求。Canvas/SVGApache 2.0 (开源)
Chart.js简单易用:上手门槛极低,API简洁明了,文档清晰。设计风格清新现代,响应式布局是内置的 。快速原型开发、小型项目、需要简洁美观图表的场景。CanvasMIT (开源)
Highcharts成熟稳定:商业级库,兼容性极佳(支持IE6),交互和样式非常精致。被全球众多大公司信赖,文档和示例极其完善 。对浏览器兼容性要求严苛的金融、政府项目;追求极致稳定性的企业应用。SVG/VML免费供非商业使用,商业需许可
D3.js定制之王:不提供预制图表,而是提供一套基于数据操作DOM的底层工具。自由度无限,几乎可以实现任何你能想到的数据可视化效果 。新闻媒体定制化信息图、学术研究、需要独一无二视觉效果的复杂可视化项目。SVG/Canvas/HTMLBSD (开源)
AntV (G2/G2Plot)蚂蚁系专业库:阿里出品,分为底层统计图表库G2(灵活)和基于G2封装的故事性图表库G2Plot(简洁)。设计规范统一,适合React技术栈 。阿里系产品、中后台复杂分析型系统、有强设计规范要求的团队。Canvas/SVGMIT (开源)
Apache ECharts(同ECharts,重申其重要地位) 因其行业地位,值得再次强调其在大数据量和复杂图表上的卓越表现 。海量数据渲染、地理热力图、关系图等复杂可视化场景。Canvas/SVGApache 2.0 (开源)
📱 移动端专用或跨平台图表库

如果项目专注于移动端App(如iOS/Android)或需要一套代码多端运行(如使用Vue/React Native/Uni-app),以下库是更优选择。

库名称核心特点适用场景渲染技术开源/许可
MPAndroidChart (Android)安卓原生开发首选:功能极其丰富,几乎支持所有常见图表类型,交互(缩放、拖动、高亮)流畅,社区非常活跃 。使用Java/Kotlin开发的安卓App。原生CanvasApache 2.0 (开源)
Charts (iOS)iOS/macOS原生开发首选:MPAndroidChart的"苹果兄弟",为iOS/tvOS/OSX提供同样强大和美观的图表能力,在苹果生态中应用极广 。使用Swift/Objective-C开发的iOS/macOS App。原生Core GraphicsMIT (开源)
lyCharts (uni-app)专为中国uni-app生态打造:一款优秀的跨端图表库,完美兼容ECharts的API,意味着你可以用写ECharts的方式,一套代码同时生成小程序、H5、App 。使用uni-app进行跨平台开发的项目(小程序/H5/App)。CanvasApache 2.0 (开源)
React Native Chart KitReact Native社区流行:为React Native开发者提供简单、易用的图表组件,支持常用的折线图、柱状图、饼图等。使用React Native开发的跨平台移动App。原生组件/SVGMIT (开源)
v-charts / vue-echartsVue的最佳拍档:虽然它们是ECharts的Vue封装,但因其在Vue移动端项目中的出色表现,也值得在此列出。它们让在Vue中以组件化的方式使用ECharts变得异常简单。Vue.js技术栈的移动端H5或混合App项目。Canvas/SVGMIT (开源)

💡 如何快速选型?一张图帮你决策

面对这么多选择,你可以根据以下思路快速定位:

  1. 我是谁?
    • 前端开发:首选 ECharts(全能)、Chart.js(简单)或 AntV(蚂蚁系)。
    • 移动端原生开发:Android 选 MPAndroidChart,iOS 选 Charts
    • 跨平台开发:uni-app 选 lyCharts ,React Native 选 React Native Chart Kit
  2. 我要什么?
    • 开发速度 > 一切:选 Chart.jsHighcharts,文档好,示例多,开箱即用 。
    • 图表类型要多,要酷炫:选 EChartsFusionCharts,它们拥有最全的图表家族 。
    • 性能和数据量是关键:如果数据点动辄数十万甚至百万,ECharts 的Canvas渲染或专业级的 LightningChart JS(性能怪兽)是你的菜 。
    • 我要100%定制,独一无二:别无选择,投入 D3.js 的怀抱,但请做好学习曲线陡峭的准备 。

💎 总结

没有“最好”的库,只有“最适合”当前项目的库。

  • 对于大部分国内PC端项目ECharts 几乎是一个不会错的起点。
  • 如果项目是Vue全家桶,可以看看 v-charts 让开发更惬意。
  • 如果是跨端小程序或ApplyCharts 会让你事半功倍。

如果你能告诉我你的具体技术栈(如 Vue/React/Uni-app)和应用场景(如大屏展示/移动端报表),我可以为你提供更精准的建议。

Read more

ubuntu上安装OpenClaw并接入飞书机器人

ubuntu上安装OpenClaw并接入飞书机器人

大家好,我是一根甜苦瓜。今天来分享如何在本地安装openclaw并接入飞书,实现让AI给我打工。 最近AI圈更新太快了,从github copilot到cursor 到claud code ,再到codex,然后是最近火爆了的小龙虾(OpenClaw),可谓是百花齐放,应接不暇。本人也是github copilot+codex的深度用户,确实不错,所以最近打算折腾一下小龙虾,顺带教大家如何把智谱GLM 接入OpenClaw。 1. 前言 1.1 什么是openclaw 2026 年开年,AI 圈突然冒出一匹“野生黑马”——OpenClaw。这个开源个人 AI 助手项目在 GitHub 上只用了 两周时间就狂揽 15 万 Star,速度堪比开挂。 简单说,它就像给你配了一个 24 小时不下班的数字打工人: 把它部署在自己的电脑或服务器上,它就能接入 WhatsApp、Telegram、

企业微信群通知机器人添加点击链接教程(图文 / Markdown 两种方式)

在使用企业微信群通知机器人时,很多开发者会有 “能否添加可点击链接” 的需求 —— 比如推送文档地址、业务系统入口、数据报表链接等。答案是:完全可以!本文将详细介绍两种核心实现方式(图文消息 / Markdown 消息),附完整代码示例和注意事项,新手也能快速上手。 一、前置准备:已获取群机器人 Webhook 地址 在添加链接前,需先完成群机器人的创建并获取 Webhook 地址,步骤回顾: 1. 进入企业微信目标群聊 → 点击右上角 “...” → 选择 “添加群机器人” → 新建机器人并命名; 2. 创建成功后,复制系统生成的 Webhook 地址(格式类似 https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxx),后续发送请求需用到该地址。 二、两种添加点击链接的实现方式

【大模型应用篇】用 OpenClaw + 飞书打造 7x24 小时服务器运维机器人

【大模型应用篇】用 OpenClaw + 飞书打造 7x24 小时服务器运维机器人

前言 本文基于OpenClaw,也是最近超火的可在本地运行的AI Agent网关,记录从零搭建通过飞书对话管理服务器运维机器人的全过程。该机器人支持随时随地通过飞书查看服务器状态、检索日志、管理进程,其核心机制在于:由OpenClaw将聊天平台(飞书等)的消息路由至大模型,模型调用本地工具(如Shell、文件系统、浏览器)执行相应任务,最终将结果自动返回至飞书会话中,实现自动化运维交互。 架构概览 飞书 App (WebSocket 长连接)         ↕ OpenClaw Gateway (服务器上 systemd 常驻)         ↕ AI 模型 (DeepSeek v3.2/GLM 4.7)         ↕ 服务器 Shell (受白名单限制的命令执行) 核心组件: * OpenClaw Gateway:Agent 网关,管理会话、工具调用、渠道连接 * 飞书插件:通过

《机器人实践开发①:Foxglove 开发环境完整搭建指南(含常见坑位) 》

《机器人实践开发①:Foxglove 开发环境完整搭建指南(含常见坑位) 》

导语: 在机器人项目中,调试工具往往比算法本身更耗时间。Foxglove 作为新一代机器人可视化平台,提供了强大的话题订阅、视频显示、3D 展示和日志分析能力。本篇从零开始,手把手带你完成 Foxglove 的环境搭建,包含依赖安装、连接配置以及常见踩坑点。 《机器人实践开发》系列文章索引 《机器人实践开发①:Foxglove 开发环境完整搭建指南(含常见坑位)》 《机器人实践开发②:Foxglove 嵌入式移植 + CMake 集成》 《机器人实践开发③:Foxglove可视化机器人的眼睛-视频》 《机器人实践开发④:Foxglove可视化机器人的耳朵-声音》 《机器人实践开发⑤:Foxglove可视化机器人的3D显示》 《机器人实践开发⑥:Foxglove可视化机器人传感器数据》 《机器人实践开发⑦:Foxglove可视化机器人的日志显示》 《机器人实践开发⑧:Foxglove可视化机器人的地图显示》 《机器人实践开发⑨:Foxglove可视化机器人的MyBag 数据回放》 foxglove 官网 Foxglove 是一个专为机器人团队打造的平台,用于收