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.mzph.cn/news/610149.shtml

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

相关文章

Vue-4、单向数据绑定与双向数据绑定

1、单向数据绑定 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>数据绑定</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/…

linux(ubuntu)中crontab定时器命令详解 以及windows中定时器

linux&#xff08;ubuntu&#xff09;中crontab定时器命令详解 crontab 是一个用于创建、编辑和管理用户的定时任务的命令&#xff0c;它可以让用户在指定的时间自动执行指定的命令或脚本。 基本语法 -e&#xff1a;编辑用户的 crontab 文件&#xff1b;-l&#xff1a;列出用…

【机器学习】常见算法详解第2篇:K近邻算法各种距离度量(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习&#xff0c;伴随浅显易懂的数学知识&#xff0c;让大家掌握机器学习常见算法原理&#xff0c;应用Scikit-learn实现机器学习算法的应用&#xff0…

Java18:网络编程

一.对象序列化&#xff1a; 1.对象流&#xff1a; ObjectInputStream 和 ObjectOutputStream 2.作用&#xff1a; ObjectOutputSteam&#xff1a;内存中的对象-->存储中的文件&#xff0c;通过网络传输出去 ObjectInputStream:存储中的文件&#xff0c;通过网络传输出去…

【漏洞复现】ActiveMQ文件上传漏洞(CVE-2016-3088)

Nx01 产品简介 Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件。ActiveMQ是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高可用、出色性能、可扩展、稳定和安全保障。 Nx02 漏洞描述 Ap…

vercel部署twikoo后评论收不到通知邮件问题解决方法

&#x1f4cc; 前言&#xff1a;本文主要是总结一下在vercel部署twikoo后收不到评论邮件通知问题的解决方法&#xff0c;本人在各种查资料无果后最终去twioo的git官方项目的issue中找到某位大佬给出的原因以及解决方案&#xff0c;故做此记录&#xff0c;希望对遇到此问题的同学…

用python实现检查一个文件夹中所有word文件内容是否重复

要检查一个文件夹中所有Word文件的内容是否重复&#xff0c;你可以使用Python的python-docx库来读取Word文件的内容&#xff0c;并使用Python的集合数据结构来检查重复项。 以下是一个示例代码&#xff0c;演示如何实现这个功能&#xff1a; python复制代码 import os from d…

重学JavaScript高级(八):ES6-ES12新增特性学习

ES6-ES12新增特性学习 ES6–对象字面量增强 属性的简写方法的简写计算属性名 let name "zhangcheng" //我想让sum作为obj的key值 let objKey "sum" let obj {//属性名的简写name//等同于name:name//方法的简写running(){}//等同于running:function()…

可视化试题(二)

1、fb5-6 关系数据具有( 关联 )性和( 分布 )性 2、fb8-4 从可视化系统设计的角度出发&#xff0c;通常需要根据系统将要完成的任务的类型选择交互技术。按照任务类型分类可以将数据可视化中的交互技术分为选择、&#xff08; 重新配置 &#xff09;、重新编码…

ERD助力研发资产沉淀研发提效

一、从痛点中思考答案 痛点一&#xff1a;复杂系统的设计和逻辑碎片化散落&#xff0c;缺少沉淀导致系统后期维护、迭代以及架构升级都非常困难。 痛点二&#xff1a;由于新需求或新项目导致的系统的老旧逻辑梳理往往耗费大量人力&#xff0c;甚至造成人才的流失。 痛点三&a…

React 入门 - 05(响应式与事件绑定)

本章内容 目录 一、响应式设计思想二、React 中的事件绑定 继上一节我们简单实现一个 TodoList来更加了解编写组件的一些细节。本节继续这个案例功能的完成。 一、响应式设计思想 1、在原生的 JS中&#xff0c;如果要实现点击”提交“按钮就将输入框的内容添加至页面列表中&…

什么是协议和什么是OSI模型,以及两者之间的关系

目录 协议 1.协议 2.OSI模型 &#xff08;1&#xff09;什么是OSI模型 &#xff08;2&#xff09;OSI模型和协议之间的关系 总结 &#xff08;3&#xff09;示意图 协议 1.协议 就是双方通过协商&#xff0c;需要共同遵守的约定 协议就是规则&#xff0c;是约定 http…

数字战场上的坚固屏障:雷池社区版(WAF)

黑客的挑战 智能语义分析算法&#xff1a; 黑客们常利用复杂技术进行攻击&#xff0c;但雷池社区版的智能语义分析算法能深入解析攻击本质&#xff0c;即使是最复杂的攻击手法也难以逃脱。 0day攻击防御&#xff1a; 传统防火墙难以防御未知攻击&#xff0c;但雷池社区版能有效…

Spark八:Spark性能优化

Spark性能调优 Spark调优的方法&#xff0c;包括RDD使用、文件读取&#xff0c;partition 学习资料&#xff1a;https://mp.weixin.qq.com/s/caCk3mM5iXy0FaXCLkDwYQ 一、Spark调优之RDD算子调优 1.1 RDD复用 在对RDD进行计算时&#xff0c;要避免相同的算子和计算逻辑下对…

【MySQL】ANY函数 的巧用(筛选字段 > ANY(语句) 和 筛选字段 < ANY(语句))

力扣题 1、题目地址 1355. 活动参与者 2、模拟表 表&#xff1a;Friends Column NameTypeidintnamevarcharactivityvarchar id 是朋友的 id&#xff0c;并且在 SQL 中&#xff0c;是该表的主键name 是朋友的名字activity 是朋友参加的活动的名字 表&#xff1a;Activiti…

从头开始构建大型语言模型

了解如何从头开始构建大型语言模型&#xff0c;从而创建、训练和调整大型语言模型&#xff01;LLMs 在“从头开始构建大型语言模型”中&#xff0c;你将了解如何从内到外LLMs工作。在这本富有洞察力的书中&#xff0c;畅销书作家塞巴斯蒂安拉施卡 &#xff08;Sebastian Raschk…

计算机科学速成课【学习笔记】(3)——布尔逻辑和逻辑门

本集课程的B站链接 3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates_哔哩哔哩_bilibili3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates是【计算机科学速成课】[40集全/精校] - Crash Course Computer Science的第3集视频&#xff0c;该合集共计40集&#xff…

当需要视频监控技术升级时,应该如何操作呢?

在当今社会&#xff0c;信息技术的飞速发展为我们提供了前所未有的安全和管理工具&#xff0c;其中视频监控系统无疑是其中一项引人注目的成果。 视频监控系统不仅提高了安全性和生产效率&#xff0c;同时也为社会的可持续发展提供了有力支持。 客户案例 工业生产管理优化 广…

复试 || 就业day13(2024.01.09)算法篇

文章目录 前言统计一致字符串的数目盒子中小球的最大数量唯一元素的和最长的美好子字符串***仅执行一次字符串交换能否使两个字符串相等 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#…

将dumpbin从Visual Studio中抠出来,并使用dumpbin查看exe和dll库的依赖关系

目录 1、初步说明 2、在开发的机器上使用dumpbin工具查看dll库的依赖关系 3、将dumpbin.exe从Visual Studio中抠出来 3.1、找到dumpbin.exe文件及其依赖的dll文件 3.2、在cmd中运行dumpbin&#xff0c;提示找不到link.exe文件 3.3、再次运行dumpbin.exe提示找不到mspdb10…