Charts 教程:创建交互式图表的基础
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 创建图表,…...
VTK知识学习(20)- 数据的存储与表达
1、数据的存储 1)、vtkDataArray VTK中的内存分配采用连续内存,可以快速地创建、删除和遍历,称之为数据数组(DataArray),用类 vtkDataArray 实现。数组数据的访问是基于索引的,从零开始计数。 以 vtkFloatArray 类来说明如何在 …...
springboot网站开发-使用redis作为定时器控制手机号每日注册次数
springboot网站开发-使用redis作为定时器控制手机号每日注册次数!为了避免,某些手机号,频繁的申请注册,开启了redis数据库配置的定时器模式。下面是设计代码的案例展示。 1: package com.blog.utils;import org.slf4…...
IntelliJ+SpringBoot项目实战(28)--整合Beetl模板框架
在前面的文章里介绍过freemarker,thymeleaf模板引擎,本文介绍另一个性能超高的模板引擎---Beetl,据说此模板引擎的性能远超Freemarker。官网的说法是,Beetl 远超过主流java模板引擎性能(引擎性能5-6倍于FreeMarker,2倍…...
Kafka-Connect源码分析
一、上下文 《Kafka-Connect自带示例》中我们尝试了零配置启动producer和consumer去生产和消费数据,那么它内部是如何实现的呢?下面我们从源码来揭开它神秘的面纱。 二、入口类有哪些? 从启动脚本(connect-standalone.sh&#…...
项目五 李白个人生平(资源)
本项目旨在能够灵活运用整章知识点设计页面。本项目创建了“唐朝诗人群像”网站的第三个页面——即李白个人生平页面,主要完成其 HTML部分。 【项目目的】 灵活运用HTML 基本标记。掌握在 HTML页面中嵌入多媒体对象的方法。【项目内容】 利用HTML标记对网页进行结…...
计算机视觉与各个学科融合:探索新方向
目录 引言计算机视觉与其他学科的结合 与医学的结合与机械工程的结合与土木工程的结合与艺术与人文的结合发文的好处博雅知航的辅导服务 引言 计算机视觉作为人工智能领域的重要分支,正迅速发展并渗透到多个学科。通过与其他领域的结合,计算机视觉不仅…...
数据分析类论文通过stata进行数据预处理(一)
一:导入数据 打开Stata命令窗口,输入以下命令: use "文件路径\数据文件名.dta", clear其中,.dta是Stata的数据文件格式。clear选项用于在打开新数据文件前关闭当前数据集。 以下是一些导入不同格式数据的方法&#x…...
力扣——1.返回字符串中第一个唯一的字符;2.把字符串转换成整数(C++)
1.返回字符串中第一个唯一的字符 1.1题目描述 给定一个字符串s ,找到它的第一个不重复的字符,并返回它的索引 。如果不存在,则返回 -1 。 示例: 1.2思路 这里提供两种思路:第一种是利用哈希表,先遍历一…...
M-LAG【根桥方式】
1.M-LAG不是有单向隔离机制天然防环吗,为什么还要使用STP? 答:因为M-LAG设备下面不是只接服务器,也不是和所有下联设备组成M-LAG,和没有组成M-LAG的设备可能会造成环路。 2.为什么要关闭peer-link接口的生成树计算&a…...
新书速览|循序渐进Node.js企业级开发实践
《循序渐进Node.js企业级开发实践》 1 本书内容 《循序渐进Node.js企业级开发实践》结合作者多年一线开发实践,系统地介绍了Node.js技术栈及其在企业级开发中的应用。全书共分5部分,第1部分基础知识(第1~3章)…...
Xlsxwriter生成Excel文件时TypeError异常处理
在使用 XlsxWriter 生成 Excel 文件时,如果遇到 TypeError,通常是因为尝试写入的值或格式与 XlsxWriter 的限制或要求不兼容。 1、问题背景 在使用 Xlsxwriter 库生成 Excel 文件时,出现 TypeError: “expected string or buffer” 异常。此…...
【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处?
【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处? 重要性:★★★ 💯 NLP Github 项目: NLP 项目实践:fasterai/nlp-project-practice 介绍:该仓库围绕着 NLP 任务模型的设计、训练、优化…...
2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析
2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析 完整代码请私聊 博主 # 一、背景 肥料是农业生产中一种重要的生产资料,其生产销售必须遵循《肥料登记管理办法》,依法在农业行政管理部门进行登记。各省、自治区、直辖市人民政府农业行政主管部门主…...
网络原理之 IP 协议
目录 1. IP 协议报文格式 2. 网段划分 3. 地址管理 1) 动态分配 2) NAT 机制 (网络地址转换) 3) IPv6 4. 路由选择 1. IP 协议报文格式 IP 协议是网络层的重点协议。 网络层要做的事情,主要就是两方面: 1) 地址管理 制定一系列的规则ÿ…...
在 Spring Boot 项目中使用 Thymeleaf 时,通常情况下,你需要配置热加载(Hot Reload)来在开发过程中更快速地看到页面的变化。
配置步骤: 1. 添加 DevTools 依赖 在 pom.xml 中添加 spring-boot-devtools 依赖。DevTools 提供了自动重启、LiveReload、模板热加载等功能。 <dependencies><!-- Spring Boot DevTools (用于热加载) --><dependency><groupId>org.spri…...
arm-linux GPIO控制-脚本及shell格式
以下是针对BCM编号27, 28, 29, 30, 31的shell命令 shell方式 导出GPIO引脚 echo 27 > /sys/class/gpio/export echo 28 > /sys/class/gpio/export echo 29 > /sys/class/gpio/export echo 30 > /sys/class/gpio/export echo 31 > /sys/class/gpio/export 设…...
Go 语言基础知识语法
很早听人说过一句话:“每年学习(接触)一门新的编程语言”,这听起来可能有点不太现实,但是其实很多种语言都是相通的。掌握新的编程语言不仅仅是增加职业工具箱中的工具,更是一种扩展我们思维方式、解决问题…...
贪心算法part05
文章参考来源代码随想录 (programmercarl.com) 56. 合并区间 本题和前几题类似,都是判断上一个元素的右边界与当前元素的左边界大小关系 但是需要注意是:本题需要更新结果数组元素的右边界,因此比较的是数组最后一个元素右边界与当前元素左…...
02、SpringMVC核心(上)
一、RequestMapping注解 @Target({ElementType.TYPE, ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @Documented @Mapping @Reflective({ControllerMappingReflectiveProcessor.class}) public @interface RequestMapping {String name() default "";…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
