vue 梯形百分比占比图

最近碰到一个需求梯形占比，一开始两个数据写死的，后面变成三个数据需要动态计算高度

  本人的理解：1、求它的方向 （需求点：第一个值和最后一个值比较大小）true:从左至右    false：从右至左2、求它的高度：（最大值和最小值是确定50和16），2-1.求它的偏差值：50-16，2-2.求它上一个梯形的高度：第一个梯形的值至有两种情况要么最高50要么最低162-3.求当前梯形的高从左至右（true）, 上一个梯形高度 - 偏差值 * (当前高度 / 100 )   从右至左（false）, 上一个梯形高度 + 偏差值 * （当前高度 / 100）3、图形用css裁剪出来   clip-path: polygon(上左坐标点(x,y),上右,下右, 下左);clip-path: polygon(0% 0%,100% 60%,100% 100%, 0% 100%);

核心代码：

 computed: {itemData () {return this.compData},itemValues () {// returnreturn this.itemData.data},direction () {// true: left to right、 false: right to leftreturn this.itemValues[0].value > this.itemValues[this.itemData.data.length - 1].value}},methods: {curBoxH (i) {// 如果当前i小于0，并且方向是从左往右，高是50，如果是从右向左，高是16if (i < 0) return this.direction ? 50 : 16// 如果当前i大于等于当前数据的length,并且方向是从左往右，高是16，如果是从右往左的话，高是50if (i >= this.itemValues.length) return this.direction ? 16 : 50// 当前box的所占百分比const curVal = this.itemValues[0].value === 0 && !this.itemValues.some(item => item.value > 0) ? parseInt(100 / this.itemValues.length) : this.itemValues[i].value// 偏差值const offsetVal = 50 - 16// 计算上一个盒子的高度const preH = this.curBoxH(i - 1)// 计算当前盒子的高度，如果是从左往右， 上一个盒子的高度 - 偏差值 * ( 当前所占百分比 / 100) ，如果是从右到左， 上一个盒子的高度 + 偏差值 * (当前所占百分比 / 100 )return this.direction ? preH - offsetVal * (curVal / 100) : preH + offsetVal * (curVal / 100)},curBoxW (i) {// 当前盒子所占百分比const curVal = this.itemValues[0].value === 0 && !this.itemValues.some(item => item.value > 0) ? parseInt(100 / this.itemValues.length) : this.itemValues[i].value// 当前盒子的宽度return (curVal / 100) * this.totalClientWidth}}

完整代码

<template><div><div class="div-content"><span>{{itemData.title}}</span><div style="display: flex;align-items: flex-end;"><divv-for="(item, index) in itemValues":key="index"class="front-trapezoid"@click="openPieModel(item.title)":style="{width: curBoxW(index) + 'px',height: direction  ?  curBoxH(index - 1) + 'px': curBoxH(index) + 'px',clipPath: direction ? `polygon(0% 0%,100% ${curBoxH(index - 1) - curBoxH(index)}px,100% 100%, 0% 100%)`:`polygon(0% ${curBoxH(index) - curBoxH(index - 1)}px,100% 0%,100% 100%, 0% 100%)`,background: `linear-gradient(to right, ${itemData.color[index][direction ? 0 : 1]}, ${itemData.color[index][direction ? 1 : 0]})`,marginLeft: index === 1 || index === 2 ? '1px':'0'}"></div></div><div class="txt-wrap"><div class="left-text"><span class="series-value">{{leftItemValue.value.toFixed(0)}}%</span><span class="series-name">{{leftItemValue.name}}</span></div><div class="middle-text" v-if="itemValues.length >= 3" :style="{left:direction ? (curBoxW(0) + 2) + 'px' : ''}"><span class="series-value">{{itemValues[1].value.toFixed(0)}}%</span><span class="series-name">{{itemValues[1].name}}</span></div><div class="triangle"></div><div class="right-text"><span class="series-value">{{rightItemValue.value.toFixed(0)}}%</span><span class="series-name">{{rightItemValue.name}}</span></div></div></div></div>
</template><script>
export default {name: 'trapezoidComp',props: {compData: {type: Object,default: () => ({})}},data () {return {totalClientWidth: 0}},mounted () {this.$nextTick(() => {if (this.$el.querySelector('.div-content')) {const offsetVal = this.itemValues.length > 3 ? 2 : 1this.totalClientWidth = this.$el.querySelector('.div-content').clientWidth - offsetVal}})},computed: {itemData () {return this.compData},leftItemValue () {return this.itemData.data[0]},rightItemValue () {return this.itemData.data[this.itemData.data.length - 1]},itemValues () {// returnreturn this.itemData.data},direction () {// true: left to right、 false: right to leftreturn this.itemValues[0].value > this.itemValues[this.itemData.data.length - 1].value}},methods: {openPieModel (data) {console.log('data=', data)const nameArr = {年龄结构: 'bznl',学历结构: 'bzxl',专业结构: 'bzzy',党派结构: 'bzdp',性别结构: 'bzxb'}this.$emit('changePieModelVisable', nameArr[data])},curBoxH (i) {// 如果当前i小于0，并且方向是从左往右，高是50，如果是从右向左，高是16if (i < 0) return this.direction ? 50 : 16// 如果当前i大于等于当前数据的length,并且方向是从左往右，高是16，如果是从右往左的话，高是50if (i >= this.itemValues.length) return this.direction ? 16 : 50// 当前box的所占百分比const curVal = this.itemValues[0].value === 0 && !this.itemValues.some(item => item.value > 0) ? parseInt(100 / this.itemValues.length) : this.itemValues[i].value// 偏差值const offsetVal = 50 - 16// 计算上一个盒子的高度const preH = this.curBoxH(i - 1)// 计算当前盒子的高度，如果是从左往右， 上一个盒子的高度 - 偏差值 * ( 当前所占百分比 / 100) ，如果是从右到左， 上一个盒子的高度 + 偏差值 * (当前所占百分比 / 100 )return this.direction ? preH - offsetVal * (curVal / 100) : preH + offsetVal * (curVal / 100)},curBoxW (i) {const curVal = this.itemValues[0].value === 0 && !this.itemValues.some(item => item.value > 0) ? parseInt(100 / this.itemValues.length) : this.itemValues[i].valuereturn (curVal / 100) * this.totalClientWidth}}
}
</script><style scoped lang="less">.div-content{width:100%;margin-bottom: 20px;margin-right: 4%;position: relative;> span{display: block;font-size: 14px;height: 40px;}.front-trapezoid{width: 200px;height: 50px;position: relative;background: linear-gradient(to right, #c02425, #f0cb35);clip-path: polygon(0% 0%,100% 34px,100% 100%, 0% 100%);}.behind-trapezoid{width: 40px;height: 16px;margin-left: 1px;/*共性*/position: relative;background: linear-gradient(to right, #c02425, #f0cb35);clip-path: polygon(0% 0%,100% 60%,100% 100%, 0% 100%);}.txt-wrap{display: flex;.left-text{position: absolute;bottom: -5px;left: 4px;font-size: 12px;.series-value{color: #fff;}.series-name{display: block;color: #333333;}}.middle-text{position: absolute;bottom: -5px;font-size: 12px;.series-value{color: #fff;}.series-name{display: block;color: #333333;}}.right-text{position: absolute;right: 4px;bottom: -5px;font-size: 12px;text-align: right;.series-value{color: #fff;}.series-name{display: block;color: #333333;}}}.triangle{margin: 4px auto 0;width: 0px;height: 0px;border-width:0px 6px 10px 6px;border-style:none solid solid solid;border-color: transparent transparent #9b9b9b}}
</style>

本人理解的程度中度，如有更好的理解方法，欢迎评论留言，谢谢

vue 梯形百分比占比图相关推荐

R语言plotly可视化：plotly可视化分裂的分组小提琴图、每个小提琴图内部分为两组数据、每个分组占小提琴图的一半（Split violin plot in R with plotly）
R语言plotly可视化:plotly可视化分裂的分组小提琴图.每个小提琴图内部分为两组数据.每个分组占小提琴图的一半(Split violin plot in R with plotly) 目录
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
Vue 实现商品详情多播图(点击图片列表轮播图)
Vue 实现商品详情多播图(点击轮播图) 之前弄商城项目有要到这种效果的商品展示图(商品图片轮播),找了很久没找到,就自己写了一个. 实现效果: 点击左右按钮图片左右移动点击小图片图片展示到大图图 ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
vue，img引入网图无法显示
vue,img引入网图无法显示,但是这个图片地址直接复制出来在地址栏打开,却是看得到的,在index.html种加入这行引入 <meta name="referrer" co ...
纯css3实现圆环占比图
圆环占比图可以用canvas实现,可以用svg实现,这里使用css3实现,兼容ie10以上,实现原理盒模型层叠,css3选装,超出隐藏实现步骤: 创建5个盒模型(这里使用伪类) 1,.left d ...
数据可视化项目---订单分类占比图
效果如下订单分类占比图-组件代码  <template><div class="com-container">&l ...

vue 梯形百分比占比图

核心代码：

完整代码

vue 梯形百分比占比图相关推荐

最新文章

热门文章