前端数据可视化之【Echarts介绍】

目录

  • 🌟前言
  • 🌟丰富的可视化类型
  • 🌟多种数据格式无需转换直接使用
  • 🌟移动端优化
  • 🌟多渲染方案,跨平台使用!
  • 🌟写在最后

在这里插入图片描述

🌟前言

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

ECharts,缩写来自Enterprise Charts,商业级数据图表,,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

🌟丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

🌟多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。

🌟移动端优化

ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。

细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。

Echarts介绍

🌟多渲染方案,跨平台使用!

ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。

  • VML 可以兼容低版本 IE
  • SVG 使得移动端不再为内存担忧
  • Canvas 可以轻松应对大数据量和特效的展现。
    不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。

除了 PC 和移动端的浏览器,ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染(SSR)。从 4.0 开始我们还和微信小程序的团队合作,提供了 ECharts 对小程序的适配!

🌟写在最后

更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣每日一题43:字符串相乘

题目描述: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式。 注意:不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2"…

Python数据分析教程(非常详细)从零基础入门到精通,看完这一篇就够了

1、为什么选择Python进行数据分析? Python是一门动态的、面向对象的脚本语言,同时也是一门简约,通俗易懂的编程语言。Python入门简单,代码可读性强,一段好的Python代码,阅读起来像是在读一篇外语文章。Python这种特性…

ROS键盘遥控机器人,通过参数服务器指定速度

1、引言 在上节的驱动机器人,我们知道是cmd_vel话题发布一串Twist类型消息来控制,我们可以输入如下命令查看这个Twist的详细信息:rosmsg show geometry_msgs/Twist geometry_msgs/Vector3 linear float64 x float64 y float64 z geome…

macos 中ios系统升级,但是macos还是老系统,在手机上无法安装ios软件

https://github.com/filsv/iOSDeviceSupport 构建项目出现 解决的方法: 就可以了,

JDBC-day05(DAO及相关实现类)

七:DAO及相关实现类 1. DAO介绍 DAO:Data Access Object访问数据信息的类和接口,包括了对数据的CRUD(Create、Retrival、Update、Delete),而不包含任何业务相关的信息。有时也称作:BaseDAO作用…

关于SparkRdd和SparkSql的几个指标统计,scala语言,打包上传到spark集群,yarn模式运行

需求: ❖ 要求:分别用SparkRDD, SparkSQL两种编程方式完成下列数据分析,结合webUI监控比较性能优劣并给出结果的合理化解释. 1、分别统计用户,性别,职业的个数: 2、查看统计年龄分布情况(按照年龄分段为7段&#xff0…

Adobe发布Firefly 2,提升图像质量和用户体验

🦉 AI新闻 🚀 Adobe发布Firefly 2,提升图像质量和用户体验 摘要:Adobe升级了其AIGC生图平台Firefly为Firefly 2,该版本通过引入矢量图生成功能、提升图像质量和增加多项新功能,大幅改善了用户体验。Firef…

太强了!三种方案优化 2000w 数据大表!

目录 评估表数据体量 表容量: 磁盘空间 实例容量 出现问题的原因 如何解决单表数据量太大,查询变慢的问题 方案一:数据表分区 方案二:数据库分表 水平分表 垂直分表 1.取模方案: 2.range 范围方案 3.hash…

C51--基本认知

单片机基本认知: 1、什么是单片机 单片机是一种集成电路芯片。 把具有数据处理能力的中央处理器 CPU、随机存储器RAM、只读存储器ROM。 多种 I / O 口和中断系统、定时器/计数器等功能(可能还包括显示驱动电路、脉宽调制电路、模拟多路转换器、A/D转换器…

宁夏企业过等保选哪家测评机构好?选哪家堡垒机好?

最近不少宁夏小伙伴在问,宁夏企业过等保选哪家测评机构好?选哪家堡垒机好?今天我们小编就给大家来简单说说哈! 宁夏企业过等保选哪家测评机构好? 目前宁夏正规具有资质的等保测评机构只有3家,分别为中电信…

精美的早安问候语,暖心祝福,开心每一天

1、 美好的祝福,成了清晨的主题。相互问候,是一天的开始。让我们伴着不老的岁月,永远开心快乐。早晨好! 2、 心宽似海,百福皆来,世事看淡,内心安然。随缘即福,随遇而安&#xff0…

银河麒麟你服务x86访问ftp服务器上的文件

打开我的电脑 地址栏输入 ftp地址 可以选择需要的文件复制出来了

简单聊聊低代码

在数字经济迅速发展的背景下,越来越多的企业开始建立健全业务系统、应用、借助数字化工具提升管理效率,驱动业务发展,促进业绩增长。在这一过程中,和许多新技术一样,低代码(Low-code)开发被推上…

ssh 报错:Permission denied, please try again.

报错问题:执行一条远程scp远程拷贝,在此之前已配置好ssh无密登录, sudo scp -r hadoop-3.2.0 slave2:/usr/local/src/ 确保 /etc/ssh/sshd_config文件下 PasswordAuthentication no 改为 PasswordAuthentication yes 和 PermitRootLogin no …

【Overload游戏引擎细节分析】视图投影矩阵计算与摄像机

本文只罗列公式,不做具体的推导。 OpenGL本身没有摄像机(Camera)的概念,但我们为了产品上的需求与编程上的方便,一般会抽象一个摄像机组件。摄像机类似于人眼,可以建立一个本地坐标系。相机的位置是坐标原点,摄像机的朝…

探秘网页打开的完整过程:DNS解析、CDN加速和Nginx负载均衡的协同驱动

浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等) 1、概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程。下面…

STM32CUBEMX_DMA串口空闲中断接收+接收发送缓冲区

STM32CUBEMX_DMA串口空闲中断接收接收发送缓冲区 前言: 我了解的串口接收指令的方式有:在这里插入图片描述 1、接收数据中断特定帧尾 2、接收数据中断空闲中断 3、DMA接收空闲中断 我最推荐第三种,尤其是数据量比较大且频繁的时候 串口配置 …

智慧党建小程序源码系统+在线答题考试二合一 带完整的搭建教程

大家好,今天来给大家分享一个智慧党建小程序源码系统。以下是部分核心代码图: 系统特色功能一览: 积分体系:党员可以通过完成各种党建活动,如学习党的理论知识、参加组织生活、开展志愿服务等获得积分,积分…

全局事件总线

全局事件总线 功能:可以解决所有组件之间通信传数据的问题原理:通过一个共享对象,将所有组件全部绑定到对象上,即可通过这个对象实现组件与组件之间的传递数据,而这个共享对象叫做全局事件总线。 如何分清楚谁是发送方…

Linux命令行 从入门到精通系列讲解 - 总目录

👦 作者介绍:Bazinga bingo,专注linux领域应用硬核干货分享,潜心修炼,虚心学习。 📕 本文收录于《Linux心法:指令精要》专栏,包含Linux入门到精通的命令大全详解。 📘 本…