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

news2024/12/23 19:27:27

目录

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

在这里插入图片描述

🌟前言

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.coloradmin.cn/o/1098262.html

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

相关文章

数据类型转换

一.应用函数或者方法 1.cast 函数 cast(变量 as 数据类型) 语义:将变量转为这个类型 2. 变量 ::数据类型 将变量转化为xx类型 3.to_date函数 to_date(字符串,format) 语义:转换成日期类…

运用精益管理思想提升MES管理系统建设水平

随着制造业的不断发展,MES生产管理系统已经成为了企业生产过程中不可或缺的一部分。而在MES管理系统建设过程中,精益管理的思想也越来越受到重视。本文将探讨如何运用精益管理的思想,提高MES系统的建设水平,以更好地服务于企业的生…

故障诊断实验台 | PT600电机电气故障实验台

很多同学因为实验数据而被困扰,目前数据来源有3方面,公开实验数据集、校企合作项目实际数据、自制实验台数据。 公开实验数据集被用烂了,容易被审稿人质疑; 校企合作项目实际数据缺少故障数据,数据需保密,…

SDK和API区别

B站视频:https://www.bilibili.com/video/BV1dA411K7Ps/?spm_id_from333.337.search-card.all.click&vd_source85701dd8aeeae2aaac0299ea796f19bb 假设你在开发一款移动端兽医诊所应用 Lets say youre developing a mobile app for a veterinarian clinic 想法…

vue3怎么创建项目

1、先安装node.js 自行去node.js官网下载 2、创建一个文件夹 终端打开命令 3、执行命令 vue create 项目名称(必须是英文开头,可以英文数字) 4、选择Manually select features(自定义配置) 5、选择Router(后面要使用,也可以先不安装&am…

Sanic​——Python函数变成API的神器

今天给大家介绍一个超好用的框架,迅速将Python函数变成API,它就是最近越来越火的异步Web框架Sanic。 1. Sanic简介 Sanic 是 Python3.7 Web 服务器和 Web 框架,旨在提高性能。它允许使用 Python3.5 中添加的async/await语法,这使…

GPT4应用讲解,如何获取ChatGPT账号

参加每人均可获得1个独立可永久使用的ChatGPT账号,并提供不用fanqiang使用的方法。 前言 GPT对于每个科研人员已经成为不可或缺的辅助工具,不同的研究领域和项目具有不同的需求。例如在科研编程、绘图领域: 1、编程建议和示例代码: 无论你…

GFS分布式文件系统实验

GFS概念 Gluster 是一个开源的分布式文件系统 它是一个C/S架构 由存储服务器、客户端以及NFS/Samba存储网关组成 没有元数据服务器组件,这有助于提升整个系统的性能,可靠性和稳定性 文件系统定义 负责实现数据存储方式,以什么格式保存在…

idea 2022 一个工作空间下导入git项目 后 无法导入第二个git项目

idea 2022 一个工作空间下导入git项目 后 无法导入第二个git项目 如图所示 我导入了一个git项目后,菜单栏出现了一个git按钮 找不到 导入git项目的按钮了 方式1、 通过idea设置 打开全局设置 如下图 把git先改为none,保存 保存后就可以看到 VCS按钮 导入…

程序员架构修炼:架构设计概要,业务、应用、技术、数据架构

作为一个程序员,了解架构设计是非常重要的,它能够帮助你更好地理解如何构建大型软件系统,并能够满足用户的需求。在架构设计中,通常会涉及到四种不同类型的架构:业务架构、应用架构、技术架构和数据架构。 1、业务架构…

鸿蒙初体验

下载与安装DevEco Studio 在HarmonyOS应用开发学习之前,需要进行一些准备工作,首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网,单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和…

迅雷下载宝-openwrt-kodexplorer

下载仓库 雾渺/KODExplorer - Gitee.com 下载后解压上传文件/mnt/mmcblk0/kodexplorer ip:8080访问

NFTScan | 10.09~10.15 NFT 市场热点汇总

欢迎来到由 NFT 基础设施 NFTScan 出品的 NFT 生态热点事件每周汇总。 周期:2023.10.09~ 2023.10.15 NFT 热点资讯 01/ DeLabs:所有 DeGods 已重置回 Season1,用户可于本周将 y00ts 免费迁移至以太坊 10 月 9 日,DeGods & y…

分布式存储系统在智慧广电8K场景的融合应用

一、前言 广电行业的业务系统主要包含收录、编辑、播出、媒资管理、归档等环节,即通常所说的采、编、播、管、存业务,每个环节几乎都伴随着频繁的数据调取和使用。尤其在8K高清时代,视频码流已经从高清的100Mbps前进到400-2000 Mbps&#xf…

2022最新版-李宏毅机器学习深度学习课程-P14 批次(batch)与动量(momentum)

一、batch 回顾epoch、shuffle batch size大还是小?都有好处 大batchsize的好处 由于GPU有并行计算的能力,左边并不一定用时更长 反而是,batch size小的时候,要跑完一个epoch所用的update时间更长,所以时间方面的比较…

反序列化 apache mq 反序列化

1.解释一下apache mq Apache activemq 开放源代码消息中间件 java代码 操作系统只要有java虚拟机就可以执行 利用方法 2.文件配置不当 3.看版本 4.exp下载 5.exp使用 6.利用条件 7.反弹shell 加密解密 8.执行并且发送 9.利用成功 10.反弹shell成功 参照 【vul…

如何利用Web应用防火墙应对未知威胁

网络安全是一个永恒的话题,尤其是在未知威胁不断涌现的情况下。Web应用防火墙(WAF)是企业网络安全防线的重要组成部分,能够帮助企业在面对未知威胁时采取有效的防护措施。本文将探讨如何利用Web应用防火墙应对未知的网络威胁。 一…

京东商品详情API接口(item_get-获得京东商品详情接口),京东API接口系列

京东商品详情API接口(item_get-获得京东商品详情接口),京东API接口可获取到商品链接,商品ID,商品标题,商品价格,品牌名称,店铺昵称,sku规格,sku属性&#xff…

私域社群团购直播活动报名小程序开发

新零售SaaS系统,一款超级好用的私域社交团购小程序。支持团购、直播,有统计、收款、发货等功能。直播配合开团转化率更高,一款真正的私域卖货神器。 社交化电商用户踊跃参与:在卖货的同时,体现众多消费者的参与动态更…

nginx之正向代理、反向代理和负载均衡(重点)

一、nginx的两种代理方式 1、七层代理(http协议) 2、四层代理(tcp/udp流量转发) 二、四层代理和七层代理 (一)四层代理:基于tcp/udp协议的ip和端口转发数据包 1、四层代理无法获取http请求…