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

 在之前的文章中，我们学习了如何创建简单的折线图，条形图，柱形图并实现动态触发，最大最小平均值。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。

数据可视化-ECharts Html项目实战（1）-CSDN博客文章浏览阅读858次，点赞32次，收藏23次。在之前的文章中，我们学习了如何安装Visual Studio Code并下载插件，想了解的朋友可以查看这篇文章。安装 Visual Studio Code今天的文章，我会从基础案例开始，带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图，并实现动态触发以及最大、最小、平均值。https://blog.csdn.net/qq_49513817/article/details/136665547?spm=1001.2014.3001.5501

 今天的文章，我会从上一篇结尾的案例开始，带着大家在VS code中绘制ECharts里的堆积折线图、瀑布图、饼图。并实现图表标题的设置。

目录

一、知识回顾

二、项目实战

1.堆积折线图

2.瀑布图

3.饼图

三、标题设置

拓展-标题设置常用属性

一、知识回顾

 在上一篇文章中，我们学习了如何创建一个基本的图表，也学习了一些基本的图表类型。

更改图表类型的方法，学习能力强的朋友，应该已经知道了。

 就是更改这个type，中文意思就是“类型”，很好理解。

常见的图表类型也告诉大家了，那么我想，今天的学习任务对于大家应该都很简单吧！

在后面的动态触发和最大值，最小值，平均值中的代码我用到了几个陌生的东西。

一个是toolbox，一个是tooltip，分别是提示框组件和工具箱，在后面的文章中我会告诉大家它的用法，大家现在只用知道它是什么，它的作用就行。

现在，开始今天的学习吧。

二、项目实战

1.堆积折线图

想要实现堆积折线图其实并不复杂，只需要两句简单的代码，但是有很多人不会用，它的关键在于放的位置。

 stack:"all",
//stack 属性通常用于堆叠多个系列的数据。当设置为 "all" 时，意味着图表上的所有系列都将被堆叠在一起。areaStyle:{}
//areaStyle 属性用于定义区域填充的样式。当这个属性为空对象 {} 时，//它通常意味着默认样式将被应用。但是，你可以在这个对象中添加各种属性来定制区域的填充颜色、透明度、边框等。

现在，我们把它放到代码里试试

可以看到，我们想要的堆积效果出现了。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',subtext: '成绩来源于辅导员',},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category',  data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{}},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{}},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>

现在，我们把昨天学的最大最小平均值加进去试试。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',subtext: '成绩来源于辅导员',},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category',  data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>

可以看到，最大值都超过我们需要的100了，这是因为堆积折线图数据会堆积起来，设平均值并不是一个很好的选择。

2.瀑布图

 在这里，就有一些难度了，在 ECharts 中，并没有瀑布图这种类型，需要我们运用一些技巧，达到这种效果。使用serise中的type:"bar"条形图）来模拟瀑布图。

在 ECharts 中，设置非数值部分（例如瀑布图的起始和结束部分）透明，你需要在 itemStyle 中针对这些特定数据点设置透明颜色。

这里的数值是我为了演示随机输入的，大家在实战中的数值一定要严谨。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',subtext: '成绩来源于辅导员',},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [  {  type: 'category',      data: ['起始', '2月', '4月', '6月', '9月', '11月', '结束']  },  ],  yAxis: [  {  type: 'value'  },  ],   // ... 其他配置项保持不变 ...  xAxis: [  {  type: 'category',      data: ['起始', '2月', '4月', '6月', '9月', '11月', '结束']  },  ],  yAxis: [  {  type: 'value'  },  ],  series: [  {  name: '2023年',  type: 'bar',  stack: 'total',  data: [0, 65, 75 - 65, 66 - 75, 80 - 66, 90 - 80, 0], // 注意这里的数据变化，结束部分通常为0  itemStyle: {  color: function(params) {  // 根据数据的索引设置颜色，起始和结束部分设置为透明  var index = params.dataIndex;  if (index === 0 || index === params.data.length - 1) {  return 'transparent'; // 起始和结束部分透明  } else {  return 'rgba(220, 220, 220, 0.8)'; // 其他部分默认颜色  }  },  barBorderColor: '#fff',  borderWidth: 1  },  label: {  show: true,  position: 'insideRight'  },  markPoint: {  data: [  {type: 'max', name: '最大值'},  {type: 'min', name: '最小值'}  ]  },  markLine: {  data: [  {type: 'average', name: '平均值'}  ]  }  },  // ... 可以添加更多年份的系列数据 ...  ],  
};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>

快去试试吧

3.饼图

变为饼图。你需要做这些：

  • 将 xAxis 和 yAxis 配置项移除，因为饼图不需要坐标轴。
  • 移除 series 中的 type: 'line'，改为 type: 'pie'。
  • 饼图通常不需要 tooltip 的 trigger: 'axis' 配置，因为它基于整个饼图的数据点触发提示框。
  • 添加饼图特有的配置项，比如 radius（饼图的半径）、center（饼图的中心位置）等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {  title: {  text: '红红成绩表',  subtext: '成绩来源于辅导员',  },  tooltip: {  trigger: 'item',  formatter: "{a} <br/>{b}: {c} ({d}%)"  },  legend: {  orient: 'horizontal', // 水平显示图例  left: 'center', // 图例居中显示  top: '%', // 图例距离容器顶部的百分比位置  data: ['2023年', '2024年']  },  series: [  {  name: '成绩',  type: 'pie',  radius: ['75%', '55%'],  avoidLabelOverlap: false,  label: {  show: true,  position: 'center' },  emphasis: {  label: {  show: true,  fontSize: '30',  fontWeight: 'bold'  }  },  labelLine: {  show: false  },  data: [  {value: 380, name: '2023年'}, // 假设这是2023年的总成绩  {value: 450, name: '2024年'}  // 假设这是2024年的总成绩  // 注意：这里的数据是示例数据，你需要替换为实际的成绩总和  ]  }  ]  
};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>

三、标题设置

在ECharts中，title组件用于显示图表的标题。

 title: {text: '红红成绩表',borderWidth:2,//边框宽度    borderColor:"#00FF00",//边框颜色subtext: '成绩来源于辅导员',//副标题textAlign:'',//left:"center",//水平居中top:"",},

把他加到堆积折线图试试效果

可以看到图表标题以及设置到了最中间了，并且加上了绿色的边框。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',borderWidth:2,//边框宽度    borderColor:"#00FF00",//边框颜色subtext: '成绩来源于辅导员',//副标题textAlign:'',//left:"center",//水平居中top:"",},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],top:"bottom",},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category',  data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>

拓展-标题设置常用属性

属性名类型默认值说明
textstring''主标题文本，支持使用 \n 换行。
subtextstring''副标题文本，支持使用 \n 换行。
leftstring / number'auto'标题组件离容器左侧的距离。
topstring / number'auto'标题组件离容器上侧的距离。
textAlignstring'left'主标题的水平对齐方式，可选值为：'left'、'center'、'right'。
textVerticalAlignstring'top'垂直对齐方式，可选值为：'top'、'middle'、'bottom'。
textStyleobject{}主标题样式，包括颜色、字体、对齐方式等。
subtextStyleobject{}副标题样式，包括颜色、字体、对齐方式等。
paddingnumber / array0内边距，单位是像素，可以是单一数字，也可以是数组分别表示上、右、下、左的内边距。
itemStyleobject{}标题标记的图形样式，例如颜色、边框等。
backgroundColorstring'transparent'标题背景色，默认为透明。
borderColorstring'#ccc'标题边框颜色。
borderWidthnumber0标题边框线宽。
padding[number, number, number, number][0, 0, 0, 0]标题内边距，单位px，默认各方向内边距为0，顺序为：上、右、下、左。
shadowBlurnumber0图形阴影的模糊大小。
shadowColorstring'rgba(0, 0, 0, 0.5)'图形阴影的颜色。
shadowOffsetXnumber0图形阴影在水平方向上的偏移距离。
shadowOffsetYnumber0图形阴影在垂直方向上的偏移距离。
textBorderColorstring'#000'文本边框颜色。
textBorderWidthnumber0文本边框线宽。
zlevelnumber0所有图形的 zlevel 值。
znumber2组件的所有图形的 z 值。

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

11.进程的同步与互斥

11.进程的同步与互斥

11.进程的同步与互斥 计数信号量及其初始化 和王道里面学的PV操作一摸一样,带个count变量,带个阻塞队列 //D:\code\x86\code\start\start\source\kernel\include\ipc\sem.h #ifndef OS_SEM_H #define OS_SEM_H#include "tools/list.h"/*** 进程同步用的计数信号量*…
阅读更多...
linux源配置：ubuntu、centos

linux源配置：ubuntu、centos

1、ubuntu源配置 1&#xff09;先查电脑版本型号: lsb_release -c2&#xff09;再编辑源更新&#xff0c;源要与上面型号对应 参考&#xff1a;https://midoq.github.io/2022/05/30/Ubuntu20-04%E6%9B%B4%E6%8D%A2%E5%9B%BD%E5%86%85%E9%95%9C%E5%83%8F%E6%BA%90/ /etc/apt/…
阅读更多...
插入排序：一种简单而有效的排序算法

插入排序：一种简单而有效的排序算法

插入排序&#xff1a;一种简单而有效的排序算法 一、什么是插入排序&#xff1f;二、插入排序的步骤三、插入排序的C语言实现四、插入排序的性能分析五、插入排序的优化六、总结 在我们日常生活和工作中&#xff0c;排序是一种非常常见的操作。比如&#xff0c;我们可能需要对一…
阅读更多...
Echo框架：高性能的Golang Web框架

Echo框架：高性能的Golang Web框架

Echo框架&#xff1a;高性能的Golang Web框架 在Golang的Web开发领域&#xff0c;选择一个适合的框架是构建高性能和可扩展应用程序的关键。Echo是一个备受推崇的Golang Web框架&#xff0c;以其简洁高效和强大功能而广受欢迎。本文将介绍Echo框架的基本特点、使用方式及其优势…
阅读更多...
Golang协程详解

Golang协程详解

一.协程的引入 1.通过案例文章引入并发,协程概念 见:[go学习笔记.第十四章.协程和管道] 1.协程的引入,调度模型&#xff0c;协程资源竞争问题 通过上面文章可以总结出Go并发编程原理: 在一个处理进程中通过关键字 go 启用多个协程&#xff0c;然后在不同的协程中完成不同的子任…
阅读更多...
智慧公厕建设的重要性

智慧公厕建设的重要性

智慧公厕建设一直被视为提升城市管理水平的重要举措。作为一个关键的城市基础设施&#xff0c;智慧公厕不仅可以改善公共卫生管理&#xff0c;还能提升城市居民的社会民生生活质量。此外&#xff0c;智慧公厕建设还能促进城市的可持续发展&#xff0c;降低能源消耗&#xff0c;…
阅读更多...
科研绘图一：箱线图（添加贝赛尔曲线）

科研绘图一：箱线图（添加贝赛尔曲线）

R语言绘图系列—箱线图贝赛尔曲线 &#xff08;一&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;添加贝赛尔曲线&#xff09; 文章目录 R语言绘图系列---箱线图贝赛尔曲线&#xff08;一&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;添加贝赛尔曲线&…
阅读更多...
数据结构/C++：红黑树

数据结构/C++：红黑树

数据结构/C&#xff1a;红黑树 概念实现基本结构插入uncle为红色节点uncle为黑色节点 总代码展示 概念 红黑树是一种二叉搜索树&#xff0c;一般的二叉搜索会发送不平衡现象&#xff0c;导致搜索效率下降&#xff0c;于是学者们开始探索如何让二叉搜索树保持平衡&#xff0c;这…
阅读更多...
unity学习（60）——选择角色界面--MapHandler2-MapHandler.cs

unity学习（60）——选择角色界面--MapHandler2-MapHandler.cs

1.新建一个脚本&#xff0c;里面有static变量loadingPlayerList using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Assets.Scripts.Model {internal class LoadData{public static List<Pl…
阅读更多...
R语言中的常用基础绘图函数 直方图，箱线图，条形图，散点图

R语言中的常用基础绘图函数 直方图，箱线图，条形图，散点图

目录 R语言中的绘图参数 绘图函数 1.plot函数绘制散点图 2.hist函数绘制直方图 如何修饰直方图? 如何在直方图上标注各组频数&#xff1f; 使用text函数把某些信息标注在直方图上 如何在直方图上添加概率密度曲线&#xff1f; 3.boxplot函数绘制箱线图 4.barplot函数…
阅读更多...
JVM虚拟机：通过jconsole远程连接解决JVM报错

JVM虚拟机：通过jconsole远程连接解决JVM报错

本文重点 前面我们介绍过的一些工具都是使用命令行的方式来帮助我们完成&#xff0c;本文我们将使用一种图形化界面的方式来远程连接&#xff0c;然后完成关于JVM的检测任务。 jconsole jconsole是一个JVM的检测工具&#xff0c;这个工具任何安装了Java的电脑上都有的&#…
阅读更多...
手机网络连接性能API接口：查询手机网络连接性能状态

手机网络连接性能API接口：查询手机网络连接性能状态

手机在网状态查询服务是一项非常方便的服务&#xff0c;可以帮助我们随时了解一个手机号码的在网状态。不论是查询自己的手机号码&#xff0c;还是查询他人的手机号码&#xff0c;这个服务都可以帮助我们获取准确的信息。今天&#xff0c;我想和大家介绍一个非常好用的手机在网…
阅读更多...
GitHub Actions持续部署

GitHub Actions持续部署

一、概述 1.1Github Action介绍 什么是Github Action ? GitHub Actions是GitHub提供的CI/CD&#xff08;持续集成/持续部署&#xff09;服务。它允许你在GitHub仓库中自动化、定制和执行你的软件开发工作流。你可以发现、创建和分享用于执行任何你想要的工作的操作&#xff0…
阅读更多...
《计算机视觉中的深度学习》之目标检测算法原理

《计算机视觉中的深度学习》之目标检测算法原理

参考&#xff1a;《计算机视觉中的深度学习》 概述 目标检测的挑战&#xff1a; 减少目标定位的准确度减少背景干扰提高目标定位的准确度 目标检测系统常用评价指标&#xff1a;检测速度和精度 提高精度&#xff1a;有效排除背景&#xff0c;光照和噪声的影响 提高检测速度…
阅读更多...
Spark-Transformation以及Action开发实战

Spark-Transformation以及Action开发实战

文章目录 创建RDDTransformation以及ActionTransformation开发Action开发RDD持久化共享变量创建RDD RDD是Spark的编程核心，在进行Spark编程是，首要任务就是创建一个初始的RDDSpark提供三种创建RDD方式：集合、本地文件、HDFS文件 集合：主要用于本地测试，在实际部署到集群运…
阅读更多...
FAN3224TMX门极驱动器中文资料PDF数据手册引脚图参数价格图片功能特性

FAN3224TMX门极驱动器中文资料PDF数据手册引脚图参数价格图片功能特性

产品概述&#xff1a; FAN3223-25 系列双 4A 门极驱动器以较短的开关间隔提供高峰值电流脉冲&#xff0c;用于在低侧开关应用中驱动 N 沟道增强模式 MOSFET。该驱动器提供 TTL 或 CMOS 输入阈值。内部电路将输出保持在低电平&#xff0c;直到电源电压处于运行范围内&#xff0…
阅读更多...
在Docker容器中配置`code-server`以访问宿主机的Docker环境

在Docker容器中配置`code-server`以访问宿主机的Docker环境

在Docker容器中配置code-server以访问宿主机的Docker环境 部分内容使用gpt生成&#xff0c;但经过测试可用。 要在code-server容器内部安全地管理和访问宿主机的Docker环境&#xff08;主要是为了访问宿主机的texlive&#xff09;&#xff0c;遵循以下步骤能够确保流畅的集成和…
阅读更多...
R语言深度学习-5-深度前馈神经网络

R语言深度学习-5-深度前馈神经网络

本教程参考《RDeepLearningEssential》 本篇我们将学习如何建立并训练深度预测模型。我们将关注深度前馈神经网络 5.1 深度前馈神经网络 我们还是使用之前提到的H2O包&#xff0c;详细可以见之前的博客&#xff1a;R语言深度学习-1-深度学习入门&#xff08;H2O包安装报错解决…
阅读更多...
[scikit-learn] 第一章 初识scikit-learn及内置数据集介绍

[scikit-learn] 第一章 初识scikit-learn及内置数据集介绍

文章目录 菜鸡镇贴&#xff01;&#xff01;&#xff01;scikit-learn 简要介绍scikit-learn 安装scikit-learn 数据集介绍数据集API介绍LoadersSamples generator 导入数据集demo 菜鸡镇贴&#xff01;&#xff01;&#xff01; scikit-learn 简要介绍 ​ Scikit learn是一个…
阅读更多...
RK3568平台开发系列讲解（基础篇）内核是如何发送事件到用户空间

RK3568平台开发系列讲解（基础篇）内核是如何发送事件到用户空间

🚀返回专栏总目录 文章目录 一、相关接口函数二、udevadm 命令三、实验沉淀、分享、成长，让自己和他人都能有所收获！😄 一、相关接口函数 kobject_uevent 是 Linux 内核中的一个函数， 用于生成和发送 uevent 事件。 它是 udev 和其他设备管理工具与内核通信的一种方式。…
阅读更多...
最新文章

Copyright @ 2022~2023