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

news2024/11/24 2:20:42

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

数据可视化-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://www.coloradmin.cn/o/1522681.html

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

相关文章

【Hadoop大数据技术】——MapReduce分布式计算框架（学习笔记）

【Hadoop大数据技术】——MapReduce分布式计算框架（学习笔记）

&#x1f4d6; 前言&#xff1a;MapReduce是Hadoop系统核心组件之一&#xff0c;它是一种可用于大数据并行处理的计算模型、框架和平台&#xff0c;主要解决海量数据的计算问题&#xff0c;是目前分布式计算模型中应用较为广泛的一种。 目录 &#x1f552; 1. MapReduce概述&am…
阅读更多...
Qt教程 — 3.4 深入了解Qt 控件：Input Widgets部件(3)

Qt教程 — 3.4 深入了解Qt 控件：Input Widgets部件(3)

目录 1 Input Widgets简介 2 如何使用Input Widgets部件 2.1 Dial 组件-模拟车速表 2.2 QScrollBar组件-创建水平和垂直滚动条 2.3 QSlider组件-创建水平和垂直滑动条 2.4 QKeySequenceEdit组件-捕获键盘快捷键 Input Widgets部件部件较多&#xff0c;将分为三篇文章介绍…
阅读更多...
第二十四天-数据可视化Matplotlib

第二十四天-数据可视化Matplotlib

目录 1.介绍 2.使用 1. 安装&#xff1a; 2.创建简单图表 3.图表类型 1.一共分为7类 2.变化 1.折线图 3.分布 ​编辑 1.直方图 2.箱型图 4.关联 1. 散点图&#xff1a; 2.热力图&#xff1a; 5.组成 1.饼图 2.条形图 6.分组 1.簇型散点图 2.分组条形图 3.分…
阅读更多...
JMeter 面试题及答案整理，最新面试题

JMeter 面试题及答案整理，最新面试题

JMeter中如何进行性能测试的规划和设计&#xff1f; 进行JMeter性能测试的规划和设计主要遵循以下几个步骤&#xff1a; 1、确定测试目标&#xff1a; 明确性能测试的目的和目标&#xff0c;比如确定要测试的系统性能指标&#xff08;如响应时间、吞吐量、并发用户数等&#…
阅读更多...
从大模型到Agentscope——分布式Multi-Agent应用开发与部署

从大模型到Agentscope——分布式Multi-Agent应用开发与部署

目录 Why需要分布式 案例 多进程的分布书版本能快速提升速度 分布式的挑战 AgentScope分布式解决 方案 实现RPC Agent 基于Actor模式的并行调度缺点&#xff1a;需要Agent内部决定消息传递目标 被调用的Agent立即返回占位符placeholder to_dist: 开启自动将单机进行扩展…
阅读更多...
图解缓存淘汰算法 LRU、LFU ｜ 最近最少使用、最不经常使用算法 ｜ go语言实现

图解缓存淘汰算法 LRU、LFU ｜ 最近最少使用、最不经常使用算法 ｜ go语言实现

写在前面 无论是什么系统&#xff0c;在研发的过程中不可避免的会使用到缓存&#xff0c;而缓存一般来说我们不会永久存储&#xff0c;但是缓存的内容是有限的&#xff0c;那么我们如何在有限的内存空间中&#xff0c;尽可能的保留有效的缓存信息呢&#xff1f; 那么我们就可以…
阅读更多...
代码算法训练营day8 | 344.反转字符串、 541. 反转字符串II、卡码网：54.替换数字、151.翻转字符串里的单词、卡码网：55.右旋转字符串

代码算法训练营day8 | 344.反转字符串、 541. 反转字符串II、卡码网：54.替换数字、151.翻转字符串里的单词、卡码网：55.右旋转字符串

day8: 344.反转字符串541. 反转字符串II卡码网&#xff1a;54.替换数字151.翻转字符串里的单词卡码网&#xff1a;55.右旋转字符串 344.反转字符串 题目链接 状态&#xff1a;ok 文档&#xff1a;programmercarl.com 思路&#xff1a; 对于这道题目可以选择直接用C里的一个库函…
阅读更多...
＜Linux＞ 线程的同步与互斥

＜Linux＞ 线程的同步与互斥

目录 前言&#xff1a; 一、资源共享问题 &#xff08;一&#xff09;多线程并发访问 &#xff08;二&#xff09;临界资源与临界区 &#xff08;三&#xff09;“锁” 是什么 二、多线程抢票场景 &#xff08;一&#xff09;并发抢票 &#xff08;二&#xff09;并发访…
阅读更多...
基于Matlab的车牌识别算法，Matlab实现

基于Matlab的车牌识别算法，Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…
阅读更多...
Oracle 临时表空间管理（Temporary Tablespace）

Oracle 临时表空间管理（Temporary Tablespace）

Oracle临时表空间&#xff08;Temporary Tablespace&#xff09;主要用来存储数据库运行中产生的临时对象&#xff0c;例如SQL排序结果集&#xff0c;临时表等&#xff0c;这些对象的生存周期只有会话。本文总结了Oralce中涉及临时表空间的管理和优化操作。 目录 一、临时表空…
阅读更多...
Stargo 管理部署 Starrocks 集群

Stargo 管理部署 Starrocks 集群

配置主机间 ssh 互信 ssh-copy-id hadoop02 ssh-copy-id hadoop03配置系统参数 ############################ Swap检查 ############################ echo 0 | sudo tee /proc/sys/vm/swappiness########################### 内核参数检查 ########################## echo…
阅读更多...
全国农产品价格分析预测可视化系统设计与实现

全国农产品价格分析预测可视化系统设计与实现

全国农产品价格分析预测可视化系统设计与实现 【摘要】在当今信息化社会&#xff0c;数据的可视化已成为决策和分析的重要工具。尤其是在农业领域&#xff0c;了解和预测农产品价格趋势对于农民、政府和相关企业都至关重要。为了满足这一需求&#xff0c;设计并实现了全国农产…
阅读更多...
JS引用类型

JS引用类型

在JavaScript中&#xff0c;除了基本类型&#xff08;如字符串、数字、布尔值、null和undefined&#xff09;之外&#xff0c;还有引用类型。引用类型包括对象、数组和函数。它们在内存中的存储方式与基本类型不同&#xff0c;因为它们在内存中存储的是对实际数据的引用&#x…
阅读更多...
LeetCode 7 / 100

LeetCode 7 / 100

哈希表、双指针 哈希表两数之和字母异位词分组最长连续序列 双指针移动零盛最多水的容器三数之和接雨水 LeetCode 1.两数之和 LeetCode 49. 字母异位词分组 LeetCode 128. 最长连续序列 LeetCode [283. 移动零](https://leetcode.cn/problems/move-zeroes/?envTypestudy-plan-…
阅读更多...
计算机网络-概述

计算机网络-概述

文章目录 1.2 因特网概述1.2.1 网络、互连网&#xff08;互联网&#xff09;和因特网1.2.2 因特网发展的三个阶段1.2.4 因特网的组成 1.3 三种交换方式1.3.1 电路交换1.3.2 分组交换1.3.3 报文交换1.3.4 三种方式对比 1.4 计算机网络的定义1.5 计算机网络的性能指标1.5.1 速率1…
阅读更多...
DDR协议基础进阶（三）——（基本功能、初始化、MR寄存器）

DDR协议基础进阶（三）——（基本功能、初始化、MR寄存器）

DDR协议基础进阶&#xff08;三&#xff09;——&#xff08;基本功能、初始化、MR寄存器&#xff09; 一、DDR基本功能 DDR基本功能主要包括&#xff1a; 8-bit prefetch预取——8-bit&#xff0c;是指8位数据&#xff0c;即8倍芯片位宽的数据。由于DDR内部数据传输是32bit…
阅读更多...
Spring Web MVC入门(2)

Spring Web MVC入门(2)

学习Spring MVC Postman介绍 在软件工程中, 我们需要具有前后端分离的思想, 以降低耦合性. 但是在测试后端代码时,我们还得写前端代码测试,这是个令人头疼的问题. 那么我们如何测试自己的后端程序呢, 这就用到了一个工具: Postman. 界面介绍: 传参的介绍 1.普通传参, 也就…
阅读更多...
Android Studio 打包 Maker MV apk 详细步骤

Android Studio 打包 Maker MV apk 详细步骤

一.使用RPG Make MV 部署项目&#xff0c;获取项目文件夹 这步基本都不会有问题&#xff1a; 二.安装Android Studio 安装过程参考教材就行了&#xff1a; https://blog.csdn.net/m0_62491877/article/details/126832118 但是有的版本面板没有Android的选项&#xff08;勾…
阅读更多...
SpringAI——Java生态接入LLM

SpringAI——Java生态接入LLM

最近&#xff0c;Spring官网发布了SpringAI&#xff0c;可点此查看https://spring.io/blog/2024/03/12/spring-ai-0-8-1-released&#xff0c;对于SpringAI的介绍&#xff0c;可看官方文档&#xff1a;https://spring.io/projects/spring-ai#overview。 本文将使用SpringAI配合…
阅读更多...
QML 布局管理器之GridLayout

QML 布局管理器之GridLayout

一.QML GridLayout介绍 在QML中&#xff0c;GridLayout是一种用于布局元素的容器。它允许您以网格形式组织和排列元素。要使用rowspan、columnspan、layoutFillWidth和rowSpacing属性&#xff0c;您可以将一个元素跨越多行和多列&#xff0c;并填充整个宽度&#xff0c;同时设置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023