Apache ECharts简介和相关操作
文章目录
- 一、Apache ECharts介绍
- 二、快速入门
- 1.下载echarts.js文件
- 2.新建index.html文件
- 3.准备一个DOM容器用于显示图表
- 4.完整代码展示
- 5.相关配置
- 三、演示效果
- 四、总结
一、Apache ECharts介绍
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
常见效果展示：
1.柱形图：
2.饼形图：
3.折线图
不管是那种图形，其本质就是数据
二、快速入门
Apache Echarts官方提供的快速入门：https://echarts.apache.org/handbook/zh/get-started/
1.下载echarts.js文件
echarts.js文件下载链接：https://www.jsdelivr.com/package/npm/echarts
2.新建index.html文件
代码如下（示例）：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head>
</html>
3.准备一个DOM容器用于显示图表
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>
4.完整代码展示
<!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>
5.相关配置
- xAxis
直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现 - yAxis
直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制 - series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
三、演示效果
四、总结
使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。
相关文章：
Apache ECharts简介和相关操作
文章目录 一、Apache ECharts介绍二、快速入门1.下载echarts.js文件2.新建index.html文件3.准备一个DOM容器用于显示图表4.完整代码展示5.相关配置 三、演示效果四、总结 一、Apache ECharts介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观…...
怎么看待工信部牵头推动人形机器人发展
1，工信部牵头，而不是科技部牵头，有些蹊跷，科技部应该比工信部更了解科技发展趋势，工信部比科技部更了解工业发展趋势，这是用工业倒逼科技进步。 2，人的优势不是身体，而是精神&#…...
Hikari源码分析
总结 连接池关系 1、HikariDataSource构建函数->生成HikariPool对象->调用HikariPool的getConection得到连接 2、HikariPool包含ConcurrentBag 3、ConcurrentBag保存连接：三个集合threadList、sharedList、handoffQueue 4、ConcurrentBag管理连接࿱…...
修改YOLOv5的模型结构
YOLOv5 模型结构 C3模块结构图 修改目标 修改目标是移除C3模块concat后的卷积操作 YOLOv5的模型存储在项目目录下的models目录中。 一些以yaml为后缀的文件保存了一些模型的超参数，通过不同的参数，形成了yolov5s,yolov5n,yolov5l等不同参数等级&#…...
React 与 React Native 区别
React 与 React Native 区别 同样的实现一个点击按钮，更换姓名和年龄的值的功能。两部分代码不同 React代码 import React, { useState } from react import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useState(何遇)const [a…...
Android 12.0 系统system模块开启禁用adb push和adb pull传输文件功能
1.使用场景 在进行12.0的系统定制化开发中，在一些产品中由于一些开发的功能比较重要，防止技术点外泄在出货产品中，禁用 adb pull 和adb push等命令 来获取系统system下的jar 和apk 等文件，所以需要禁用这些命令，接下来实现这些功能 2.系统system模块开启禁用adb push和ad…...
基于单片机的衣物消毒清洗机系统设计
收藏和点赞，您的关注是我创作的动力 文章目录 概要 一、系统总体设计2.2 功能分析2.3 系统框架设计 二、硬件电路设计3.1 电源模块的设计 三、 软件设计4.1 系统整体流程4.4 软件整体流程实物图 四、 结论五、 文章目录 概要 基于单片机的衣物消毒清洗机可以应用在…...
将 UniLinks 与 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）
让我们使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。 一步一步的指导！ 我是 Pedro Dionsio，是葡萄牙 InspireIT 公司的 Flutter 开发人员，我写这个 UniLinks 教程的座右铭是： Firebase DynamicLinks 已被弃用࿰…...
Spring-Spring 之底层架构核心概念解析
BeanDefinition BeanDefinition表示Bean定义，BeanDefinition中存在很多属性用来描述一个Bean的特点。比如： class，表示Bean类型scope，表示Bean作用域，单例或原型等lazyInit：表示Bean是否是懒加载initMeth…...
电脑版WPS怎么将更新目录加到快速访问栏
效果 步骤 开启首页的“标签”、快速访问、在最近置顶展示然后选择好目录点击右边的设置 》 添加标签选中“快速访问”，确定并关闭完成 相关 WPS怎样设置快速访问工具栏 WPS怎样设置快速访问工具栏-百度经验WPS怎样设置快速访问工具栏,WPS怎样设置快速访问工具栏…...
保障效率与可用，分析Kafka的消费者组与Rebalance机制
系列文章目录 上手第一关，手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么，以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析，打破面试难关 防止消息丢失与消息重复——Kafka可…...
“1-5-15”原则：中国联通数字化监控平台可观测稳定性保障实践
一分钟精华速览 “只知道系统有问题，但是找不到问题到底出在哪里”，这几乎是大家都面临过、或正在面临的问题。用户在投诉，但是我的指标都是正常的，到底是哪一环出问题了？ 本文详细介绍了中国联通在智能运维领域的应用…...
LinkedList详解-Deque接口链表实现方案
简介 LinkedList实现了List和Deque接口。List是一个有序的集合，可以包含重复元素，它提供了在列表的头部、尾部或指定位置进行插入、删除和查找等操作的方法。Deque是双端队列，提供了在列表的头部和尾部进行插入和删除操作的方法。通过实现这…...
【考研数据结构代码题1】二叉搜索树的插入与查找
题目：请用C语言写出二叉树的二叉链表结构，并编写一个函数在二叉搜索树中可以搜索给定的关键字 难度：★ 二叉树的二叉链表结构 #include<stdio.h> #include<stdlib.h> //二叉树的结点结构 typedef struct Node{int data;//存放结…...
世微 平均电流型降压恒流驱动器 电动摩托车LED灯小钢炮驱动IC AP5218
1，来源：深圳市世微半导体有限公司 2，产品描述 AP5218 是一款 PWM工作模式, 高效率、外 围简单、内置功率管，适用于5V～100V输入的高 精度降压 LED 恒流驱动芯片。输出最大功率可达 15W，最大电流 1.5A。AP5…...
docker 下安装mysql8.0
在docker中查询mysql镜像 PS C:\Users\admin> docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL is a widely used, open-source relation……...
Android MVI架构的深入解析与对比
什么是MVI？ M：model，此处的model并不是传统的数据模块，它是指用来存储视图状态UI State的一个模块 。比如请求数据时的loading、请求失败的提示页面等UI层面的变化状态。 V：view，视图模块 I：…...
达梦数据库表空间管理常用SQL
达梦数据库表空间管理常用SQL 表空间容量分析表空间创建与扩容 查看数据库状态： select name,instance_name,status$,mode$ from v$instance; --mode$显示Primary为主库select name,status$,role$ from v$database; --status$：1 启动，2 启动…...
Flutter 组件集录 | InheritedNotifier 内置状态管理组件
theme: cyanosis 1. 前言 在上一篇 《Flutter 知识集锦 | 监听与通知 ChangeNotifier》 中，我们介绍了 ChangeNotifier 对象通知监听者的能力。并通过一个简单的模拟下载进度案例，介绍了它的使用方式： | 案例演示 | 监听-通知关系 | | --- | …...
NOIP2023模拟10联测31 涂鸦
题目大意 有一面由 n m n\times m nm个格子组成的墙，每个格子要么是黑色，要么是白色。你每次将会进行这样的操作：等概率随机选择一个位置 ( x , y ) (x,y) (x,y)和一个颜色 c c c（黑色或白色），࿰…...
【Python基础知识一】基本语法、常用数据类型等
Python基础知识： 1 标识符（Identifier）2 关键字/保留字（Keyword）3 引号4 编码5 输入输出6 行与缩进7 多行语句8 注释9 数据类型9.1 数字(Number)类型9.2 变量（variate）9.3 字符串（St…...
听听ChatGPT对IT行业的发展和就业前景的看法
🌈个人主页: Aileen_0v0🔥系列专栏:PYTHON学习系列专栏💫"没有罗马,那就自己创造罗马~" 目录 (1)判断素数 写法1: 写法2: (2)计算1-100的偶数之和 写法1: 写法2: (3)计算1-100的奇数之和 (4)多层循环 IT行业哪个方向比较…...
〖程序员的自我修养 - 认知剖析篇⑤〗- 选择前端还是后端？
人之所以会觉得迷茫，本质上是欠缺对自己的一个控制力、识别庞杂信息、去伪存真的独立思考与认知能力。 说明：该文属于 程序员的自我修养 专栏，购买任意白宝书体系化专栏可加入易编程社区，早鸟价订阅模式除外。福利：加入社区的小伙伴们，除了可以获取博主所有付费专栏的阅读…...
Rust语言初步
文章目录 安装与测试变量条件语句和函数数组和元组循环 安装与测试 可以从官网直接下载。下载rustup-init并运行之后，会打开命令行，选1默认安装，然后不出意外就安装完了。 安装完成后按照惯例查看一下版本，如不报错就算成功。 …...
BIMILLC算法源码解析
论文链接：https://arxiv.org/abs/1607.02533 源码出处：https://github.com/Harry24k/adversarial-attacks-pytorch/tree/master 源码 import torch import torch.nn as nnfrom ..attack import Attackclass BIM(Attack):r"""BIM or iter…...
Android STR研究之五
前言： 在前四篇中初步介绍了开机流程，STR流程，唤醒流程，这里讲下STR的问题点 Android STR研究之一-CSDN博客 Android STR研究之二-CSDN博客 Android STR研究之三-CSDN博客 Android STR研究之四-CSDN博客 问题1：进入STR…...
python3+requests接口自动化测试实例详细操作
前段时间由于公司测试方向的转型，由原来的web页面功能测试转变成接口测试，之前大多都是手工进行，利用postman和jmeter进行的接口测试，后来，组内有人讲原先web自动化的测试框架移驾成接口的自动化框架，使用的…...
在Node.js中，什么是中间件（middleware）？它们的作用是什么？
聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...
当函数参数为一级指针，二级指针
当函数参数为一级指针，二级指针 在讲述内容之前，先讲四点重要知识 1.当传入参数时，函数形参会立即申请形参的内存空间，函数执行完毕后，形参的内存空间立即释放掉。 1.指针是存放其他变量地址的变量。指针有自己的内…...
Hydra post登录框爆破
文章目录 无token时的Hydra post登录框爆破带Token时的Hydra post登录框爆破 无token时的Hydra post登录框爆破 登录一个无验证码和token的页面，同时抓包拦截 取出发送数据包：usernameadb&password133&submitLogin 将用户名和密码替换 userna…...