怎样把网站做成软件,网站建设步骤图片素材,个股期权网站开发,用wordpress案例项目需要实现花瓣图#xff0c;但是改图表在echarts#xff0c;highCharts等案例中均未出现#xff0c;有类似的韦恩图#xff0c;但是和需求有所差距#xff1b; 为实现该效果#xff0c;静态图表上采取svg来手动绘制花瓣#xff1a; 确定中心点#xff0c;以该点为中… 项目需要实现花瓣图但是改图表在echartshighCharts等案例中均未出现有类似的韦恩图但是和需求有所差距 为实现该效果静态图表上采取svg来手动绘制花瓣 确定中心点以该点为中心向四周绘制椭圆该图像为均等分布椭圆圆心不在中心点而是有一定的偏移度在中心点处绘制花心为一个圆形用于展示多朵花瓣的交集花瓣的长度颜色均可调整 技术点1svg绘制花瓣图
svg idflower-svg :widthflowerWidth :height flowerHeight !-- 动态生成花瓣 --g classflower-svg-leaf transformtranslate(320, 200)g v-for(leaf, index) in leafCount :keyindex :transformrotate(${(index * 360) / leafCount}) translate(55, 0)!-- 椭圆背景颜色来自于 colors 数组 --!-- 花瓣边框的颜色和透明度strokergb(255, 106, 0) stroke-opacity1--ellipse classsvg-leaf-item-ellipse :rxleafSize.rx :ryleafSize.ry:fillcolors[index] fill-opacity0.5/ellipse!-- 椭圆的内部数据 --text classsvg-leaf-item-text font-size12px font-familyArial fill#000000 text-anchorend dominant-baselinemiddletransformrotate(0) dx53 visibilityvisible dy250/text!-- 椭圆内部数据对应的外部标签 --text classsvg-leaf-item-group font-size12px font-familyArial fill#000000 text-anchorstartdominant-baselinemiddle transformrotate(0) dy2 dx110 visibilityvisibleLeaf {{ index 1 }}/text/g/g!-- 花心 --g classflower-svg-center transformtranslate(320, 200)circle classflower-svg-center-self :rleafSize.ry - 5 fillrgb(241, 43, 11) fill-opacity0.5strokergb(241, 43, 11) stroke-opacity0.5/circletext classflower-svg-center-text font-size12px font-familyArial fillrgb(255, 255, 255) visibilityvisibletext-anchormiddle dominant-baselinemiddle dy3141/text/g/svg静态代码详解 transformtranslate(320, 200)svg 的宽高分别为640400所以以偏移一半为中心g v-for(leaf, index) in leafCount :keyindex :transformrotate(${(index * 360) / leafCount}) translate(55, 0)leafCount为花瓣的数量对应transform为旋转角度等分显示每一朵花瓣用ellipse来绘制椭圆涉及的参数有长半轴短半轴填充颜色等一些基础配置后期均改为动态参数 技术点2el-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-modelselectedTemplateplaceholderchangehandleTemplateChangestylewidth: 250pxrefselectRefel-optionv-for(template, index) in colorTemplates:keyindex:labeltemplate.name:valuetemplate.namediv styledisplay: flex; gap: 5px!-- 展示每个模板下的颜色方块 --divv-for(color, colorIndex) in template.colors:keycolorIndexclasscolor-box:style{backgroundColor: color,width: 20px,height: 20px,}/div/div/el-option/el-select选择框回显色卡 首先清空选择框绑定的默认值selectedTemplate在此之前已经将该值传给Vuex不能通过this.$refs[selectRef].value去修改【不应该直接修改通过 props 传递过来的数据因为 Vue 会在每次重新渲染时重置这些值。】将色卡的十组数据生成svg字符串转化为base64编码以background:url()的方式回显到选择框中 getSvgString(colors) {const svgContent svg xmlnshttp://www.w3.org/2000/svg width200 height20${colors.map((color, index) rect x${index * 20} width20 height20 fill${color}/).join()}/svg;// 将SVG内容转换为Base64const base64EncodedSvg btoa(unescape(encodeURIComponent(svgContent))); // btoa编码encodeURIComponent避免特殊字符问题// 返回Base64编码后的SVG字符串用作背景图this.selectSVG url(data:image/svgxml;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;);},
