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

Echarts可视化

news 2026/4/3 0:50:36

echarts是一个基于javascripts的开源可视化图表库

画图步骤：

1.引入echarts.js文件

<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

也可将文件下载到本地通过src引入。

2. 准备一个呈现图表的盒子：

<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>

3.基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('dd'));

4. 准备配置项：

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};

5. 将配置项设置给echarts实例对象：

myChart.setOption(option);

这样我们就可以获得一个echarts图了

柱形图：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head><body><div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('dd'));option = {xAxis: {type: 'category',  //类目轴data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'  //数据轴},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart.setOption(option);</script>
</body></html>

相关配置项：title  //标题组件

xAxis   //x轴

yAxis  //y轴

series  //系列列表，通过type绝定图表类型

相关配置可查看echats官网：https://echarts.apache.org/zh/option.html#title

折线图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script><style>.box{width: 900px;height: 600px;background-color:aqua;}
</style>
</head>
<body><div class="box"></div><script>var myChart = echarts.init(document.querySelector(".box"));var options = {title:{text:'条形图',subtext:'',textstyle:{color:'red',fontSize:12},textAlign:'center',left:'50%'},xAxis:{type:'category',data:['浏览量','点赞数','转发数','收藏数','评论量'],name:'x轴'},yAxis:{type:'value',name:'y轴'},series:[{type:'line',data:[5000,800,200,300,150],},{type: 'line',data:[12000,2500,200,800,400],},]}myChart.setOption(options);</script>
</body>
</html>

散点图：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head>
<body><div id="scatter" style="width: 600px; height: 400px;"></div><script>var scatter_chart = echarts.init(document.getElementById("scatter"));var scatter_option = {title:{text:"Echart"},xAxis:{},yAxis:{},series:[{symbolSize:20,data:[[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6, 7.24],[4.2, 4.62],[12.0, 10.84],[7.0, 4.82],[5.0, 5.58],],type:'scatter'}]};scatter_chart.setOption(scatter_option);</script>
</body>
</html>

饼图：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body><div id="app" style="width: 600px;height: 400px;"></div><script>// 3.将type设置为pievar myCharts = echarts.init(document.querySelector('#app'))// 需要设置给饼图的数据var sl = [{name: '2018',value: '30'},{name: '2019',value: '10'},{name: '2020',value: '10'},{name: '2021',value: '10'},{name: '2022',value: '20'},{name: '2023',value: '10'}]var option = {legen:{show:true,align:'left',left:0,},// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了series: [{type: 'pie',data: sl,radius:["20%","60%"],   // roseType:"area"}]}myCharts.setOption(option)</script>
</body>
</html>

 roseType:"area" 可以将饼图设置为玫瑰图。

相关文章：

Echarts可视化

echarts是一个基于javascripts的开源可视化图表库 画图步骤&#xff1a; 1.引入echarts.js文件 <script src" https://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js"></script> 也可将文件下载到本地通过src引入。 2. 准备一个呈现图表的…...

编程日记 2024/9/8 5:12:19

验证linux gpu是否可用

通过torch验证 import torchprint(torch.__version__) # 查看torch当前版本号 print(torch.version.cuda) # 编译当前版本的torch使用的cuda版本号 print(torch.cuda.is_available()) # 查看当前cuda是否可用于当前版本的Torch&#xff0c;如果输出True&#xff0c;则表示可…...

编程日记 2024/9/8 5:11:18

JavaScript( 简介)

目录 含义 实例 js代码位置 1 外部引入js文件 2 在 HTML 中&#xff0c;JavaScript 代码必须位于 标签之间。 小结 含义 js是一门脚本语言&#xff0c;能够改变HTML内容 实例 getElementById() 是多个 JavaScript HTML 方法之一。 本例使用该方法来“查找” id"d…...

编程日记 2024/9/8 5:09:15

Linux中的编译器gcc/g++

目录 一、gcc与g的区别 1.gcc编译器使用 2.g编译器使用 二、gcc/g编译器编译源文件过程 1.预处理 2.编译 3.汇编 4.链接 三、静态库和动态库 1.库中的头文件作用 2.静态库 3.动态库 四、gcc编译器的一些选项命令 一、gcc与g的区别 gcc用于编译C语言代码&#xff…...

编程日记 2024/9/8 5:07:13

RK3568安装部署Docker容器

设置华为镜像源 sudo sed -i s/huaweicloud.com/ustc.edu.cn/g /etc/apt/sources.list更新索引 rootok3568:/home/forlinx# sudo apt-get update Hit:1 http://ports.ubuntu.com/ubuntu-ports focal InRelease Hit:2 http://ports.ubuntu.com/ubuntu-ports focal-updates InR…...

编程日记 2024/9/8 5:06:12

Ubuntu 常用指令和作用解析

Ubuntu 常用指令和作用解析 Ubuntu 是一种常见的 Linux 发行版&#xff0c;它利用了 Unix 的力量和开源软件的精神。掌握常用指令可以提高我们在使用 Ubuntu 时的效率。本文将介绍一些常见的指令及其用途。 目录 更新与安装软件文件与目录操作系统信息与资源监控用户与权限管…...

编程日记 2024/9/8 5:03:09

2024国赛数学建模C题完整论文：农作物的种植策略

农作物种植策略优化的数学建模研究&#xff08;完整论文&#xff0c;持续更新&#xff0c;大家持续关注&#xff0c;更新见文末名片 &#xff09; 摘要 在本文中&#xff0c;建立了基于整数规划、动态规划、马尔科夫决策过程、不确定性建模、多目标优化、相关性分析、蒙特卡洛…...

编程日记 2024/9/8 5:02:08

【语音告警】博灵智能语音报警灯JavaScript循环播报场景实例-语音报警灯|声光报警器|网络信号灯

功能说明 本文将以JavaScript代码为实例&#xff0c;讲解如何通过JavaScript代码调用博灵语音通知终端 A4实现声光语音告警。主要博灵语音通知终端如何实现无线循环播报或者周期播报的功能。 本代码实现HTTP接口的声光语音播报&#xff0c;并指定循环次数、播报内容。由于通知…...

编程日记 2024/9/8 5:01:07

指针与函数（三）

三 .指向函数的指针 函数和数组一样,经系统编译后,其目标代码在内存中连续存放,其名字本身就是一个地址,是函数的入口地址。C语言中,指针可以指向变量,也可以指向函数。 指问函数的指针的定义格式为 类型名&#xff08;*指针变量名&#xff09;参数表 其中参数表为函数指针所…...

编程日记 2024/9/8 4:59:05

锐捷网络2025届校园招聘正式启动，【NTA6dni】！

锐捷网络2025届校园招聘正式启动&#xff0c;内推码[NTA6dni]。 原文链接点这 投递链接点这 祝大家面试顺利&#xff0c;offer多多~ 有问题大家可以评论&#xff0c;互相交流~...

编程日记 2024/9/8 4:58:04

共享内存喜欢沙县小吃

旭日新摊子好耶&#xff01; 系统从0开始搭建过通信方案&#xff0c;本地通信方案的代码&#xff1a;System V IPC 里面有共享内存、消息队列、信号量 共享内存 原理 两个进程有自己的内存区域划分&#xff0c;共享内存被创建出的时候是归属操作系统的&#xff0c;还是通过…...

编程日记 2024/9/8 4:55:01

五、Build构建配置:jar包换名、自行定义编译规则

&#xff08;1&#xff09;jar包换名&#xff1a;finalName &#xff08;2&#xff09;自行定义编译规则&#xff08;通常不用&#xff09; Maven约定的规则就是java目录下写java代码&#xff0c;resources目录下写配置文件。 遵循规则&#xff0c;Maven会帮忙做编译。 如若…...

编程日记 2024/9/8 4:54:00

Html、Css3动画效果

文章目录 第九章 动画9.1 transform动画9.2 transition过渡动画9.3 定义动画 第九章 动画 9.1 transform动画 transform 2D变形 translate()&#xff1a;平移函数&#xff0c;基于X、Y坐标重新定位元素的位置 scale()&#xff1a;缩放函数&#xff0c;可以使任意元素对象尺…...

编程日记 2024/9/8 4:51:57

【AIStarter：AI绘画、设计、对话】零基础入门：Llama 3.1 + 千问2快速部署

对于希望在本地环境中运行先进语言模型的用户来说&#xff0c;Llama 3.1和千问2是非常不错的选择。本文将详细介绍如何在本地部署这两个模型&#xff0c;让你能够快速开始使用。 前期准备 确保你的计算机具备足够的存储空间和计算能力。安装Python环境以及必要的库&#xff0…...

编程日记 2024/9/8 4:50:56

多机编队—(1)ubuntu 配置Fast_Planner

文章目录 前言一、Could not find package ...二、使用error: no match for ‘operator’...总结 前言 最近想要做有轨迹引导的多机器人编队&#xff0c;打算采用分布式的编队架构&#xff0c;实时的给每个机器人规划出目标位置&#xff0c;然后通过Fast_Planner生成避障路径&…...

编程日记 2024/9/8 4:49:55

【数学建模经验贴】国赛拿到赛题后，该如何选题？

2024“高教社杯”全国大学生数学建模竞赛即将开赛。这可能是很多同学第一次参加国赛&#xff0c;甚至是第一次参加数学建模比赛。 那么赛题的公布也就意味着比赛的开始&#xff0c;也将是我们所要面对的第一个问题——选题。在国赛来临的前夕&#xff0c;C君想和大家聊一聊容易…...

编程日记 2024/9/8 4:48:54

如何快速融入大学课堂

快速融入大学课堂是适应大学生活的重要一步。以下是一些实用的建议&#xff0c;帮助你快速融入大学课堂并取得良好的学习效果。 ### 1. 提前准备 - **课前预习**&#xff1a;在上课前预习课程内容&#xff0c;了解基本概念和知识点&#xff0c;这样在课堂上更容易跟上老师的讲…...

编程日记 2024/9/8 4:47:53

el-table行编辑

需求&#xff1a;单点行编辑并且请求接口更新数据&#xff0c;表格中某几个字段是下拉框取值的&#xff0c;剩下的是文本域&#xff1b;展示的时候 需要区分下拉框编码还是中文 故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意 <el-tablere…...

编程日记 2024/9/8 4:45:51

OpenSSL Windows编译

目录 1. 源码下载2. vs2022编译 1. 源码下载 源码地址 2. vs2022编译 (1) 将“VS2022安装目录VC\Auxiliary\Build\“设置为PATH环境变量&#xff0c;启动cmd命令行&#xff08;一定要先设置环境变量&#xff09;。 (2)在cmd下进入VS2013安装目录vs2022\VC\Auxiliary\Build&…...

编程日记 2024/9/8 4:44:50

优化LabVIEW中TCP通信速度的方法

在LabVIEW中&#xff0c;TCP通信速度较慢可能由多种因素导致&#xff0c;如数据包处理延迟、阻塞式读取或数据解析效率低等。通过调整读取模式、优化数据处理逻辑、以及使用并行处理结构&#xff0c;可以显著提升TCP通信的速度&#xff0c;使其接近第三方调试工具的表现。LabVI…...

编程日记 2024/9/8 4:42:47

macOS安全分析利器：OpenClaw控制SecGPT-14B检测恶意文件

macOS安全分析利器&#xff1a;OpenClaw控制SecGPT-14B检测恶意文件 1. 为什么需要本地化的恶意文件检测 作为一名长期使用macOS的安全工程师&#xff0c;我一直在寻找一种既能保护隐私又能高效检测恶意文件的方案。传统的云查杀服务虽然方便&#xff0c;但涉及到上传敏感文件…...

编程新知 2026/4/3 0:36:30

智能样式识别Word文档智能排版批量处理文档格式统一设置字体、字号、颜色、段落间距高效统一样式排版工具

大家好&#xff0c;我是大飞哥。在日常办公中&#xff0c;批量处理 Word 文档格式是最耗时的工作之一&#xff0c;尤其是多份文档样式不统一、表格错乱、图片排版混乱&#xff0c;手动调整不仅效率极低&#xff0c;还很难做到规范一致&#xff0c;严重影响办公效率 —— 这款Wo…...

编程新知 2026/4/2 23:43:33

保姆级教程：在GD32F103上用Keil MDK5和FreeRTOS 202411.00创建你的第一个多任务LED闪烁项目

保姆级教程&#xff1a;在GD32F103上用Keil MDK5和FreeRTOS 202411.00创建你的第一个多任务LED闪烁项目 嵌入式开发的世界里&#xff0c;实时操作系统&#xff08;RTOS&#xff09;正变得越来越重要。对于刚接触GD32系列芯片或FreeRTOS的开发者来说&#xff0c;如何快速搭建一个…...

编程新知 2026/4/2 22:13:54

昇腾310B4 NPU实战：用MindX SDK给Unet模型推理加速，并与CPU/ONNX Runtime性能全面对比

昇腾310B4 NPU实战&#xff1a;Unet模型推理加速与多平台性能深度评测 边缘计算设备的选择往往需要在性能、功耗和成本之间寻找平衡点。当我们手头有一块搭载昇腾310B4 NPU的香橙派AIpro开发板时&#xff0c;如何充分发挥其8TOPS算力优势&#xff1f;本文将以医学图像分割中广泛…...

编程新知 2026/4/2 22:03:35

TX12 + ExpressLRS 915MHz RC链路优化与EdgeTX固件升级实战

1. 为什么选择TX12搭配ExpressLRS 915MHz系统 玩无人机的朋友都知道&#xff0c;遥控链路就像风筝线&#xff0c;距离和稳定性直接决定飞行体验。我之前用2.4GHz的RadioLink套装&#xff0c;飞到500米就开始心跳加速——信号时断时续&#xff0c;每次返航都像在赌运气。换成TX1…...

编程新知 2026/4/2 22:03:35

DynamiCrafter完全指南：从安装到生成高质量动画视频

DynamiCrafter完全指南&#xff1a;从安装到生成高质量动画视频 【免费下载链接】DynamiCrafter DynamiCrafter: Animating Open-domain Images with Video Diffusion Priors 项目地址: https://gitcode.com/gh_mirrors/dy/DynamiCrafter DynamiCrafter是一款强大的AI动…...

编程新知 2026/4/2 21:24:46

抖音批量下载工具高效应用全攻略：从单视频到批量采集的完整指南

抖音批量下载工具高效应用全攻略&#xff1a;从单视频到批量采集的完整指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallb…...

编程新知 2026/4/2 21:20:42

Kite：Kotlin/Java 通用的全自动 ORM 框架

框架特点全自动映射&#xff1a;无需手动编写 SQL&#xff0c;Kite 会自动根据实体类生成相应的数据库操作语句支持自定义 SQL&#xff1a;在需要时&#xff0c;可以编写自定义 SQL 语句&#xff0c;满足复杂查询需求&#xff0c;还可以像写代码一样写流程控制语句多数据库支持…...

编程新知 2026/4/2 21:02:26

从JDK21降到17：2025版IDEA搭建苍穹外卖项目，我踩过的那些版本坑

从JDK21降到17&#xff1a;2025版IDEA搭建苍穹外卖项目实战避坑指南 当你用最新版IDEA 2025和JDK 21打开一个要求JDK 17的项目时&#xff0c;就像穿着高跟鞋去爬山——不是不行&#xff0c;但绝对会走得很辛苦。最近在搭建苍穹外卖项目时&#xff0c;我就深刻体会到了这种&quo…...

编程新知 2026/4/2 19:23:26

百度智能云千帆AppBuilder API调用全攻略：从密钥获取到实战代码示例

百度智能云千帆AppBuilder API深度集成指南&#xff1a;从密钥管理到高效调用实践 在人工智能应用开发领域&#xff0c;快速集成可靠的AI能力已成为开发者提升效率的关键。百度智能云千帆AppBuilder作为一站式AI原生应用开发平台&#xff0c;其API接口的灵活调用能力让开发者能…...

编程新知 2026/4/2 18:38:35