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

数据可视化-ECharts Html项目实战（5）

news 2025/6/23 18:47:19

 在之前的文章中，我们学习了如何设置滚动图例，工具箱设置和插入图片。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢

数据可视化-ECharts Html项目实战（4）-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/qq_49513817/article/details/136918036?spm=1001.2014.3001.5501今天的文章，会正式进入ECharts工具组建的学习，带着大家在VS code中设置工具箱，设置滚动标题和插入照片。

目录

一、知识回顾

二、散点图

三、雷达图

拓展-不同类型图表的特点

一、知识回顾

滚动图例需要把我们legend属性设置为scroll

设置完成后是这样的

而工具箱（box）的设置就比较多了，只要记住上一篇文章结尾的表格，多练多用，肯定能学会。

最后就是我们的图片插入。需要创建image文件夹，将图片放进去。最后使用icon方法调用。

最后，开始今天的学习吧

二、散点图

将图表设置为散点图(scatter)，您需要修改series数组中每个对象的type属性，将属性更改为scatter。此外，散点图通常不需要step属性，因为该属性用于定义线图如何连接数据点。

    type: 'scatter',

就像这样，把它插入到代码中，是这样的：

<!DOCTYPE html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option={title:{text:'景区门票价格',textStyle:{color:'red'},left:15,top:0//subtext:'2024年3月13日'},tooltip: {//提示框组建trigger: 'axis',backgroundColor:'#ffccff',//提示框背景颜色borderColor:'#cc33cc',//边框颜色borderWidth:'3'//边框宽度},toolbox: {//工具箱show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},legend:{type:"scroll",data:['黄鹤楼','张家界','九寨沟','东湖','故宫'],left:260,top:"bottom",},calculable: true,  xAxis: [  {  type: 'category',  data: ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年']  },  ],  yAxis: [  {  type: 'value'  },  ],  series: [  {  name: '故宫',  type: 'scatter', // 改为散点图  data: [120, 182, 191, 145, 167, 178, 189]  },  {  name: '张家界',  type: 'scatter', // 改为散点图  data: [245, 247, 267, 278, 289, 310, 320]  },  {  name: '九寨沟',  type: 'scatter', // 改为散点图  data: [255, 234, 276, 321, 345, 367, 380]  },  {  name: '东湖',  type: 'scatter', // 改为散点图  data: [150, 199, 226, 178, 145, 188, 210]  },  {  name: '黄鹤楼',  type: 'scatter', // 改为散点图  data: [178, 189, 199, 209, 219, 229, 239]  },  ],  
};myChart.setOption(option);</script> 
</body>
</html>

那运行一下看看效果。

根据图片，我们也可以知道散点图能够直观地显示数据点的分布情况，帮助用户快速识别数据中的模式、趋势或异常值。

 快去试试吧

三、雷达图

雷达图（也被称为蜘蛛网图），设置雷达图需要特定的配置，包括定义雷达图的指示器（indicator）数组，以及设置 series 类型为 'radar'。

radar: {  // 雷达图指示器  indicator: [  { name: '2013年', max: 400 },  { name: '2014年', max: 400 },  { name: '2015年', max: 400 },  { name: '2016年', max: 400 },  { name: '2017年', max: 400 },  { name: '2018年', max: 400 },  { name: '2019年', max: 400 }  ],  name: {  textStyle: {  color: '#fff',  backgroundColor: '#999',  borderRadius: 3,  padding: [3, 5]  }  }  },  series: [  {  name: '游客数量',  type: 'radar',  // 雷达图数据  data : [  {  value : [120, 182, 191, 145, 167, 178, 189],  name : '故宫'  },  {  value : [245, 247, 267, 278, 289, 310, 320],  name : '张家界'  },  {  value : [255, 234, 276, 321, 345, 367, 380],  name : '九寨沟'  },  {  value : [150, 199, 226, 178, 145, 188, 210],  name : '东湖'  },  {  value : [178, 189, 199, 209, 219, 229, 239],  name : '黄鹤楼'  }  ]  }  ]  
};

把它加到我们的代码中试试效果。

可以看到，我们需要的效果出现了，和一个蜘蛛网一样。

<!DOCTYPE html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option={title:{text:'景区门票价格',textStyle:{color:'red'},left:15,top:0//subtext:'2024年3月13日'},tooltip: {//提示框组建trigger: 'axis',backgroundColor:'#ffccff',//提示框背景颜色borderColor:'#cc33cc',//边框颜色borderWidth:'3'//边框宽度},toolbox: {//工具箱show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},legend:{type:"scroll",data:[{name:'黄鹤楼',icon:'image/1.jpg',},'张家界','九寨沟','东湖','故宫'],left:260,top:"bottom",},radar: {  // 雷达图指示器  indicator: [  { name: '2013年', max: 400 },  { name: '2014年', max: 400 },  { name: '2015年', max: 400 },  { name: '2016年', max: 400 },  { name: '2017年', max: 400 },  { name: '2018年', max: 400 },  { name: '2019年', max: 400 }  ],  name: {  textStyle: {  color: '#fff',  backgroundColor: '#999',  borderRadius: 3,  padding: [3, 5]  }  }  },  series: [  {  name: '游客数量',  type: 'radar',  // 雷达图数据  data : [  {  value : [120, 182, 191, 145, 167, 178, 189],  name : '故宫'  },  {  value : [245, 247, 267, 278, 289, 310, 320],  name : '张家界'  },  {  value : [255, 234, 276, 321, 345, 367, 380],  name : '九寨沟'  },  {  value : [150, 199, 226, 178, 145, 188, 210],  name : '东湖'  },  {  value : [178, 189, 199, 209, 219, 229, 239],  name : '黄鹤楼'  }  ]  }  ]  
};  myChart.setOption(option);</script> 
</body>
</html>

快去试试吧

拓展-不同类型图表的特点

图表类型特点运用场景
柱状图数据展示清晰明了，适用于离散数据和类别数据；提供丰富的样式配置，支持交互操作和动画效果。适用于二维数据集，用于比较不同类别之间的数据大小，如地域之间的关系、销售数据对比等。
折线图适用于二维的大数据集，用于展示数据随时间或其他连续变量的变化趋势；提供丰富的样式配置、交互操作和动画效果。适用于展示时间序列数据的变化趋势，如股票价格、气温变化等。
饼图直观展示数据的比例和占比关系；提供丰富的样式配置和交互操作。适用于展示相对比例关系和部分占整体的数据，如市场份额、用户构成等。
散点图展示二维数据之间的关系，如线性关系、指数关系等；支持回归分析，可预测分析。适用于研究型图表，用于发现变量之间的关系，如身高与体重的关系、收入与教育程度的关系等。
象形柱图使用具体的图形和符号，视觉冲击力强，能够吸引观众的注意力。适用于教育、商业和市场营销、社会科学研究等领域，用于可视化数据，帮助学生记忆、辅助企业决策和展示研究结果等。
图表类型特点运用场景
雷达图适用于多维数据（四维以上）的展示，数据点一般6个左右；能够综合展示某个数据字段的情况。用于展示多维度数据分布情况，例如分析产品特性或评估员工的综合能力等。
地图提供多种地图类型，如行政地图和GIS地图；支持气泡图、面积图等多种样式；可结合地理信息进行数据可视化。用于展示与地理位置相关的数据，如销售地域分布、人口分布、气候分布等。
漏斗图适用于业务流程多的流程分析，能够显示各流程的转化率。用于分析销售漏斗、用户转化路径等，帮助识别和优化关键流程。
词云图以词语为单位，通过词频、字体大小等方式展示文本数据；视觉效果突出，易于理解。用于展示文本数据中的关键词或主题，如用户评论、新闻报道等。
热力图通过颜色深浅表示数据的密度或强度；直观展示数据的分布情况。用于展示数据在空间或时间上的分布情况，如网站点击热力图、温度分布图等。
关系图用于展示数据之间的关联关系，如节点和边的连接情况；支持多种布局方式和交互操作。用于分析社交网络、知识图谱等复杂关系数据，帮助理解数据间的联系和结构。

 

相关文章：

数据可视化-ECharts Html项目实战（5）

在之前的文章中&#xff0c;我们学习了如何设置滚动图例&#xff0c;工具箱设置和插入图片。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢 数据可视化-ECharts…...

编程日记 2024/3/24 17:17:52

C++学习之旅（二）运行四个小项目 （Ubuntu使用Vscode）

如果是c语言学的比较好的同学 可以直接跟着代码敲一遍&#xff0c;代码附有详细语法介绍&#xff0c;不可错过 一&#xff0c;猜数字游戏 #include <iostream> #include <cstdlib> #include <ctime>int main() {srand(static_cast<unsigned int>(tim…...

编程日记 2024/3/24 17:10:41

数据分析与挖掘

数据起源&#xff1a; 规模庞大&#xff0c;结构复杂&#xff0c;难以通过现有商业工具和技术在可容忍的时间内获取、管理和处理的数据集。具有5V特性&#xff1a;数量&#xff08;Volume&#xff09;&#xff1a;数据量大、多样性&#xff08;Variety&#xff09;&#xff1a…...

编程日记 2024/3/24 17:00:30

Maxwell监听mysql的binlog日志变化写入kafka消费者

一. 环境&#xff1a; maxwell:v1.29.2 (从1.30开始maxwell停止了对java8的使用&#xff0c;改为为11) maxwell1.29.2这个版本对mysql8.0以后的缺少utf8mb3字符的解码问题&#xff0c;需要对原码中加上一个部分内容 &#xff1a;具体也给大家做了总结 &#xff1a; 关于v1.…...

编程日记 2024/3/24 16:59:28

Kafka系列之：Kafka Connect REST API

Kafka系列之：Kafka Connect REST API 由于 Kafka Connect 旨在作为服务运行，因此它还提供了用于管理连接器的 REST API。此 REST API 可在独立模式和分布式模式下使用。可以使用侦听器配置选项来配置 REST API 服务器。该字段应包含以下格式的侦听器列表： protocol://host:p…...

编程日记 2024/3/24 16:57:26

DC-4靶机

一.环境搭建 1.下载地址 靶场下载地址:https://download.vulnhub.com/dc/DC-4.zip 下载不下来用迅雷下载 2.虚拟机配置 切换为nat模式 开启靶机&#xff0c;遇到所有的错误直接点重试或者是&#xff0c;开启后呈现为下图即可 二.开始渗透 1.信息收集 老规矩&#xff0c;…...

编程日记 2024/3/24 16:54:22

ideaSSM 高校公寓交流员管理系统bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea 开发 SSM 高校公寓交流管理系统是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&…...

编程日记 2024/3/24 16:53:21

Android studio添加阿里云仓库

在工程的settings.gradle中添加 repositories { google() jcenter() mavenCentral() maven { url https://jitpack.io } //阿里云镜像 maven { url https://maven.aliyun.com/repository/google } maven { url https:…...

编程日记 2024/3/24 16:49:17

每天一个数据分析题（二百二十）

在集成学习的GBDT算法中&#xff0c;每次训练新的决策树的目的是( )&#xff1f; A. 预测原始数据的标签 B. 预测上一个模型的残差 C. 降低模型的偏差 D. 降低模型的方差 题目来源于CDA模拟题库 点击此处获取答案...

编程日记 2024/3/24 16:47:15

Centos上安装Harbor并使用

harbor的安装与使用 Harbor介绍安装前的准备工作为Harbor自签发证书安装Harbor安装docker开启包转发功能和修改内核参数安装harbor扩展 Harbor 图像化界面使用说明测试使用harbor私有镜像仓库从harbor仓库下载镜像 Harbor介绍 容器应用的开发和运行离不开可靠的 镜像管理&…...

编程日记 2024/3/24 16:43:10

工作需求，Vue实现登录

加油&#xff0c;新时代打工人&#xff01; vue 2.x Element UI <template><div class"body" :style"{background-image: url(${require(/assets/images/login.png)})}"><el-form :rules"rules" ref"loginForm" :mode…...

编程日记 2024/3/24 16:42:09

【生产力】Mac 窗口布局工具 Magnet

Magnet 是一款为Mac操作系统设计的实用工具&#xff0c;旨在帮助用户更加方便地管理和组织他们的窗口布局。通过使用Magnet&#xff0c;用户可以轻松地将应用程序窗口拖放到屏幕的各个部分&#xff0c;从而实现窗口的自动排列和大小调整。这款工具特别适合需要同时处理多个应用…...

编程日记 2024/3/24 16:41:08

Linux的相关指令总结

Linux的基本命令 Linux指令是Linux操作系统的核心组成部分&#xff0c;它们为用户和管理员提供了与系统进行交互和管理的强大工具。这些指令涵盖了从基本的文件操作到复杂的系统配置和管理的各个方面。 ls指令 功能&#xff1a;用于列出指定目录中的文件和子目录名称。语法&am…...

编程日记 2024/3/24 16:40:07

HTTPS 加密原理

HTTPS 加密原理 HTTPS 加密原理常见的加密方法单向加密对称加密非对称加密 为什么需要加密&#xff1f;加密流程演变对称加密非对称加密非对称加密对称加密 存在问题解决方式数字证书生成方式 整体流程 HTTPS 加密原理 常见的加密方法 单向加密 也称为不可逆加密&#xff0c…...

编程日记 2024/3/24 16:38:06

【数据挖掘】实验4：数据探索

实验4&#xff1a;数据探索 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据探索&#xff0c;学习数据质量分类、数据特征分析和R语言的主要数据探索函数。 二&#xff1a;实验内容 1&#xff1a;数据质量分析 2&#xff1a;统计量分析 3&#xff1a;贡献度分析…...

编程日记 2024/3/24 16:36:04

PTA后缀式求值（整型版）

作者 周强 单位 青岛大学 我们人类习惯于书写“中缀式”&#xff0c;如 3 5 * 2 &#xff0c;其值为13。 (p.s. 为什么人类习惯中缀式呢&#xff1f;是因为中缀式比后缀式好用么&#xff1f;&#xff09; 而计算机更加习惯“后缀式”&#xff08;也叫“逆波兰式”&#xff…...

编程日记 2024/3/24 16:29:55

FPGA与以太网相关接口知识

一&#xff1a;一般硬件架构&#xff1b;(对于1000m网一般都使用普通io口&#xff0c;普通管脚能跑800M(正点技术说的))) 1&#xff1a;FPGA普通管脚——phy芯片&#xff08;pcspma&#xff09;——rg45 2&#xff1a;FPGA(GT)光口(利用fpga的GT&#xff0c;直接节约了phy芯片…...

编程日记 2024/3/24 16:28:53

使用git+ssh访问github，避免下载资源失败

一、创建github账户之后&#xff0c;记住注册邮箱和账户名 我的邮箱&#xff1a;yuanyan23mails.ucas.ac.cn 账户名&#xff1a;thekingofjumpshoot 下边的相关位置需要用自己的邮箱和用户名替代 二、输入本地生成秘钥和公钥命令&#xff0c;并且生成公私钥对 ssh-keygen …...

编程日记 2024/3/24 16:26:51

cookie、session和token的区别

引言 在当今的互联网时代&#xff0c;Web 应用程序的安全性和用户体验至关重要。身份验证和状态管理是构建安全、可靠的 Web 应用的核心部分。cookie、session、token都是常用的身份验证和状态管理机制。 Cookie 什么是 Cookie&#xff1f; Cookie 是存储在用户浏览器中的小…...

编程日记 2024/3/24 16:24:48

如何解决Layui后台接口返回数据，但是table.render不渲染表格数据的问题

我这边进行了pareData数据格式转换&#xff0c;response重新定义了layui的参数格式规范 接口正常返回了数据 但是就是不渲染&#xff0c;我这个郁闷啊&#xff01;&#xff01; 忽然&#xff0c;我把后台重新定义的layui规定的格式参数&#xff0c;有个参数名叫data&#xff0…...

编程日记 2024/3/24 16:22:46

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/6/21 2:16:11

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/6/20 23:54:56

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/6/17 19:11:45

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/6/15 1:42:04

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/6/22 9:15:24

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/6/21 9:14:55

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/6/21 14:39:12

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/6/17 12:11:08