ECharts 简要介绍及简单实例代码

ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。

ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。

ECharts 遵循 Apache-2.0 开源协议,免费商用。

ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

第一个 ECharts 实例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '第一个 ECharts 实例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

ECharts 特性

ECharts 包含了以下特性:

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

  • 多种数据格式无需转换直接使用: 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。

  • 千万数据的前端展现: 通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。

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

  • 多渲染方案,跨平台使用: 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。

  • 深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

  • 多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等,传入的数据也可以是多个维度的。

  • 动态数据: 数据的改变驱动图表展现的改变。

  • 绚丽的特效: 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。

  • 通过 GL 实现更多更强大绚丽的三维可视化: 在 VR,大屏场景里实现三维的可视化效果。

  • 无障碍访问(4.0+): 支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问! 

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

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

相关文章

驾校避雷(不同地区情况不一样)

1-训练地点在哪&#xff0c;包车吗 2-学车一对一还是一对多&#xff0c;训练学时是多少(62) 3-驾校是否有自己的考场&#xff08;这里有坑&#xff0c;如果要去其他地方的话&#xff0c;小心产生的其他费用&#xff0c;问问是不是全包&#xff09; 4-费用是否包含考试费&#x…

Lwip之TCP服务端示例记录(1对多)

前言 实现多个客户端同时连接初步代码结构已经实现完成(通过轮训的方式) // // Created by shchl on 2024/3/8. // #if 1#include <string.h> #include "lwip/api.h" #include "FreeRTOS.h" #include "task.h" #include "usart.h&…

群辉docker安装sql server

安装步骤 开启群辉 SSH&#xff0c;通过 SSH 工具连接到群辉&#xff0c;运行下面的命令拉取mssql 2019 镜像 sudo docker pull mcr.microsoft.com/mssql/server:2019-latest然后在 docker 中就可以看到该镜像&#xff1a; 在群晖 docker 共享文件夹中创建 mssql2009 文件夹 …

Qt插件之输入法插件的构建和使用(二)

文章目录 主键盘搭建Google开源引擎音节分割工具类参考项目下载搭建好各个基础控件之后,就可以开发输入法的主界面和引擎了,这也是输入法的核心。 主键盘搭建 输入法的主界面本质上是一个QStackedWidget容器,将各个类型的输入键盘插入到容器中,然后根据业务需要切换不同的…

蓝桥杯刷题--python-19--归并排序,离散化,hash,逆序数

505. 火柴排队 - AcWing题库 nint(input()) alist(map(int,input().split())) blist(map(int,input().split())) mod99999997 # map c[0 for i in range (n1)] # 归并排序模板 def _MergeSort(arr,l,r,tmp): if l>r: return 0 # 分治思想 midlr>>1 # …

金现代产品方案部部长王宁,将出席“ISIG-低代码/零代码技术与应用发展峰会”

3月16日&#xff0c;第四届「ISIG中国产业智能大会」将在上海中庚聚龙酒店拉开序幕。本届大会由苏州市金融科技协会指导&#xff0c;企智未来科技&#xff08;LowCode低码时代、RPA中国、AIGC开放社区&#xff09;主办。大会旨在聚合每一位产业成员的力量&#xff0c;深入探索低…

生产管理MES系统在卫浴企业中的应用

在卫浴企业的制造过程中&#xff0c;实现透明车间管理是一个旨在提升效率、质量和可视性的重要目标。MES系统可以在卫浴企业中帮助打造透明车间&#xff0c;提升生产管理的效率和可视性。具体能实现哪些管理呢&#xff1f; 实时监控生产状态&#xff1a; MES系统可以实时监控车…

【C#杂谈】在 .NET Framework 中使用新的C#语言特性

前排提示&#xff1a;提出一个可以让 [^1] 这中语法可以在.NET Framework运行时中使用的方法 众所都周知&#xff0c;.NET Framework&#xff08;以下简称 .NF&#xff09;作为一个被微软官方确认不在继续发布新特性的运行时&#xff0c;它所对应的C#语言版本被&#xff08;官方…

RabbitMQ架构详解

文章目录 概述架构详解核心组件虚拟主机&#xff08;Virtual Host&#xff09;RabbitMQ 有几种广播类型 概述 RabbitMQ是⼀个高可用的消息中间件&#xff0c;支持多种协议和集群扩展。并且支持消息持久化和镜像队列&#xff0c;适用于对消息可靠性较高的场合 官网https://www.…

uniapp富文本编辑-editor-vue2-vue3-wangeditor

前言 除了“微信小程序”&#xff0c;其他小程序想要使用editor组件实现富文本编辑&#xff0c;很难vue3项目 官方组件editor&#xff0c;在初始化时有点麻烦&#xff0c;建议搭配第三方组件wangeditor 写在前面 - editor组件缺少editor-icon.css 内容另存为editor-icon.css…

Nginx反向代理详解

1. 什么是反向代理 反向代理是一种服务器代理的方式&#xff0c;它代理了客户端的请求并将请求转发给后端服务器&#xff0c;然后将后端服务器的响应返回给客户端。在这个过程中&#xff0c;客户端并不直接与后端服务器通信&#xff0c;而是通过反向代理服务器来实现请求转发和…

深入理解 Java 循环结构:while、do while、for 和 for-each 循环

Java 循环 循环可以执行一个代码块&#xff0c;只要达到指定的条件。循环很方便&#xff0c;因为它们节省时间&#xff0c;减少错误&#xff0c;并使代码更易读。 Java While 循环 while 循环会循环执行一个代码块&#xff0c;只要指定的条件为真&#xff1a; 语法 while …

整站下载保存为mhtml

整站下载保存为mhtml 代码 MHTML格式具有独特的优点&#xff0c;它可以完整保留原始网页的所有布局元素以及嵌入图片&#xff0c;无需外部依赖即可呈现原始网页内容&#xff0c;增强了可读性和便捷性。下文将展示如何运用自动化技术&#xff0c;从一个网站的首页出发&#xff0…

Spring Boot 部署在Windows

1、Spring Boot项目打成jar包。利用maven插件&#xff08;多模块项目只需在服务模块添加插件&#xff09; <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId>…

服务器租用和托管的区别

目前对于服务器要求相对高的企业会希望使用独立服务器来运行自己的网站&#xff0c;而在选择独立服务器业务事&#xff0c;是使用服务器托管还是服务器租用这两种方法时&#xff0c;许多刚进入网络或者传统行业的从业者&#xff0c;都不太了解什么是服务器&#xff0c;现在我来…

数据推送解决方案调研

需求 文档编辑类型的需求&#xff0c;左侧是菜单栏&#xff0c;右侧是内容块&#xff0c;现在的需求时&#xff0c;如果多人同时编辑这个方案&#xff0c;当添加章节/调整章节顺序/删除章节时&#xff0c;其他用户能够及时感知到。 解决方案调研 前端轮询 最简单的方案&…

Go语言:一门简洁高效的编程语言

Go语言简介 Go语言&#xff0c;又称Golang&#xff0c;是一种由Google开发的静态编译型编程语言。Go语言语法简洁&#xff0c;易于学习&#xff0c;同时具有C语言的运行效率。Go语言被广泛应用于Web开发、云计算、系统编程等领域。 Go语言的特点 Go语言具有以下特点&#xf…

系统安全保证措施-word

【系统安全保证措施-各支撑材料直接套用】 一、 身份鉴别 二、 访问控制 三、 通信完整性、保密性 四、 抗抵赖 五、 数据完整性 六、 数据保密性 七、 应用安全支撑系统设计 软件全套资料下载进主页。

JProfiler详解 JVM性能监测内存泄露分析工具

JProfiler详解 JProfiler简介主要功能特点使用场景注意事项使用案例使用步骤Could not verify ssh-ed25519 host key with fingerprint 问题解决内存泄露分析 JProfiler简介 JProfiler是一款业界领先的Java性能分析工具&#xff0c;由ej-technologies公司开发&#xff0c;专门…

STM32自学☞WDG(看门狗)及其案例

一、WDG简介 由于看门狗的代码很少所以就直接在main主函数中写了&#xff0c;没单独建文件 二、独立看门狗 涉及的按键可参考之前的key.c和key.h文件 独立看门狗配置流程&#xff1a; 1.开启时钟&#xff08;LSI&#xff09; 2.解除IWDG_PR和IWDG_RLR的写保护 3.写入预分频和重…