当前位置： 首页 > news >正文

图形报表ECharts

news 2026/2/10 8:02:34

图形报表ECharts

1 图形报表ECharts

1.1 ECharts简介-富客户端图表库

ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用JavaScript实现的数据可视化工具，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。

官网：<Apache ECharts>

下载地址：<下载 - Apache ECharts> 哪个版本都行!!!

下载完成可以得到如下文件：

解压上面的zip文件：

我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了

1.2 ECharts官方实例

ECharts提供了很多官方实例，我们可以通过这些官方实例来查看展示效果和使用方法。

官方实例地址：<Examples - Apache ECharts>

可以点击具体的一个图形会跳转到编辑页面，编辑页面左侧展示源码（js部分源码），右侧展示图表效果，如下：

要查看完整代码可以点击右下角的Download按钮将完整页面下载到本地。

通过官方案例我们可以发现，使用ECharts展示图表效果，关键点在于确定此图表所需的数据格式，

然后按照此数据格式提供数据就可以了，我们无须关注效果是如何渲染出来的。

在实际应用中，我们要展示的数据往往存储在数据库中，所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。

通过点击就看到代码和效果：

而当我们要使用的使用直接去实例中找一个图表通过修改其中的js就能完成我们想要的功能。

1.3 5分钟上手ECharts

我们可以参考官方提供的5分钟上手ECharts文档感受一下ECharts的使用方式，地址如下：

(https://echarts.apache.org/handbook/zh/get-started/)>

第一步：创建vue页面并引入echarts.js文件

第二步：在页面中准备一个具备宽高的DOM容器。

第三步：然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

效果如下：

相关文章：

图形报表ECharts

图形报表ECharts1 图形报表ECharts1.1 ECharts简介-富客户端图表库ECharts缩写来自Enterprise Charts&#xff0c;商业级数据图表&#xff0c;是百度的一个开源的使用JavaScript实现的数据可视化工具&#xff0c;可以流畅的运行在PC和移动设备上&#xff0c;兼容当前绝大部分浏…...

编程日记 2023/4/18 23:09:15

便捷式储能电源核心技术--单相逆变器设计

便捷式储能电源核心技术–单相逆变器设计 1.逆变器的规格参数 输入电压直流400V输出电压交流rms220V开关频率10kHz滤波电容6.23uF控制方式单极性倍频2.视频学习链接 视频学习链接 3.主电路仿真设计...

编程日记 2023/4/21 0:30:46

Gamma矫正

Gamma 曲线Gamma校正被使用在8位RGB图中。用来解决在有限的存储空间中保存尽可能多的人类感受敏感的色彩内容。Gamma 矫正Gamma校正的方式就是采样时,和输出到显示器给人类看时,对亮度进行的调整.如采样时 Gamma1/2.2 调亮Gamma&#xff0c;如显示时 Gamma2.2 调暗Gamma实际亮度…...

编程日记 2023/4/25 0:54:27

速懂cookie，session，token

文章目录cookiesessiontoken区别cookie 是浏览器提供的一种能力&#xff0c;可以在每次发起请求前&#xff0c;带上cookie里面的内容&#xff08;一些key&#xff0c;value值&#xff09; 分类&#xff1a; 会话级cookie&#xff1a;默认情况&#xff0c;就是会话级cookie&…...

编程日记 2023/4/25 0:54:25

javaEE初阶 — HTML 中的常见标签

文章目录注释标签标题标签&#xff1a;h1 h6段落标签&#xff1a;p换行标签&#xff1a;br格式化标签图片标签&#xff1a;img1. img 的 alt 属性2. img 的 title 属性3. width 与 heigth 属性用来描述图的尺寸超链接标签&#xff1a;a表格标签列表标签表单标签1. from 标签2. …...

编程日记 2023/4/25 0:54:22

MySQL慢查询

2 慢查询 2.1 慢查询介绍 MySQL的慢查询日志是MySQL提供的一种日志记录&#xff0c;它用来记录在MySQL中响应时间超过阀值的语句&#xff0c;具体指运行时间超过long_query_time值的SQL&#xff0c;则会被记录到慢查询日志中。具体指运行时间超过long_query_time值的SQL&…...

编程日记 2023/4/24 20:33:42

tensorflow【import transformers 报错】

目录 一、安装 安装好了tensorflow,但是import时候报错&#xff1a; import transformers 报错 一、安装 &#xff08;1&#xff09;创建环境&#xff1a; conda create -n [name] python3.3-3.7 &#xff08;2&#xff09;激活环境&#xff1a; conda activate [name] …...

编程日记 2023/4/24 20:33:40

JMU软件20 计算机网络复习

文章目录题型单位换算第一章协议与划分层次、网络协议的三个组成要素&#xff0c;分层的思想等协议网络协议的三个组成要素分层的思想⭐计算机网络体系结构OSI 的七层协议TCP/IP 的四层协议五层协议发送时延、传播时延、总时延、往返时间RTT计算第二章 物理层传输媒体导向性传输…...

编程日记 2023/4/24 20:33:37

Java基础之《dubbo（1）—dubbo基础入门》

一、为什么要使用dubbo 1、dubbo是什么 dubbo是一个分布式服务框架&#xff0c;致力于提供高性能和透明化的RPC远程服务调用方案&#xff0c;以及SOA服务治理方案。 2、dubbo有何特点 &#xff08;1&#xff09;远程通讯&#xff1a;提供透明化的远程方法调用&#xff0c;提供…...

编程日记 2023/4/24 20:33:35

HTML注入的一种攻击思路（超链接替换为点击验证，现在常见）

目录 背景 利用方法 举一反三 场景1：截获 TOKEN 场景2：截获后台信息 总结...

编程日记 2023/4/24 20:33:33

Redis-6集群

文章目录前言Redis集群原理搭建Redis集群集群拓展后记前言 前两期介绍和搭建了Redis的主从复制架构和哨兵模式&#xff0c;虽然哨兵模式能够实现自动故障转移主备切换&#xff0c;一定程度上提高了系统的容错性 但这两种架构模式都不能解决单节点的并发压力和物理上线的问题&…...

编程日记 2023/4/17 12:58:50

Spring Cloud学习笔记：基础知识

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育 目录1、Spring Cloud 简介2、Eureka3、建立Spring Cloud项目3.1、启动Server3.1.1、dependency3.1.2、配置文件3.1.3、Server端启动代码3.2、启动Client3.2.1、dependency3.2.2、配置文件3.3.3、Client端启动代码3…...

编程日记 2023/4/17 14:07:34

农产品销售系统/商城，可运行

文章目录项目介绍一、项目功能介绍1、用户模块主要功能包括&#xff1a;2、商家模块主要功能包括&#xff1a;3、管理员模块主要功能包括&#xff1a;二、部分页面展示1、用户模块部分功能页面展示2、商家模块部分功能页面展示3、管理员模块部分功能页面展示三、部分源码四、底…...

编程日记 2023/4/24 20:33:31

【Java开发】JUC进阶 05：函数式接口、ForkJoin

1 四大函数式接口函数式接口&#xff1a;只有一个抽象方法的接口&#xff0c;只要是函数式接口&#xff0c;就可以用lambda表达式简化例如Runnable&#xff1a;FunctionalInterface public interface Runnable {public abstract void run(); }框架底层大量应用函数式接口&#…...

编程日记 2023/4/24 20:33:29

Nginx支持quic协议

第一种方式&#xff1a;Nginx官方nginx-quic搭建 通过部署Nginx官方的QUIC分支来实现的浏览器和nginx-quic服务器粗略的HTTP3通信。 1、下载BoringSSL BoringSSL 是由谷歌开发,从 OpenSSL 中分离的一个分支。BoringSSL 是 Chrome/Chromium、Android&#xff08;但它不是 NDK 的…...

编程日记 2023/4/24 20:33:27

笔记 - Java 内存结构与模型

-- Java里内存结构与内存模型是两种概念 一、Java内存结构&#xff1a; HeapMemory - 堆内存Java Stacks - 栈内存 &#xff08;运行时&#xff09;Method Area - 方法区Native Method Stack - 本地方法栈 真实和系统打交道的地方Jit Compiler - 将java运行指令编译成机器指令G…...

编程日记 2023/4/21 5:06:25

C#基础教程12 数组

文章目录 C# 数组（Array）C# 中的数组声明数组初始化数组赋值给数组访问数组元素C# 数组细节C# 数组（Array） 数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合，通常认为数组是一个同一类型变量的集合。 声明数组变量并不是声明 number0、number1…...

编程日记 2023/4/24 20:33:25

Android中级——屏幕和绘图

屏幕和绘图屏幕系统屏幕密度独立像素密度dp单位转换XML绘图&#xff08;需放在Drawable&#xff09;BitmapShapeLayerSelector绘图技巧CanvasLayerPorterDuffXfermodeShaderPathEffectSurfaceView屏幕 屏幕大小&#xff1a;指屏幕对角线长度&#xff0c;单位为寸分辨率&#x…...

编程日记 2023/4/22 7:42:31

Linux - 第6节 - 动态库和静态库

1.静态库与动态库概念 静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时候把库的代码拷贝到可执行文件中。程序运行的时候将不再需要静态库。动态库&#xff08;.so&#xff09;&#xff1a;程序在运行的时候才去链接动态库的代码&#xff0c;多个程序共享使用…...

编程日记 2023/4/24 6:44:11

【Java学习笔记】12.Character 类及String 类

前言 本章介绍Java的Character 类和String 类。 Java Character 类 Character 类用于对单个字符进行操作。 Character 类在对象中包装一个基本类型 char 的值 实例 char ch a;// Unicode 字符表示形式 char uniChar \u039A; // 字符数组 char[] charArray { a, b, c, d…...

编程日记 2023/4/24 6:44:09

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2026/1/24 6:44:11

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04