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

Charts 教程：创建交互式图表的基础

news 来源：原创 2025/6/6 18:55:06

ECharts 是一个开源的、基于 JavaScript 的数据可视化库，它可以帮助你快速创建交互式的图表。无论是简单的柱状图、折线图，还是复杂的地图和关系图，ECharts 都能够轻松应对。本文将带你了解如何在你的网页中使用 ECharts 创建图表，并介绍一些基本概念和常见的配置项。

1. 什么是 ECharts？

ECharts（Enterprise Charts）是由百度团队开发的一个开源数据可视化库，使用了 Canvas 技术来渲染图表，支持图表的交互效果、动画展示以及丰富的配置。它不仅支持各种常见的图表类型，如柱状图、折线图、饼图、散点图等，还支持地图、关系图等高级图表。

2. 如何在项目中引入 ECharts？

在开始使用 ECharts 之前，首先需要将 ECharts 引入到你的项目中。如果你使用的是 HTML 文件，可以通过 CDN 或本地引入 ECharts。

2.1 通过 CDN 引入 ECharts

你可以通过以下方式从 CDN 引入 ECharts 库：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts Example</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body><div id="chart" style="width: 600px; height: 400px;"></div><script>var chart = echarts.init(document.getElementById('chart'));var option = {title: {text: 'ECharts 示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20, 40]}]};chart.setOption(option);</script>
</body>
</html>

.2 通过 NPM 安装

如果你使用的是 React、Vue 或者其他现代 JavaScript 框架，可以通过 NPM 安装 ECharts：

npm install echarts --save

然后在 JavaScript 文件中引入：

import * as echarts from 'echarts';

3. 创建一个简单的柱状图

接下来，我们将展示如何使用 ECharts 创建一个简单的柱状图。

3.1 配置图表的基本选项

在 ECharts 中，图表的显示和行为通过 option 配置项来控制。以下是一个简单的柱状图的配置：

var option = {title: {text: '2024 年销售数据',subtext: '本年度销售情况',left: 'center'},tooltip: {trigger: 'item'},xAxis: {type: 'category',data: ['一月', '二月', '三月', '四月', '五月', '六月']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110],type: 'bar'}]
};

3.2 渲染图表

将图表配置项传递给 echarts.init() 方法，并使用 setOption() 方法渲染图表。

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

4. ECharts 图表的交互性

ECharts 强大的交互性是它的一大特点。你可以轻松添加提示框、图例、点击事件等功能。

4.1 提示框（Tooltip）

在上述柱状图中，我们使用了 tooltip 配置项来启用鼠标悬停时显示提示框。你可以通过自定义 tooltip 的内容、样式等进一步调整它的显示。

tooltip: {trigger: 'axis',formatter: function (params) {var result = params[0].name + '<br>';params.forEach(function (item) {result += item.seriesName + ': ' + item.value + '<br>';});return result;}
}

4.2 图例（Legend）

ECharts 允许通过图例来控制多个系列的显示与隐藏。你可以在图表的 legend 配置中设置图例内容和样式。

legend: {data: ['销量', '利润']
}

4.3 点击事件（Click Event）

ECharts 还支持图表点击事件。例如，我们可以为柱状图的每个柱子添加点击事件：

chart.on('click', function (params) {alert('你点击了 ' + params.name + ' 数据');
});

5. 更高级的图表：折线图和饼图

除了柱状图，ECharts 还支持多种类型的图表。下面是折线图和饼图的简单配置示例。

5.1 折线图

var option = {title: {text: '月度销售趋势'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['一月', '二月', '三月', '四月', '五月', '六月']},yAxis: {type: 'value'},series: [{data: [120, 132, 101, 134, 90, 230],type: 'line'}]
};

5.2 饼图

var option = {title: {text: '市场份额',subtext: '2024',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},series: [{name: '市场份额',type: 'pie',radius: '50%',data: [{ value: 235, name: '品牌A' },{ value: 274, name: '品牌B' },{ value: 310, name: '品牌C' },{ value: 154, name: '品牌D' }]}]
};

6. 如何自定义样式？

ECharts 允许你通过 CSS 或直接在配置项中修改图表的样式。你可以为每个图表元素设置不同的颜色、字体、边框、阴影等属性。

例如，修改柱状图的颜色和字体：

option.series[0].itemStyle = {color: '#c23531',  // 自定义颜色borderWidth: 1,borderColor: '#fff'
};
option.title.textStyle = {fontSize: 20,fontWeight: 'bold'
};

7. 总结

ECharts 是一个功能强大的数据可视化工具，支持多种图表类型，具有丰富的交互性和自定义功能。在这个简短的教程中，我们介绍了如何在网页中使用 ECharts 创建基础的柱状图、折线图和饼图，如何使用 ECharts 的交互功能以及如何自定义样式。你可以根据需要进一步了解 ECharts 的官方文档，掌握更多高级功能。

各位小伙伴还在BOSS直聘hr已读不回？！大家快试试这里！

创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！

Charts 教程：创建交互式图表的基础

ECharts 是一个开源的、基于 JavaScript 的数据可视化库，它可以帮助你快速创建交互式的图表。无论是简单的柱状图、折线图，还是复杂的地图和关系图，ECharts 都能够轻松应对。本文将带你了解如何在你的网页中使用 ECharts 创建图表&#xff0c…...

编程日记 2025/6/2 7:17:57

Jackson - JsonGenerator创建JSON、JsonParser解析JSON

以下是关于如何使用Jackson的JsonGenerator类来创建JSON内容以及如何使用JsonParser类来读取JSON内容的教程。依赖项首先，在pom.xml文件中添加以下依赖项以引入Jackson库： <dependency><groupId>com.fasterxml.jackson.core</groupI…...

编程日记 2025/5/31 0:36:31

1、选择排序 #include<iostream> #include<vector> using namespace std;void SelectSort(vector<int>& nums) {int i;int j;int minIndex;int length nums.size();if (length 0 || length 1) return;for (i 0; i < length-1; i)//遍历所有元素{…...

编程日记 2025/6/1 20:11:35

Lattice Radiant Software Lattice Propel Builder Lattice Propel 2024.1 安装

因项目需要，对Lattice 器件LIFCL-40 CrossLink进行评估先从Lattice官网下载Radiant安装包： Lattice Radiant设计软件新建工程环境...

编程日记 2025/5/28 13:09:47

【Linux系统】 Linux内核与UNIX设计哲学的结合

Linux 内核虽然不是 UNIX 的直接衍生物，但它深受 UNIX 设计哲学的影响。Linux 的开发者，尤其是 Linus Torvalds，在设计和实现 Linux 时，借鉴了 UNIX 的核心思想，使 Linux 成为一个类 UNIX 系统。以下从 UNIX 设计哲学…...

编程日记 2025/6/1 6:40:39

MKS EDGE Series RF Generators Power Solution 软件

MKS EDGE Series RF Generators Power Solution 软件...

编程日记 2025/5/30 20:45:34

【机器学习 | 基于Lasso回归和随机森林的上海链家二手房房价预测】

文章目录 🏳️‍🌈 1. 导入模块🏳️‍🌈 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 去除重复数据2.4 去除缺失数据2.5 面积、价格、单价、楼层、建筑时间数据提取2.6 朝向数据处理 🏳️‍🌈 3. 特…...

编程日记 2025/5/31 7:49:56

MyBatis-Plus分页查询方式

分页查询基本方式 SpringBootTest(classes LearningApplication.class) public class MPTest {AutowiredILearningLessonService lessonService;Testpublic void test(){/*** Page<LearningLesson>：MyBatisPlus提供的分页对象* 1：当前页数* 2&am…...

编程日记 2025/6/4 3:20:40

分布式cap

P（分区安全）都能保证，就是在C（强一致）和A（性能）之间做取舍。 （即立马做主从同步，还是先返回写入结果等会再做主从同步。类似的还有，缓存和db之间的同步。&am…...

编程日记 2025/5/29 18:26:23

【组件封装】uniapp vue3 封装一个完整的Tabs（标签页）组件教程，功能由简到杂实现讲解。

文章目录前言一、简单版Tabs代码实现： 二、下划线带动画的TabsAPI回顾：代码实现： 三、内容区域滑动切换切换动画代码实现：（2）禁用手势滑动切换（3）内容区域换为插槽四、标签栏可滚动…...

编程日记 2025/6/2 17:19:20

AI在SEO中的应用与关键词优化探讨

内容概要在当今数字化时代，人工智能（AI）技术为搜索引擎优化（SEO）带来了革命性的改变。传统的SEO主要依赖于人为的经验和判断，而AI则通过算法分析海量数据，提供更加精准和高效的方式优化关键词…...

编程日记 2025/5/30 10:58:57

JUC：Synchronized和锁升级

1. 面试题谈谈你对Synchronized的理解Sychronized的锁升级你聊聊Synchronized实现原理，monitor对象什么时候生成的？知道monitor的monitorenter和monitorexit这两个是怎么保证同步的嘛？或者说这两个操作计算机底层是如何执行的偏向锁和轻量级…...

编程日记 2025/6/3 21:43:34

如何使用锁实现多进程和多线程的并发执行的安全

多进程和多线程的并发： 多进程和多线程的并发意思是在同一段时间内，多个进程或者线程一起执行，但是这些进程或者线程的执行并不是真正意义上在同一时刻执行，而是在不同的时间里执行，因为每个CPU在同一时间只能处理同一…...

编程日记 2025/6/4 10:00:48

LabVIEW如何用运动控制卡实现伺服电机的转矩控制？

在LabVIEW中，使用运动控制卡实现伺服电机的转矩控制，通常通过以下几个步骤来完成。这里将结合LabVIEW的运动控制功能和伺服电机控制的基本原理进行详细介绍。 1. 选择合适的运动控制卡要实现伺服电机的转矩控制，首先需要一张支持伺服电…...

编程日记 2025/5/29 0:02:23

SQL面试题——百度SQL面试题无效搜索

百度SQL面试题无效搜索今天的题目是来自百度的SQL 面试题目现有一份用户搜索日志，包含用户ID，时间，用户搜索内容。定义无效搜索：如果用户下一次搜索内容中包含本次搜索内容，则认为本次搜索为无效搜索。请查询用户无效搜索记录 +---------+---------------------+--…...

编程日记 2025/6/3 13:01:42

媒体查询、浏览器一帧渲染过程

文章目录媒体查询语法示例根据视口宽度应用不同的样式根据设备像素比应用不同的样式根据方向应用不同的样式使用场景浏览器一帧的渲染过程媒体查询媒体查询（Media Query）是CSS3中的一个重要特性，它允许开发者根据设备的特定条件&#x…...

编程日记 2025/6/4 17:26:53

实习工作日志

工作日志遇到的bug 由于不熟悉Python，造成了这个bug python的浅拷贝与深拷贝，一定要创建新的变量，否则只是单纯拷贝地址...

编程日记 2025/5/27 8:23:17

JavaWeb学习--cookie和session

目录 （一）Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 （Cookie的生命） （二） Cookie的API 1.创建Cookie：new 构造方法 2.保存到客户端浏…...

编程日记 2025/5/30 15:53:29

ETCD的封装和测试

etcd是存储键值数据的服务器客户端通过长连接watch实时更新数据场景： 当主机A给服务器存储 name： 小王主机B从服务器中查name ,得到name-小王当主机A更改name 小李服务器实时通知主机B name 已经被更改成小李了。应用：服务注册与发…...

编程日记 2025/6/2 12:51:27

c++引用笔记

1 引用的基本使用 // 引用 // 作用：给变量起别名 // 语法：数据类型 &别名原名int main(int argc, char const *argv[]) {int a 10;int &b a;cout << "a " << a << endl;cout << "b " <&l…...

编程日记 2025/5/31 20:07:35

macOS运行amd64的镜像

在macOS上运行amd64（x86_64）架构的镜像，通常通过虚拟化或仿真工具来实现。例如，如果你使用的是基于Apple Silicon（M1或M2等）芯片的Mac，那么你的处理器是ARM架构的，而amd64是x86架构&…...

编程日记 2025/6/2 12:03:55

Oracle查询优化：高效实现仅查询前10条记录的方法与实践

在 Oracle 中，实现仅查询前10条记录的四种方法 1. 使用 ROWNUM 查询 ROWNUM 是 Oracle 中的伪列，用于限制返回的行数。 SELECT * FROM table_name WHERE condition AND ROWNUM < 10;condition：查询条件。ROWNUM < 10：限制…...

编程日记 2025/6/3 5:03:00

【时时三省】(C语言基础)结构体内存对齐

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省我们已经掌握了结构体的基本使用了。现在我们深入讨论一个问题：计算结构体的大小。这也是一个特别热门的考点：结构体内存对齐示例： 第一个s如果根据字…...

编程日记 2025/6/4 14:44:50

工业物联网关

工业物联网关的定义与功能定义：工业物联网关是一种在工业物联网（IIoT）系统中起到关键连接作用的设备。它位于工业现场设备（如传感器、执行器等）和上层的工业网络（如企业内部网络、云平台等）之间…...

编程日记 2025/6/2 16:26:22

Docker 安装 Yapi

Docker 安装系列 Docker已安装。 1、场景Yapi使用的MongoDB用户信息 1.1 创建自定义 Docker 网络首先，创建一个自定义的 Docker 网络，以便 MongoDB 和 YApi 容器可以相互通信 [rootflexusx-328569 data]# docker network create yapi-networ…...

编程日记 2025/6/1 6:40:42

MaxEnt模型在物种分布模拟中如何应用？R语言+MaxEnt模型融合物种分布模拟、参数优化方法、结果分析制图与论文写作

目录第一章以问题导入的方式，深入掌握原理基础第二章常用数据检索与R语言自动化下载及可视化方法第三章 R语言数据清洗与特征变量筛选第四章基于ArcGIS、R数据处理与进阶第五章基于Maxent的物种分布建模与预测第六章基于R语言的模型参数优化第七…...

编程日记 2025/6/4 4:53:42

UDE连接不上miniwiggler

PLS 的UDE 软件搭配miniwiggler硬件用来调试英飞凌的单片机是个不错的选择，比如TC275、TC387等等。英飞凌官方开发板板载了miniwiggler，非常方便。很多买了英飞凌官方开发板的同学可能会发现，使用英飞凌的mentool软件能连接上自己的板子&…...

编程日记 2025/6/4 8:24:41

Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】

化工安全关系到国计民生，近年来随着化工厂数字化改革不断推进，数字工厂逐步成为工厂安全管理的重要手段。而化工管道作为工厂设施的重要组成部分，由于其数量多、种类繁杂，一直是企业管理的重点和难点。传统的化工管廊往往缺乏详…...

编程日记 2025/6/4 15:48:12

数据结构（Doubly Linked List双向链表）

1.前言： 在计算机科学的广袤领域中，数据结构犹如构建高楼大厦的基石，它们为高效地组织、存储和处理数据提供了坚实的框架。而双向链表作为一种重要且功能强大的数据结构，在众多算法与程序设计场景中都展现出了独特的魅力与价值。…...

编程日记 2025/5/30 22:59:25

【踩坑】修复报错libcurl.so.4、LIBFFI_BASE_7.0、libssl.so.3

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ libcurl.so.4： sudo apt install curl -y LIBFFI_BASE_7.0: conda install libffi3.3 -y libssl.so.3: sudo apt install -y openssl li…...

编程日记 2025/6/2 23:53:15

【Java实现MySQL 数据库导出 Excel 表的方法详解】

MySQL 数据库导出 Excel 表的方法详解在日常开发中，我们经常需要将数据库中的数据导出为 Excel 文件，以便进行数据分析或分享给其他同事。本文将详细介绍如何从 MySQL 数据库导出数据并生成 Excel 文件，具体实现将基于 Java 语言和 Spring …...

编程日记 2025/5/30 21:00:30

CentOS 7 环境下常见的操作和配置

目录 1. CentOS 7 中的 vsftpd 配置与使用安装与启动 vsftpd 配置 vsftpd（/etc/vsftpd/vsftpd.conf） 常见命令 2. 使用 yum 包管理器 3. 安全性与防火墙配置开放端口 4. 使用 systemd 管理服务 5. SELinux 配置查看 SELinux 状态临时禁用…...

编程日记 2025/6/4 17:17:42

使用mtools搭建MongoDB复制集和分片集群

mtools介绍 mtools是一套基于Python实现的MongoDB工具集，其包括MongoDB日志分析、报表生成及简易的数据库安装等功能。它由MongoDB原生的工程师单独发起并做开源维护，目前已经有大量的使用者。 mtools所包含的一些常用组件如下： mlaunch支…...

编程日记 2025/6/4 4:43:20

基于 RNN(GRU, LSTM)+CNN 的红点位置检测（pytorch）

文章目录 1 项目背景2 数据集3 思路4 实验结果5 代码 1 项目背景需要在图片精确识别三跟红线所在的位置，并输出这三个像素的位置。其中，每跟红线占据不止一个像素，并且像素颜色也并不是饱和度和亮度极高的红黑配色，每个红线放大…...

编程日记 2025/6/1 16:13:14

35页PDF | 元数据与数据血缘落地实施（限免下载）

一、前言这份报告详细介绍了元数据与数据血缘的概念、重要性以及在企业数据中台中的应用。报告阐述了数据中台的核心价值在于整合和管理体系内的数据，以提升数据资产化能力并支持业务决策。报告还涵盖了元数据的分类（技术元数据和业务元数据&#xff0…...

编程日记 2025/6/3 5:07:59

Hyperf jsonrpc

依赖的 composer 包 composer require hyperf/json-rpc composer require hyperf/rpc-server composer require hyperf/rpc-client composer require hyperf/service-governance composer require hyperf/service-governance-consul composer require hyperf/service-gove…...

编程日记 2025/6/4 1:54:20

MYSQL PARTITIONING分区操作和性能测试

PARTITION OR NOT PARTITION IN MYSQl Bill Karwin says “In most circumstances, you’re better off using indexes instead of partitioning as your main method of query optimization.” According to RICK JAMES: “It is so tempting to believe that PARTITIONing wi…...

编程日记 2025/6/2 17:58:53