数据可视化-ECharts Html项目实战(5)

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

数据可视化-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地图;支持气泡图、面积图等多种样式;可结合地理信息进行数据可视化。用于展示与地理位置相关的数据,如销售地域分布、人口分布、气候分布等。
漏斗图适用于业务流程多的流程分析,能够显示各流程的转化率。用于分析销售漏斗、用户转化路径等,帮助识别和优化关键流程。
词云图以词语为单位,通过词频、字体大小等方式展示文本数据;视觉效果突出,易于理解。用于展示文本数据中的关键词或主题,如用户评论、新闻报道等。
热力图通过颜色深浅表示数据的密度或强度;直观展示数据的分布情况。用于展示数据在空间或时间上的分布情况,如网站点击热力图、温度分布图等。
关系图用于展示数据之间的关联关系,如节点和边的连接情况;支持多种布局方式和交互操作。用于分析社交网络、知识图谱等复杂关系数据,帮助理解数据间的联系和结构。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/284596.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nodejs社区垃圾分类管理平台的设计与实现python-flask-django-php

近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;社区垃圾分类管理平台利用计算机网络实现信息化管理&#xff0c;使整个社区垃圾分类管理的发展和服务水平有显著提升。 语言&#xf…

qt 实现 轮播图效果,且还有 手动 上一页和下一页 已解决

QT中有 轮播图的需求&#xff0c;按照正常html版本 。只需要配置数组就能搞定&#xff0c;但是c qt版本 应该用什么了。 第一想到的是采用定时器。 // 定时器初始化{m_pTime new QTimer(this);m_pTime->start(4 * 1000);//启动定时器并设置播放时间间隔m_pAutoFlag true;/…

vs2019新建Qt工程中双击 .ui 文件无法打开

vs2019 中创建的 Qt 工程&#xff0c;在使用的过程中&#xff0c;经常会有&#xff1a;双击 .ui 文件&#xff0c;闪退的情况&#xff0c;也即 .ui 文件无法打开&#xff01; 针对该问题的详细解决步骤如下&#xff1a; 1、右击该 .ui 文件&#xff0c;选择“打开方式” 2、…

②零基础MySQL数据库-MySQL约束

作用 表在设计的时候加入约束的目的就是为了保证表中的记录完整性和有效性&#xff0c;比如用户表有些列的值&#xff08;手机号&#xff09;不能为空&#xff0c;有些列的值&#xff08;身份证号&#xff09;不能重复 分类 主键约束(primary key) PK 自增长约束(auto_increme…

是德科技keysight DSOX3024T示波器

181/2461/8938产品概述&#xff1a; DSOX3024T 示波器 要特性与技术指标 使用电容触摸屏进行简洁的触控操作&#xff1a; •提高调试效率 •触控设计可以简化文档记录 •使用起来就像您喜欢的智能手机或平板电脑一样简单 使用 MegaZoom IV 技术揭示偶发异常&#xff1a; •超快…

rpc详解rpc框架

文章目录 概述rpc的优点组件工作流程&RPC的底层原理RPC的底层原理 RPC框架rpc框架优点RPC 的实现基础RPC的应用场景RPC使用了哪些关键技术rpc 调用异常一般怎么处理rpc和http的区别为什么RPC要比HTTP更快一些Dubbo和openfeign 区别远程调用RPC框架传输协议传输速度 概述 在…

135. 分发糖果(力扣LeetCode)

文章目录 135. 分发糖果题目描述贪心算法代码如下 总结 135. 分发糖果 题目描述 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩…

my2sql —— go语言版binlog解析及闪回工具

之前学习过python语言版binlog解析及闪回工具 MySQL闪回工具简介 及 binlog2sql工具用法 最近听同事介绍有了新的go语言版的my2sql。优点是不需要安装一大堆依赖包&#xff0c;直接可以安装使用&#xff0c;并且解析更高效&#xff0c;试用一下。 一、 下载安装 1. 软件下载 …

【原理图PCB专题】Cadence 17.4 配置Capture.ini让CIS数据库界面查看PCB封装

在CIS数据库中,如果进行了正确配置是可以查看原理图符号库与PCB封装库的。如下所示: 看到封装库的意义在于一个原理图封装是可以对应多个PCB封装的,如同一个原理图座子,对应了侧插或是竖插,那在没有PCB封装的时候,我们只能通过去看详细资料来判断。如果有PCB封装显示,只…

设计模式-访问者(Visitor)模式详解和应用

文章目录 前言访问者模式介绍结构包含的角色应用场景代码示例访问者模式的扩展访问者模式优缺点总结 前言 最近在做一个根据数学表达式生成java执行代码的功能&#xff0c;其中用到了访问者模式。使我对访问者模式有了更深入的理解。故写下此篇文章分享出来&#xff0c;不足之…

IPV6协议之RIPNG

目录 前言&#xff1a; 一、RIPNG与RIP的区别 二、如何配置RIPNG 如何解决RIPNG环路问题呢&#xff1f; 控制RIPNG的选路 1、修改RIPNG默认优先级 2.配置接口附加开销值从而干涉RIPNG的选路 RIPNG拓展配置 1.RIPNG的认证 配置RIPNG进程下的IPsec认证&#xff1a; 配…

Spring Cloud Gateway教程

1 微服务网关概述 Spring Cloud Gateway是在 Spring 生态系统之上构建的API网关服务&#xff0c;旨在为微服务架构应用提供一种简单有效的统一的API路由管理方式。 Spring Cloud Gateway主要功能&#xff1a; 反向代理认证鉴权流量控制熔断日志监控 2 Spring Cloud Gateway三…

基于python+vue超市在线销售系统的设计与实现flask-django-php-nodejs

根据此问题&#xff0c;研发一套超市在线销售系统&#xff0c;既能够大大提高信息的检索、变更与维护的工作效率&#xff0c;也能够方便信息系统的管理运用&#xff0c;从而减少信息管理成本&#xff0c;提高效率。 该超市在线销售系统采用B/S架构、并采用python语言以及django…

拌合楼管理系统(八) c#海康威视摄像头车牌识别

前言: c#调用海康威视SDK实现车牌识别 原本以为海康威视sdk的Demo里面没有车牌识别的实例,后来发现自己肤浅了,官方是有提供的,只是车牌识别是通过安防布警的方式实现的.程序主动监听,触发告警后获取到车牌信息. 一、接口调用的流程&#xff1a; 首先初始化sdk -> 开…

CI/CI实战-jenkis结合gitlab 4

实时触发 安装gitlab插件 配置项目触发器 生成令牌并保存 配置gitlab 测试推送 gitlab的实时触发 添加jenkins节点 在jenkins节点上安装docker-ce 新建节点server3 安装git和jdx 在jenkins配置管理中添加节点并配置从节点 关闭master节点的构建任务数

二分查找法总结

目录 1、思路讲解&#xff08;LC704&#xff09;2、代码思路讲解&#xff08;循环不变量&#xff09;&#xff08;1&#xff09; 左闭右闭&#xff08;2&#xff09;左闭右开&#xff08;3&#xff09;总结&#xff1a;左开右闭和左闭右开&#xff08;4&#xff09;复杂度分析 …

老阳分享|temu跨境电商选品师项目能赚钱吗?

近年来&#xff0c;跨境电商行业蓬勃发展&#xff0c;成为众多创业者追逐的热点。其中&#xff0c;老阳分享的temu跨境电商选品师项目备受关注。那么&#xff0c;这个项目真的能赚钱吗?下面&#xff0c;我们就跟随本文去了解一下。 首先&#xff0c;temu作为拼多多旗下的跨境电…

数据结构与算法4-冒泡排序

文章目录 1. 认识冒泡排序2. 图示2.1 图示12.2 图示2 3. 代码 1. 认识冒泡排序 双层for循环&#xff0c;每次选出最大的数“浮”到数组的最后面&#xff1b;时间复杂度O( n 2 n^2 n2)&#xff0c;空间复杂度O(1);重复地遍历待排序的数列&#xff0c;一次比较两个元素&#xff…

ClickHouse部署安装

准备工作 确定防火墙处于关闭状态 CentOS取消打开文件数限制 在hadoop102的 /etc/security/limits.conf文件的末尾加入以下内容 注意&#xff1a;以下操作会修改 Linux 系统配置&#xff0c;如果操作不当可能导致虚拟机无法启动&#xff0c;建议在执行以下操作之前给…

Vue中的状态管理Vuex,基本使用

1.什么是Vuex? Vuex是专门为Vue.js设计的状态管理模式;特点:集中式存储和管理应用程序中所有组件状态,保证状态以一种可预测的方式发生变化。 1.1.什么是状态管理模式? 先看一个单向数据流的简单示意图 state:驱动应用的数据源 view:以声明方式将state映射到视图 actions:…