Apache ECharts | 一个数据可视化图表库

文章目录

  • 1、简介
    • 1.1、主要特点
    • 1.2、使用场景
  • 2、安装
    • 方式一:从下载的源代码或编译产物安装
    • 方法二:从 npm 安装
    • 方法三:⭐定制安装echarts.js
  • 3、使用

官网:
  英语:https://echarts.apache.org/en/index.html
  中文:https://echarts.apache.org/zh/index.html
需要echarts.js文件,可以私信我发送🌹

1、简介

Apache ECharts 是一个由百度团队开源的,基于 JavaScript 的数据可视化图表库。它广泛用于生成交互式图表,如折线图、柱状图、饼图、雷达图、地图、热力图、散点图等。ECharts 提供了丰富的选项,可以轻松实现复杂的数据可视化需求。

1.1、主要特点

  1. 丰富的图表类型:ECharts 支持包括但不限于条形图、折线图、面积图、饼图、散点图、热力图、地图、树图、桑基图和箱型图等多种图表类型。
  2. 高度可定制:用户可以自定义图表的几乎所有元素,包括颜色、字体、样式、布局等,以适应不同的界面风格。
  3. 强大的交互性:ECharts 支持图表元素的点击、拖拽、缩放等交互操作,使得数据展示更为生动和易于理解。
  4. 动态数据:可以轻松地向图表添加、删除或修改数据,图表会动态更新。
  5. 跨平台和兼容性:ECharts 基于 HTML5 Canvas,兼容所有现代浏览器和移动设备。
  6. 国际化:支持多语言,方便国际化应用。
  7. 扩展性:ECharts 提供了丰富的 API 和自定义选项,用户可以根据需要扩展图表库。

1.2、使用场景

  • 数据报告和仪表板
  • 数据分析和科学研究
  • 金融、经济数据展示
  • 社交网络数据可视化
  • 地理信息系统
  • 实时数据监控

2、安装

方式一:从下载的源代码或编译产物安装

image.png
链接:https://archive.apache.org/dist/echarts/
image.png

方法二:从 npm 安装

命令:npm install echarts

方法三:⭐定制安装echarts.js

image.png

3、使用

先引入:
image.png
编写代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.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>

浏览器打开:
image.png
总结: 使用Echarts,重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据,然后响应给前端来展示图表。

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

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

相关文章

LINUX基础第十一章:文件系统与日志服务管理

目录 一.LINUX文件系统 1.inode表和block &#xff08;1&#xff09;inode &#xff08;2&#xff09;block 2.查看inode号命令 3.Linux系统文件三种主要时间属性 4.磁盘空间还剩余很多但无法继续创建文件 5.inode大小 二.日志 1.日志保存位置 2.日志文件的分类 &am…

C++:多态究竟是什么?为何能成为面向对象的重要手段之一?

C&#xff1a;多态究竟是什么&#xff1f;为何能成为面向对象的重要手段之一&#xff1f; 前言一、多态的概念二、多态的定义及实现2.1 多态的构成条件2. 2 虚函数2.3 虚函数的重写2.3.1 虚函数重写的例外1&#xff1a;协变(基类与派生类虚函数返回值类型不同)2.3.2 虚函数重写…

java spring mvc 初探 web搭建过程详解

提前准备安装tomcat 设备&#xff1a;mac 第一步&#xff1a;下载 进入官网下载压缩包 注意&#xff1a;如果jdk版本是1.8&#xff0c;则tomcat需要v8才行&#xff0c;否则会报错 https://tomcat.apache.org/ 第二步&#xff1a;解压 解压后路径 /Users/you/Library/tomcat…

HAL——SPI

学习目标 掌握SPI配置方式掌握SPI读写操作 学习内容 需求 SPI配置 打开SPI1,选中全双工模式。观察下方自动生成的引脚&#xff0c;是否和自己开发板引脚对应。 修改引脚&#xff0c;来动右侧芯片引脚视图&#xff0c;找到开发板对应引脚&#xff0c;进行修改。 观察修改后的…

git秘钥过期 ERROR: Your SSH key has expired

文章目录 1、错误提示Your SSH key has expired2、登录Github确认3、重新设置秘钥 1、错误提示Your SSH key has expired 使用git命令时遇到Github 的 SSH Key秘钥过期&#xff0c;提示错误ERROR: Your SSH key has expired 2、登录Github确认 首先登录Github查看&#xff…

【STM32】STM32学习笔记-USART串口数据包(28)

00. 目录 文章目录 00. 目录01. 串口简介02. HEX数据包03. 文本数据包04. HEX数据包接收05. 文本数据包接收06. 预留07. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便捷&#xff0c;因此大部分电子设备都支持…

网络安全B模块(笔记详解)- Web渗透测试

Web渗透测试 1.通过渗透机Kali1.0对服务器场景PYsystem20192进行Web渗透测试(使用工具w3af的对目标Web服务器进行审计),在w3af的命令行界面下,使用命令列出所有用于审计的插件,将该操作使用的命令作为Flag值提交; 进入kali命令控制台中使用命令w3af_console进入w3af命令…

深入了解pnpm:一种高效的包管理工具

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…

【C++期末】酒店住宿信息管理系统(含easyX)

诚接计算机专业编程作业(C语言、C、Python、Java、HTML、JavaScript、Vue等)&#xff0c;如有需要请私信我&#xff0c;或者加我的企鹅号&#xff1a;1404293476 本文资源&#xff1a;https://download.csdn.net/download/weixin_47040861/88725363 目录 1.题目要求 2.实现效…

杨中科 .NET Core 第一部分.NET Standard

1)不讲C#基础语法和NET基础类库(不需要学过ASPNET等)。需要懂HTML、JavaScript、数据库等。后续会录制基础视频 2)使用Visual Studio 2019 .NET .NET Framework Windows 程序 .NET Core 跨平台程序 .NET Standard 上述两者 遵从的标准 .NET5 开始上述统称为 .NET 新建.NET Sta…

pve多台物理机虚拟化 pve虚拟机优势

Proxmox VE是一个运行虚拟机和容器的平台。基于Debian Linux&#xff0c;完全开源。为了获得最大的灵活性&#xff0c;实现了两种虚拟化技术——基于内核的虚拟机(KVM)和基于容器的虚拟化(LXC)。一个主要的设计目标是使管理尽可能容易。运行在单个节点上使用Proxmox VE&#xf…

龍运当头--html做一个中国火龙祝大家龙年大吉

🐉效果展示 🐉HTML展示 <body> <!-- partial:index.partial.html --> <svg><defs><g id=

格密码基础:对偶格(超全面)

目录 一. 对偶格的格点 1.1 基本定义 1.2 对偶格的例子 1.3 对偶格的图形理解 二. 对偶格的格基 2.1 基本定义 2.2 对偶格的格基证明 三. 对偶格的行列式 3.1 满秩格 3.2 非满秩格 四. 重复对偶格 五. 对偶格的转移定理&#xff08;transference theorem&#xff…

现代 C++ 及 C++ 的演变

C 活跃在程序设计领域。该语言写入了许多新项目&#xff0c;而且据 TIOBE 排行榜数据显示&#xff0c;C 的受欢迎度和使用率位居第 4&#xff0c;仅次于 Python、Java 和 C。 尽管 C 在过去二十年里的 TIOBE 排名都位居前列&#xff08;2008 年 2 月排在第 5 名&#xff0c;到…

GPT实战系列-大模型为我所用之借用ChatGLM3构建查询助手

GPT实战系列-https://blog.csdn.net/alex_starsky/category_12467518.html 如何使用大模型查询助手功能&#xff1f;例如调用工具实现网络查询助手功能。目前只有 ChatGLM3-6B 模型支持工具调用&#xff0c;而 ChatGLM3-6B-Base 和 ChatGLM3-6B-32K 模型不支持。 定义好工具的…

【Gin实战教程】快速入门

Gin是一个轻量级的Web框架&#xff0c;使用Go语言开发。它具有高性能、易用性和灵活性的特点&#xff0c;是构建可扩展的Web应用程序的理想选择。 首先&#xff0c;Gin是一个高性能的框架。它基于Go语言的原生HTTP包进行开发&#xff0c;利用了Go语言的并发特性和协程模型&…

聊聊 Java 集合框架中的 ArrayList

其实 Java 集合框架也叫做容器&#xff0c;主要由两大接口派生而来&#xff0c;一个是 collection,主要存放对象的集合。另外一个是Map, 存储着键值对&#xff08;两个对象&#xff09;的映射表。 下面就来说说 List接口&#xff0c;List存储的元素是有序、可重复的。其下有三个…

JAVA实现文件上传至阿里云

注册阿里云账号后,开通好对象存储服务&#xff08;OSS&#xff09;&#xff0c;三个月试用 阿里云登录页 (aliyun.com) 目录 一.创建Bucket 二.获取AccessKey&#xff08;密钥&#xff09; 三.参考官方SDK文件&#xff0c;编写入门程序 1.复制阿里云OSS依赖&#xff0c;粘贴…

Swift单元测试Quick+Nimble

文章目录 使用QuickNimble1、苹果官方测试框架XCTest的优缺点2、选择QuickNimble的原因&#xff1a;3、QuickNimble使用介绍集成&#xff1a;Quick关键字说明&#xff1a;Nimble中的匹配函数等值判断&#xff1a;使用equal函数是否是同一个对象&#xff1a;使用beIdenticalTo函…

【Verilog】期末复习——分别画出下面两个程序综合后的电路图/reg型数据和wire型数据的区别

系列文章 数值&#xff08;整数&#xff0c;实数&#xff0c;字符串&#xff09;与数据类型&#xff08;wire、reg、mem、parameter&#xff09; 运算符 数据流建模 行为级建模 结构化建模 组合电路的设计和时序电路的设计 有限状态机的定义和分类 期末复习——数字逻辑电路分…