vue左侧漏斗切换 echart图表动态更新

这个需求是根据点击左侧的箭头部分,右侧图表切换,左侧选中数据高亮(图片用的svg)

一、效果图

 

 二、vue组件

<template><div class="funnel_wrap"><div class="flex_between"><div class="sec_title">测试</div><!-- <el-checkbox label="平均值" v-model="averageCheck"  @change="changeAverage"></el-checkbox> --></div><div class="flex_center funnel_con" v-if="flowList.items&&flowList.items.length>0"><div class="flow_con"><div class="left_position pointer"><svg-icon icon-class="arrow" :style="`color:${chooseId==5||chooseId==6||chooseId==7?'green':'#DFE1EB'};position:absolute;right:0;bottom:-3px;width: 6px;height: 6px;`"></svg-icon><div @click="changeFunnel(7)" :class="['left_top',chooseId==7?'leftactive':'']"><div class="left_title">{{radioList[6]}}%</div></div><div @click="changeFunnel(6)" :class="['left_cen',chooseId==6?'leftactive':'']"  :style="`${chooseId==7?'border-bottom:0':''}`"><div class="left_title">{{radioList[5]}}%</div></div><div @click="changeFunnel(5)" :class="['left_bot',chooseId==5?'leftactive':'']" :style="`${chooseId==7||chooseId==6?'border-bottom:0':''}`"><div class="left_title">{{radioList[4]}}%</div></div></div><div :class="['flow_item',chooseList.includes(item.id)?'active':''] " :style="'width:'+(255-(12*index))+'px'" v-for="(item,index) in flowList.items" :key="index"><div class="item_lef">{{item.title}}</div><div class="item_rig" >{{item.newValue}}<div class="funnle"></div></div><div class="svg_box" v-if="index!==4" :style="`color:${chooseId==index?'green':'#DFE1EB'};right:-${(15+12*index)}px`" ><svg-icon @click="changeFunnel(index)" class="pointer" :style="'height:42px;width:'+(26+index*12)+'px'" :icon-class="'funnel'+index"></svg-icon><div class="title"  :style="`left:${(30+index*12)}px;color:${chooseId==index?'green':'#212848'}`">{{radioList[index]}}%</div></div></div></div><div class="flow_echart"><line-vue v-if="lineOpt.id" :opt="lineOpt" :heightNum="300"></line-vue></div></div><div v-else class="none">暂无数据</div></div>
</template><script>
import { defineComponent, onMounted, computed,reactive,ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { roomflow } from "@/api/analyze/index.js";
import lineVue from "@/components/echartsChange/lineVue.vue";
import { thousandthis, valueTransfer,processingData,$formatTime,millionTransfer } from "@/utils/utils";
export default defineComponent({components:{lineVue},props: {opt: {type: Object,default: () => {return {roomId:'',userId:''};},},optIds: {type: Object,default: () => {return {lineId: "funnel_data_id", // echarts图表默认id 同一个页面多次引用当前组件 id不能相同};},},},setup(props,context) {const router = useRouter(),route = useRoute()let averageCheck=ref(false)//平均值flagconst industryAvg=ref('')//平均值const formatTime=$formatTimeconst lineOpt = ref({});const chooseList=ref([0,1])//选中idconst chooseListArr=ref([])//选中趋势图const flowList=ref([])//漏斗列表const trendList=ref([])//曲线图列表const chooseId=ref('0')let radioList=ref([])//占比let colors = ["#4CAF50","#556FFD","#91CC75","#EA8533","#283E81","#097C38","#48D9D9","#93BEFF",];let renderColors = colors;const initData = (res,arrline) => {let data = res;if (data && data.length > 0) {let xList = [];let seriesList = [];let maxArr=[]data.forEach((element, index) => {element.points=element.points||[]maxArr.push(element.points.length)let arrnew=[]// if(element.points.length>0){arrnew = element.points.map((obj) => {return obj.value;}).join(",").split(",");// }     seriesList.push({name: element.title,type: "line",showSymbol: false,symbolSize: 6,seriesLayoutBy: "row",emphasis: { focus: "series" },data: [...arrnew],markLine : {symbol: ['none'],data : arrline?arrline:[],emphasis: {lineStyle: {width: 1,	// hover时的折线宽度}},},lineStyle: {width: 1,},         });});let max=Math.max(...maxArr)let maxIndex=maxArr.map(item => item).indexOf(max)xList = data[maxIndex].points.map((item) => {return formatTime(item.date,'HH:mm');});lineOpt.value = {id: props.optIds.lineId,resize:true,options: {color: renderColors,title: {text: "",},legend: {icon: "circle",// selectedMode:'single',itemHeight: 6,itemWidth: 6,left: "0px",itemGap: 24,// top:'bottom',textStyle: {//图例文字的样式color: "#596076",fontSize: 14,padding: [0, 0, 0, 0], //文字与图形之间的左右间距},// data: ["签约汇总", "计划招募", "计划孵化"],},tooltip: {// 鼠标移入的展示trigger: "axis",// axisPointer: {//   type: "cross",//   label: {//     backgroundColor: "#6a7985",//   },// },formatter: function (params) {let res = params[0].name+'分析数据\n';for (let i = 0; i < params.length; i++) {res += `<div style="margin-top: 4px;font-size: 14px;line-height: 22px;color: #596076;">${params[i].marker} ${params[i].seriesName}:${thousandthis(params[i].data)}</div>`;}return res;},backgroundColor: "rgba(255,255,255,.9)",borderColor: "#E2E6F5",borderWidth: 1,padding: [12, 16, 16, 16],},grid: {// 图表距离容器的距离left: "1%",right: '4%',bottom: "3%",top:'22%',containLabel: true, // 是否显示刻度,默认不显示},xAxis: [{type: "category",boundaryGap: false,axisLabel: {color: "#9095A7",fontSize: 12,margin: 13,},axisLine: {lineStyle: {color: "#DFE1EB",},},axisTick: {show: false,},data: xList,},],yAxis: [{type: "value",// min: 0,// max: function (value) {//   return value.max < 400 ? 400 : value.max;// },// interval: 1000,// splitNumber: 4,axisLabel: {color: "#9095A7",formatter(v) {return valueTransfer(Math.abs(v), 0, "w", true);},},splitLine: {lineStyle: {type: "dashed", //虚线},},},],series: seriesList,},};}};//格式化选中线条const initChoosrArr=(arrList)=>{let arr=[]chooseList.value.forEach((ele)=>{arr.push(arrList[ele])})return arr}//获取漏斗列表const getList = () => {let param = {userId:props.opt.userId,roomId: props.opt.roomId,};// roomflow(param).then((res) => { let res=    {"code": 200,"msg": "ok","data": {"flowRank": {"name": "flowRank","title": "测试数据","items": [{"title": "数据1","ratio": 1.0,"value": 2833543},{"title": "数据2","ratio": 0.12883587790974055,"value": 365062},{"title": "数据3","ratio": 0.85563822035709,"value": 312361},{"title": "数据4","ratio": 0.09972755881816232,"value": 31151},{"title": "数据5","ratio": 0.016532374562614364,"value": 515}],},"trends": [{"title": "数据1","points": [{"value": 30000,"date": "2023-07-02 09:25:00"},{"value": 35000,"date": "2023-07-02 09:30:00"},{"value": 50000,"date": "2023-07-02 09:35:00"},{"value": 100000,"date": "2023-07-02 09:40:00"},{"value": 130003,"date": "2023-07-02 09:45:00"},{"value": 190000,"date": "2023-07-02 09:50:00"},{"value": 230000,"date": "2023-07-02 09:55:00"},{"value": 250000,"date": "2023-07-02 10:00:00"},]},{"title": "数据2","points": [{"value": 6000,"date": "2023-07-02 09:25:00"},{"value": 7000,"date": "2023-07-02 09:30:00"},{"value": 8000,"date": "2023-07-02 09:35:00"},{"value": 9000,"date": "2023-07-02 09:40:00"},{"value": 10000,"date": "2023-07-02 09:45:00"},{"value": 11000,"date": "2023-07-02 09:50:00"},{"value": 12000,"date": "2023-07-02 09:55:00"},{"value": 21810,"date": "2023-07-02 10:00:00"},]},{"title": "数据3","points": [{"value": 4500,"date": "2023-07-02 09:25:00"},{"value": 4700,"date": "2023-07-02 09:30:00"},{"value": 10000,"date": "2023-07-02 09:35:00"},{"value": 10214,"date": "2023-07-02 09:40:00"},{"value": 12000,"date": "2023-07-02 09:45:00"},{"value": 13000,"date": "2023-07-02 09:50:00"},{"value": 14000,"date": "2023-07-02 09:55:00"},{"value": 15000,"date": "2023-07-02 10:00:00"},]},{"title": "数据4","points": [{"value": 400,"date": "2023-07-02 09:25:00"},{"value": 800,"date": "2023-07-02 09:30:00"},{"value": 1100,"date": "2023-07-02 09:35:00"},{"value": 1200,"date": "2023-07-02 09:40:00"},{"value": 1400,"date": "2023-07-02 09:45:00"},{"value": 1600,"date": "2023-07-02 09:50:00"},{"value": 1800,"date": "2023-07-02 09:55:00"},{"value": 2000,"date": "2023-07-02 10:00:00"},]},{"title": "数据5","points": [{"value": 0,"date": "2023-07-02 09:25:00"},{"value": 2,"date": "2023-07-02 09:30:00"},{"value": 13,"date": "2023-07-02 09:35:00"},{"value": 14,"date": "2023-07-02 09:40:00"},{"value": 34,"date": "2023-07-02 09:45:00"},{"value": 40,"date": "2023-07-02 09:50:00"},{"value": 53,"date": "2023-07-02 09:55:00"},{"value": 63,"date": "2023-07-02 10:00:00"},]}],"industryAvg": 100}
}if (res.data) {if(res.data.flowRank.items){radioList.value=[]//格式漏斗右侧返回占比res.data.flowRank.items.forEach((ele,index) => {ele.id=indexele.newValue=millionTransfer(ele.value)if(index!==0){radioList.value.push(processingData(ele.ratio*100,2))}});// 漏斗左侧百分比计算radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[2].value)*100,2))radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[1].value)*100,2))          radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[0].value)*100,2))}//绘制图表if(res.data.trends){chooseListArr.value=initChoosrArr(res.data.trends)initData(chooseListArr.value)}flowList.value=res.data.flowRanktrendList.value=res.data.trendsindustryAvg.value=res.data.industryAvg}// });};//点击漏斗const changeFunnel=(val)=>{chooseId.value=val;if(val<5){chooseList.value=[val,val+1]}else if(val==5){chooseList.value=[2,4]}if(val==6){chooseList.value=[1,4]}if(val==7){chooseList.value=[0,4]}chooseListArr.value=initChoosrArr(trendList.value)// 先判断是否有平均线再重绘图表changeAverage(averageCheck.value)}//点击平均值 val=true有平均线const changeAverage=(val)=>{if(val){let arrline=[{symbol: "none",silent:false, //鼠标悬停事件 true没有,false有lineStyle:{ //警戒线的样式 ,虚实 颜色type:"dashed", //样式  ‘solid’和'dotted'color:"#E98433",width: 1   //宽度},label:{show:false,color:"#E98433",position:'middle',// padding: ['0', '0', '0',tableWidth.value],formatter: function (params) {let res = "";res += `${params.name}:${params.value}`;return res;},},name:'平均值',yAxis:industryAvg.value}]initData(chooseListArr.value,arrline)}else{initData(chooseListArr.value)}}watch(props,(newValue) => {console.log(newValue);if (newValue && newValue.opt && newValue.opt.roomId) {getList()}},{  deep: true });onMounted(()=>{// getList()})return {flowList,chooseList,changeFunnel,chooseId,radioList,trendList,lineOpt,averageCheck,changeAverage}}
})
</script><style scoped lang="scss">
.funnel_wrap{margin-top: 24px;padding: 24px;color: #212848;font-size: 14px;background-color: #fff;.sec_title{font-size: 18px;font-weight: 500;}.funnel_con{padding: 24px;}.flow_con{position: relative;padding-left: 100px;padding-right: 112px;.left_position{position: absolute;top: 30px;left:0;.left_top{width: 100px;height: 198px;color:#DFE1EB;border:1px solid #DFE1EB;border-right:0;}.left_cen{width: 72px;height: 146px;position:absolute;left:24px;bottom:-0.5px;color:#DFE1EB;border:1px solid #DFE1EB;border-right:0;}.left_bot{width: 25px;height: 92px;position:absolute;left:72px;color:#DFE1EB;bottom:0px;border:1px solid #DFE1EB;border-right:0;}.left_title{position: absolute;line-height: 20px;top: -24px;right: 0;       color: #212848;}.leftactive{border:1px solid green;border-right:0;color: green;.left_title{color: green;}}}.flow_item{background-color:#F8F9FB ;margin-bottom: 12px;height: 40px;line-height: 40px;display: flex;align-items: center;position: relative;.item_lef{width: 116px;text-align: center;box-sizing: border-box;}.item_rig{padding-left: 16px;position: relative;flex: 1;.funnle{position: absolute;border-bottom:40px solid #fff;border-left: 12px solid transparent;right: 0;top: 0;}}}.active{.item_lef{background-color: green;color: #fff;}.item_rig{background-color: #EEF1FF;}}.svg_box{position: absolute;top: 25px;right: -10px;.title{position: absolute;left:0;top: 0;}}}.flow_echart{flex: 1;}.none{margin-top: 12px;color: #9095A7;text-align: center;}
}
// .svg-icon {
//   height: 3em;
// }
</style>

三、utils.js方法

export function millionTransfer(value,digits = 4,unit = "w",decimal = 2,removeZero = false
) {// unit = unit || "w"const valueNum = Number(value)const transferNum = Math.pow(10, digits)if (!isNaN(valueNum)) {if (valueNum < transferNum && valueNum >= 0) {return value}const num = floatDivideMethod(valueNum, transferNum)if (removeZero) {return `${parseFloat(num.toFixed(decimal))}${unit}`}return `${num.toFixed(decimal)}${unit}`}return value
}export function thousandthis(num) {if (!num && num !== 0) return nullif (num === '--') return '--'if (!(!isNaN(Number(num)) && typeof Number(num) === 'number')) {return '0'}return (num || 0).toString().replace(/\d+/, function(n) {const len = n.lengthif (len % 3 === 0) {return n.replace(/(\d{3})/g, ',$1').slice(1)}return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1')})
}/* 最早的数据没有亿,只有万,兼容之前数据,后面转换万和亿的数据用这个方法 */
export function valueTransfer(value, decimal = 2, unit = "万", removeZero = false) {let outputVal = valueconst valueNum = Number(value)const transferNum1 = Math.pow(10, 4)const transferNum2 = Math.pow(10, 8)if (!isNaN(valueNum)) {if (valueNum < transferNum1) {outputVal = value} else if (valueNum >= transferNum1 && valueNum < transferNum2) {outputVal = millionTransfer(value, 4, unit, decimal, removeZero)} else {outputVal = millionTransfer(value, 8, "亿", decimal, removeZero)}}return outputVal
}//保留两位小数
export function processingData(data,length){data=Number(data);data=Number((parseInt(data * 100) / 100).toFixed((length!=undefined?length:2)))data=data+''return data
}import moment from "moment"
export function $formatTime (time, format = "YYYY-MM-DD HH:mm:ss") {if (time && time !== "--") {if (format === "timestamp") {return Number(moment(time).utcOffset(8).format("x"))}return moment(time).format(format)}return time
}

四、父组件调用

import flowFunnel from "./components/flowFunnel.vue";components:{flowFunnel,},

 

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

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

相关文章

Mac 安装php多版本,brew安装php8.0

因为需要我要在mac上装两个php版本&#xff0c;先前我已经装过php7.4,下面我们逐步安装php8.0 开始安装8.0&#xff1a; 直接运行安装 brew install php8.0 遇到问题怀疑是仓库太老了&#xff0c;更新一下homebrew ,重新安装 brew update 安装成功了,不过看了下版本好像不能正…

Remmina在ubuntu22.04中无法连接Windows

Remmina在ubuntu22.04中无法连接Windows 问题 提示为&#xff1a; 无法通过TLS到RDP服务器… 分析 原因是Remmina需要使用openssl通过RDP加密与Windows计算机连接&#xff0c;而ubuntu22.04系统中OpenSSL版本为3.0&#xff0c;Openssl3 将 tls<1.2 和 sha1 的默认安全级别…

2023年高教社杯数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…

docker容器运行成功但无法访问,原因分析及对应解决方案(最新,以Tomcat为例,亲测有效)

原因分析&#xff1a; 是否能访问当运行docker容器虚拟机&#xff08;主机&#xff09;地址 虚拟机对应的端口号是否开启或者防墙是否关闭 端口映射是否正确&#xff08;这个是我遇到的&#xff09; tomcat下载的是最新版&#xff0c;docker运行后里面是没有东西的&am…

软件测试技术分享丨使用Postman搞定各种接口token实战

现在许多项目都使用jwt来实现用户登录和数据权限&#xff0c;校验过用户的用户名和密码后&#xff0c;会向用户响应一段经过加密的token&#xff0c;在这段token中可能储存了数据权限等&#xff0c;在后期的访问中&#xff0c;需要携带这段token&#xff0c;后台解析这段token才…

[第七届蓝帽杯全国大学生网络安全技能大赛 蓝帽杯 2023]——Web方向部分题 详细Writeup

Web LovePHP 你真的熟悉PHP吗&#xff1f; 源码如下 <?php class Saferman{public $check True;public function __destruct(){if($this->check True){file($_GET[secret]);}}public function __wakeup(){$this->checkFalse;} } if(isset($_GET[my_secret.flag]…

【MySQL系列】表的内连接和外连接学习

「前言」文章内容大致是对MySQL表的内连接和外连接。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、内连接二、外连接2.1 左外连接2.2 右外连接 一、内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;前面篇章学习的…

Mybatis 里面的缓存机制

Mybatis 里面设计的二级缓存是用来提升数据的检索效率&#xff0c;避免每次数据的访问都需要去查询数据库。 一级缓存&#xff0c;是 SqlSession 级别的缓存&#xff0c;也叫本地缓存&#xff0c;因为每个用户在执行查询的时 候都需要使用 SqlSession 来执行&#xff0c; 为了避…

CSAPP的Lab学习——BombLab

文章目录 前言一、一号炸弹&#xff08;小试牛刀&#xff09;二、二号炸弹&#xff08;六重循环&#xff09;三、三号炸弹&#xff08;不同输入&#xff0c;不同答案&#xff09;四、四号炸弹&#xff08;判断语句的实现&#xff09;五、五号炸弹&#xff08;跳转&#xff0c;循…

selenium可以编写自动化测试脚本吗?

Selenium可以用于编写自动化测试脚本&#xff0c;它提供了许多工具和API&#xff0c;可以与浏览器交互&#xff0c;模拟用户操作&#xff0c;检查网页的各个方面。下面是一些步骤&#xff0c;可以帮助你编写Selenium自动化测试脚本。 1、安装Selenium库和浏览器驱动程序 首先…

云服务器利用Docker搭建sqli-labs靶场环境

一、安装宝塔面板 使用xshell、electerm、SecureCRT等远程终端连接登陆上云服务器&#xff0c;在Linux宝塔面板使用脚本安装 安装后&#xff0c;如下图&#xff1a;按照提示&#xff0c;在云服务器防火墙/安全组放行Linux宝塔面板的端口 在浏览器打开上述网址&#xff0c;登…

“媒体+”时代正当时,ATEN以前瞻解决方案助推媒体融合纵深发展

自媒体融合概念提出以来,传统媒体与新媒体融合速度加快,两者的相互结合与优势互补为广电行业发展提供了新的契机,更加多元化、个性化、强互动的“媒体”传播格局已逐渐形成。 “媒体”理念的创建,对于广电行业而言无疑是一种积极的改革创新之举,然而“媒体”的发展也呈现出泛媒…