vue2+svg+elementui实现花瓣图自定义el-select回显色卡图片

在这里插入图片描述

项目需要实现花瓣图,但是改图表在echarts,highCharts等案例中均未出现,有类似的韦恩图,但是和需求有所差距;

为实现该效果,静态图表上采取svg来手动绘制花瓣:

  1. 确定中心点,以该点为中心,向四周绘制椭圆,该图像为均等分布(椭圆圆心不在中心点,而是有一定的偏移度)
  2. 在中心点处,绘制花心,为一个圆形,用于展示多朵花瓣的交集
  3. 花瓣的长度,颜色均可调整

技术点1:svg绘制花瓣图

<svg id="flower-svg" :width="flowerWidth" :height=" flowerHeight "><!-- 动态生成花瓣 --><g class="flower-svg-leaf" transform="translate(320, 200)"><g v-for="(leaf, index) in leafCount" :key="index" :transform="`rotate(${(index * 360) / leafCount}) translate(55, 0)`"><!-- 椭圆,背景颜色来自于 colors 数组 --><!-- 花瓣边框的颜色和透明度stroke="rgb(255, 106, 0)" stroke-opacity="1"--><ellipse class="svg-leaf-item-ellipse" :rx="leafSize.rx" :ry="leafSize.ry":fill="colors[index]" fill-opacity="0.5"></ellipse><!-- 椭圆的内部数据 --><text class="svg-leaf-item-text" font-size="12px" font-family="Arial" fill="#000000" text-anchor="end" dominant-baseline="middle"transform="rotate(0)" dx="53" visibility="visible" dy="2">50</text><!-- 椭圆内部数据对应的外部标签 --><text class="svg-leaf-item-group" font-size="12px" font-family="Arial" fill="#000000" text-anchor="start"dominant-baseline="middle" transform="rotate(0)" dy="2" dx="110" visibility="visible">Leaf {{ index + 1 }}</text></g></g><!-- 花心 --><g class="flower-svg-center" transform="translate(320, 200)"><circle class="flower-svg-center-self" :r="leafSize.ry - 5" fill="rgb(241, 43, 11)" fill-opacity="0.5"stroke="rgb(241, 43, 11)" stroke-opacity="0.5"></circle><text class="flower-svg-center-text" font-size="12px" font-family="Arial" fill="rgb(255, 255, 255)" visibility="visible"text-anchor="middle" dominant-baseline="middle" dy="3">141</text></g></svg>

静态代码详解:

  1. transform="translate(320, 200)",svg 的宽高分别为640,400,所以以偏移一半为中心
  2. <g v-for="(leaf, index) in leafCount" :key="index" :transform="rotate(${(index * 360) / leafCount}) translate(55, 0)">:leafCount为花瓣的数量,对应transform为旋转角度,等分显示每一朵花瓣
  3. ellipse来绘制椭圆,涉及的参数有长半轴,短半轴,填充颜色等一些基础配置,后期均改为动态参数

技术点2:el-select下拉框回显色卡

在这里插入图片描述

原始下拉框options为:

colorTemplates: [
{name: "色系1",value: "1",colors: ["rgba(255, 106, 0, 0.5)","rgba(255, 209, 26, 0.5)","rgba(255, 72, 0, 0.5)","rgba(255, 153, 51, 0.5)","rgba(204, 102, 0, 0.5)","rgba(255, 51, 51, 0.5)","rgba(255, 128, 0, 0.5)","rgba(204, 0, 102, 0.5)","rgba(255, 51, 153, 0.5)","rgba(204, 51, 0, 0.5)",],
},
{name: "色系2",value: "2",colors: ["rgba(0, 153, 255, 0.5)","rgba(0, 102, 204, 0.5)","rgba(0, 72, 204, 0.5)","rgba(0, 204, 255, 0.5)","rgba(51, 204, 255, 0.5)","rgba(102, 255, 255, 0.5)","rgba(51, 102, 255, 0.5)","rgba(0, 255, 204, 0.5)","rgba(51, 255, 204, 0.5)","rgba(0, 153, 204, 0.5)",],
},
{name: "色系3",value: "3",colors: ["rgba(34, 139, 34, 0.5)","rgba(0, 255, 0, 0.5)","rgba(0, 128, 0, 0.5)","rgba(60, 179, 113, 0.5)","rgba(0, 255, 127, 0.5)","rgba(144, 238, 144, 0.5)","rgba(34, 139, 34, 0.5)","rgba(127, 255, 0, 0.5)","rgba(46, 139, 87, 0.5)","rgba(85, 107, 47, 0.5)",],
},
],

需要将每组对象中的颜色,以色卡的形式展示在下拉框中,并且在选项框中回显

下拉框展示色卡:在el-option里面通过自定义内容,遍历color的十个颜色,拼接成色卡

<el-selectv-model="selectedTemplate"placeholder=""@change="handleTemplateChange"style="width: 250px"ref="selectRef"><el-optionv-for="(template, index) in colorTemplates":key="index":label="template.name":value="template.name"><div style="display: flex; gap: 5px"><!-- 展示每个模板下的颜色方块 --><divv-for="(color, colorIndex) in template.colors":key="colorIndex"class="color-box":style="{backgroundColor: color,width: '20px',height: '20px',}"></div></div></el-option></el-select>

选择框回显色卡

  1. 首先,清空选择框绑定的默认值selectedTemplate(在此之前已经将该值传给Vuex),不能通过this.$refs["selectRef"].value去修改【不应该直接修改通过 props 传递过来的数据,因为 Vue 会在每次重新渲染时重置这些值。】
  2. 将色卡的十组数据,生成svg字符串,转化为base64编码,以background:url()的方式,回显到选择框中
getSvgString(colors) {const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20">${colors.map((color, index) =>`<rect x="${index * 20}" width="20" height="20" fill="${color}"/>`).join("")}</svg>`;// 将SVG内容转换为Base64const base64EncodedSvg = btoa(unescape(encodeURIComponent(svgContent))); // btoa编码,encodeURIComponent避免特殊字符问题// 返回Base64编码后的SVG字符串,用作背景图this.selectSVG = `url('data:image/svg+xml;base64,${base64EncodedSvg}')`;// console.log(this.$refs["selectRef"].$el.children[0].children[0]);this.$refs["selectRef"].$el.children[0].children[0].setAttribute("style",`background:${this.selectSVG};background-repeat:no-repeat;background-position:15px;`);},

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

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

相关文章

二百七十八、ClickHouse——将本月第一天所在的那一周视为第一周,无论它是从周几开始的,查询某个日期是本月第几周

一、目的 ClickHouse指标表中有个字段week_of_month&#xff0c;含义是这条数据属于本月第几周。 而且将本月第一天所在的那一周视为第一周&#xff0c;无论它是从周几开始的。比如2024-12-01是周日&#xff0c;即12月第一周。而2024-12-02是周一&#xff0c;即12月第二周 二…

快充协议IC支持全协议,内部集成LDO支持输出电压3.3V,支持宽电压范围3.3~30V

随着快充技术的不断发展&#xff0c;越来越多的电子产品都使用上了快充&#xff0c;市面上大多数受电端取电芯片只有取电功能&#xff0c;而有些产品则需要更多功能支持&#xff0c;例如产品需要快充支持又要读取电压&#xff0c;就只能在使用取电协议芯片的同时再增加一颗串口…

深入傅里叶级数与傅里叶变换:从基础到应用

傅里叶分析是数学、物理和工程领域的一项基础工具&#xff0c;其核心思想是将复杂的信号或函数分解为一系列简单的正弦和余弦函数的叠加。本文将带你从傅里叶级数入门&#xff0c;逐步深入傅里叶变换的概念及其应用场景。 一、傅里叶级数&#xff1a;周期信号的分解 1. 什么是傅…

brew安装mongodb和php-mongodb扩展新手教程

1、首先保证macos下成功安装了Homebrew&#xff0c; 在终端输入如下命令&#xff1a; brew search mongodb 搜索是不是有mongodb资源&#xff0c; 演示效果如下&#xff1a; 2、下面来介绍Brew 安装 MongoDB&#xff0c;代码如下&#xff1a; brew tap mongodb/brew brew in…

记录一次网关异常

记一次网关异常 网关时不时就会出现下面的异常。关键是不知道什么时候就会报错&#xff0c;并且有时候就算什么都不操作&#xff0c;也会导致这个异常。 ERROR org.springframework.scheduling.support.TaskUtils$LoggingErrorHandler - Unexpected error occurred in schedul…

使用Python和OpenCV自动检测并去除图像中的字幕

在图像处理和视频编辑领域&#xff0c;手动划分区域以定位和处理特定元素&#xff08;如字幕&#xff09;是一项耗时且劳动密集型的工作。专业人士常常需要花费大量时间来确保每一帧中的字幕都被精确地定位和移除&#xff0c;这不仅效率低下&#xff0c;而且容易出错。本文介绍…

Algorithm:河内之塔

1. 说明 河内之塔&#xff08;Towers of Hanoi&#xff09;是法国人 M.Claus&#xff08;Lucas&#xff09;于1883年从泰国带至法国的&#xff0c;河内为越战时北越的首都&#xff0c;即现在的胡志明市&#xff1b;1883年法国数学家 Edouard Lucas 曾提及这个故事&#xff0c;据…

A109 PHP+MYSQL+LW+网上论坛网站 军事BBS系统的设计与实现 源码+文档 全套 教程

网上军事论坛网站系统 1.项目摘要2. 研究背景3.项目功能4.界面展示5.源码获取 1.项目摘要 随着计算机网络的普及&#xff0c;如今越来越多的论坛类网站也是数不胜数&#xff0c;各种类型的论坛交流网站&#xff0c;深受当前网友们的喜欢。网上军事论坛网站的成立&#xff0c;是…

【Nacos01】消息队列与微服务之Nacos 介绍和架构

Nacos Nacos 介绍和架构 什么是Nacos https://nacos.io/ https://github.com/alibaba/nacos Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称 是阿里巴巴开源的一个基于JAVA语言的更易于构建云原生应用的动态服务发现、配置管理和服务管理平台…

FolderMove 3.0 |文件夹安全转移,释放C盘空间

FolderMove v3.0是一款可以一键移动文件到其他磁盘的小工具。原版是全英文软件&#xff0c;但提供了汉化无限制版。软件体积小巧&#xff0c;只有约200KB&#xff0c;使用非常简单&#xff0c;无需安装&#xff0c;绿色环保。运行时选择需要移动的文件夹目录即可。FolderMove会…

TypeScript和JavaScript的区别

总结&#xff1a; TypeScript 是 JavaScript 的超集&#xff0c;它在 JavaScript 的基础上添加了强类型、接口、类、泛型等特性&#xff0c;并提供了静态类型检查等工具&#xff0c;让开发者能够在编写代码时更加安全、高效、可靠。与 JavaScript 相比&#xff0c;TypeScript …

学习threejs,使用VideoTexture实现视频Video更新纹理

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️VideoTexture 视频纹理 二、…

【PyTorch】回归问题代码实战

梯度下降法是优化算法中一种常用的技术&#xff0c;用于通过最小化损失函数来求解模型的最优参数。在线性回归中&#xff0c;目标是通过拟合数据来找到一条最适合的直线。梯度下降法通过迭代地调整模型参数&#xff0c;使得损失函数&#xff08;通常是均方误差&#xff09;最小…

Springboot入门教程系列HelloWorld

接下来学习Springboot相关的知识&#xff0c;从简单的入门到高级篇【也就是Springboot企业级快速开发的整合部分】&#xff0c;接下来的教程适合入门小白看&#xff0c;简单的说下入门级教程的环境准备 环境准备 jdk 1.8Maven:3.6.1springboot: 2.2.7 目前springboot最新版本为…

koa中间件

文章目录 1. koa中间件简介2. 中间件类型1. 应用级中间件2. 路由级中间件3. 错误处理中间件4. 第三方中间件 3.中间件执行流程 1. koa中间件简介 在Koa中&#xff0c;中间件呈现为一个异步函数&#xff0c;该函数支持 async/await 语法&#xff0c;它接收两个参数&#xff1a;…

【第 1 章 初识 C 语言】1.8 使用 C 语言的 7 个步骤

目录 1.8 使用 C 语言的 7 个步骤 1.8.1 第 1 步&#xff1a;定义程序的目标 1.8.2 第 2 步&#xff1a;设计程序 1.8.3 第 3 步&#xff1a;编写代码 1.8.4 第 4 步&#xff1a;编译 1.8.5 第 5 步&#xff1a;运行程序 1.8.6 第 6 步&#xff1a;测试和调试程序 1.8.…

React 路由与组件通信:如何实现路由参数、查询参数、state和上下文的使用

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

SpringMVC:参数传递之日期类型参数传递

环境准备和参数传递请见&#xff1a;SpringMVC参数传递环境准备 日期类型比较特殊&#xff0c;因为对于日期的格式有N多中输入方式&#xff0c;比如: 2088-08-182088/08/1808/18/2088… 针对这么多日期格式&#xff0c;SpringMVC该如何接收&#xff0c;它能很好的处理日期类…

【MyBatis】验证多级缓存及 Cache Aside 模式的应用

文章目录 前言1. 多级缓存的概念1.1 CPU 多级缓存1.2 MyBatis 多级缓存 2. MyBatis 本地缓存3. MyBatis 全局缓存3.1 MyBatis 全局缓存过期算法3.2 CacheAside 模式 后记MyBatis 提供了缓存切口&#xff0c; 采用 Redis 会引入什么问题&#xff1f;万一遇到需强一致场景&#x…

零基础快速掌握——【c语言基础】数组的操作,冒泡排序,选择排序

1.数组 内存空间连续&#xff1a; 2.定义格式 数组的定义格式&#xff1a; 数组分为一维数组、二维数组、以及多维数组&#xff0c;不同类型的数组定义格式时不一样 2.1 一维数组的定义 数据类型 数组名 [数组长度]&#xff1b; 解释&#xff1a; 数据类型&#xff1…