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

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

    一、效果图

     

     二、vue组件

    1. <template>
    2.   <div class="funnel_wrap">
    3.     <div class="flex_between">
    4.       <div class="sec_title">测试</div>
    5.         <!-- <el-checkbox label="平均值" v-model="averageCheck"  @change="changeAverage"></el-checkbox> -->
    6.     </div>
    7.     <div class="flex_center funnel_con" v-if="flowList.items&&flowList.items.length>0">
    8.       <div class="flow_con">
    9.         <div class="left_position pointer">
    10.           <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>
    11.           <div @click="changeFunnel(7)" :class="['left_top',chooseId==7?'leftactive':'']">
    12.             <div class="left_title">{{radioList[6]}}%</div>
    13.           </div>
    14.           <div @click="changeFunnel(6)" :class="['left_cen',chooseId==6?'leftactive':'']"  :style="`${chooseId==7?'border-bottom:0':''}`">
    15.             <div class="left_title">{{radioList[5]}}%</div>
    16.           </div>
    17.           <div @click="changeFunnel(5)" :class="['left_bot',chooseId==5?'leftactive':'']" :style="`${chooseId==7||chooseId==6?'border-bottom:0':''}`">
    18.             <div class="left_title">{{radioList[4]}}%</div>
    19.           </div>
    20.         </div>
    21.         <div :class="['flow_item',chooseList.includes(item.id)?'active':''] " :style="'width:'+(255-(12*index))+'px'" v-for="(item,index) in flowList.items" :key="index">
    22.           <div class="item_lef">{{item.title}}</div>
    23.           <div class="item_rig" >{{item.newValue}}
    24.             <div class="funnle"></div>
    25.           </div>
    26.          <div class="svg_box" v-if="index!==4" :style="`color:${chooseId==index?'green':'#DFE1EB'};right:-${(15+12*index)}px`" >
    27.           <svg-icon @click="changeFunnel(index)" class="pointer" :style="'height:42px;width:'+(26+index*12)+'px'" :icon-class="'funnel'+index"></svg-icon>
    28.           <div class="title"  :style="`left:${(30+index*12)}px;color:${chooseId==index?'green':'#212848'}`">{{radioList[index]}}%</div>
    29.          </div>
    30.         </div>
    31.       </div>
    32.       <div class="flow_echart">
    33.         <line-vue v-if="lineOpt.id" :opt="lineOpt" :heightNum="300"></line-vue>
    34.      </div>
    35.     </div>
    36.     <div v-else class="none">暂无数据</div>
    37.   </div>
    38. </template>
    39.  
    40. <script>
    41. import { defineComponent, onMounted, computed,reactive,ref } from 'vue'
    42. import { useRouter, useRoute } from 'vue-router'
    43. import { roomflow } from "@/api/analyze/index.js";
    44. import lineVue from "@/components/echartsChange/lineVue.vue";
    45. import { thousandthis, valueTransfer,processingData,$formatTime,millionTransfer } from "@/utils/utils";
    46. export default defineComponent({
    47.   components:{
    48.     lineVue
    49.   },
    50.   props: {
    51.     opt: {
    52.       type: Object,
    53.       default: () => {
    54.         return {
    55.           roomId:'',
    56.           userId:''
    57.         };
    58.       },
    59.     },
    60.     optIds: {
    61.       type: Object,
    62.       default: () => {
    63.         return {
    64.           lineId: "funnel_data_id", // echarts图表默认id 同一个页面多次引用当前组件 id不能相同
    65.         };
    66.       },
    67.     },
    68.   },
    69.   setup(props,context) {
    70.   const router = useRouter(),
    71.     route = useRoute()
    72.     let averageCheck=ref(false)//平均值flag
    73.     const industryAvg=ref('')//平均值
    74.     const formatTime=$formatTime
    75.      const lineOpt = ref({});
    76.     const chooseList=ref([0,1])//选中id
    77.     const chooseListArr=ref([])//选中趋势图
    78.     const flowList=ref([])//漏斗列表
    79.     const trendList=ref([])//曲线图列表
    80.     const chooseId=ref('0')
    81.     let radioList=ref([])//占比
    82.       let colors = [
    83.       "#4CAF50",
    84.       "#556FFD",
    85.       "#91CC75",
    86.       "#EA8533",
    87.       "#283E81",
    88.       "#097C38",
    89.       "#48D9D9",
    90.       "#93BEFF",
    91.     ];
    92.     let renderColors = colors;
    93.     const initData = (res,arrline) => {
    94.       let data = res;
    95.       if (data && data.length > 0) {
    96.         let xList = [];
    97.         let seriesList = [];
    98.         let maxArr=[]
    99.         data.forEach((element, index) => {
    100.           element.points=element.points||[]
    101.           maxArr.push(element.points.length)
    102.           let arrnew=[]
    103.           // if(element.points.length>0){
    104.              arrnew = element.points
    105.             .map((obj) => {
    106.               return obj.value;
    107.             })
    108.             .join(",")
    109.             .split(",");
    110.           // }     
    111.           seriesList.push({
    112.             name: element.title,
    113.             type: "line",
    114.             showSymbol: false,
    115.             symbolSize: 6,
    116.             seriesLayoutBy: "row",
    117.             emphasis: { focus: "series" },
    118.             data: [...arrnew],
    119.             markLine : {
    120.                 symbol: ['none'],
    121.                 data : arrline?arrline:[],
    122.                 emphasis: {
    123.                   lineStyle: {
    124.                     width: 1,	// hover时的折线宽度
    125.                   }
    126.                 },
    127.             },
    128.             lineStyle: {
    129.               width: 1,
    130.             },         
    131.           });
    132.         });
    133.          let max=Math.max(...maxArr)
    134.         let maxIndex=maxArr.map(item => item).indexOf(max)
    135.         xList = data[maxIndex].points.map((item) => {
    136.          return formatTime(item.date,'HH:mm');
    137.         });
    138.         lineOpt.value = {
    139.           id: props.optIds.lineId,
    140.           resize:true,
    141.           options: {
    142.             color: renderColors,
    143.             title: {
    144.               text: "",
    145.             },
    146.             legend: {
    147.               icon: "circle",
    148.               // selectedMode:'single',
    149.               itemHeight: 6,
    150.               itemWidth: 6,
    151.               left: "0px",
    152.               itemGap: 24,
    153.               // top:'bottom',
    154.               textStyle: {
    155.                 //图例文字的样式
    156.                 color: "#596076",
    157.                 fontSize: 14,
    158.                 padding: [0, 0, 0, 0], //文字与图形之间的左右间距
    159.               },
    160.               // data: ["签约汇总", "计划招募", "计划孵化"],
    161.             },
    162.             tooltip: {
    163.               // 鼠标移入的展示
    164.               trigger: "axis",
    165.               // axisPointer: {
    166.               //   type: "cross",
    167.               //   label: {
    168.               //     backgroundColor: "#6a7985",
    169.               //   },
    170.               // },
    171.               formatter: function (params) {
    172.                  let res = params[0].name+'分析数据\n';
    173.                 for (let i = 0; i < params.length; i++) {
    174.                   res += `<div style="margin-top: 4px;font-size: 14px;line-height: 22px;color: #596076;">${
    175.                     params[i].marker
    176.                   } ${params[i].seriesName}：${thousandthis(
    177.                     params[i].data
    178.                   )}</div>`;
    179.                 }
    180.                 return res;
    181.               },
    182.               backgroundColor: "rgba(255,255,255,.9)",
    183.               borderColor: "#E2E6F5",
    184.               borderWidth: 1,
    185.               padding: [12, 16, 16, 16],
    186.             },
    187.             grid: {
    188.               // 图表距离容器的距离
    189.               left: "1%",
    190.               right: '4%',
    191.               bottom: "3%",
    192.               top:'22%',
    193.               containLabel: true, // 是否显示刻度，默认不显示
    194.             },
    195.             xAxis: [
    196.               {
    197.                 type: "category",
    198.                 boundaryGap: false,
    199.                 axisLabel: {
    200.                   color: "#9095A7",
    201.                   fontSize: 12,
    202.                   margin: 13,
    203.                 },
    204.                 axisLine: {
    205.                   lineStyle: {
    206.                     color: "#DFE1EB",
    207.                   },
    208.                 },
    209.                 axisTick: {
    210.                   show: false,
    211.                 },
    212.                 data: xList,
    213.               },
    214.             ],
    215.             yAxis: [
    216.               {
    217.                 type: "value",
    218.                 // min: 0,
    219.                 // max: function (value) {
    220.                 //   return value.max < 400 ? 400 : value.max;
    221.                 // },
    222.                 // interval: 1000,
    223.                 // splitNumber: 4,
    224.                 axisLabel: {
    225.                   color: "#9095A7",
    226.                   formatter(v) {
    227.                     return valueTransfer(Math.abs(v), 0, "w", true);
    228.                   },
    229.                 },
    230.                 splitLine: {
    231.                   lineStyle: {
    232.                     type: "dashed", //虚线
    233.                   },
    234.                 },
    235.               },
    236.             ],
    237.             series: seriesList,
    238.           },
    239.         };
    240.       }
    241.     };
    242.     //格式化选中线条
    243.     const initChoosrArr=(arrList)=>{
    244.       let arr=[]
    245.       chooseList.value.forEach((ele)=>{
    246.          arr.push(arrList[ele])
    247.        })
    248.       return arr
    249.     }
    250.    //获取漏斗列表
    251.     const getList = () => {
    252.       let param = {
    253.         userId:props.opt.userId,
    254.         roomId: props.opt.roomId,
    255.       };
    256.       // roomflow(param).then((res) => { 
    257.         let res=    {
    258.       "code": 200,
    259.       "msg": "ok",
    260.       "data": {
    261.         "flowRank": {
    262.             "name": "flowRank",
    263.             "title": "测试数据",
    264.             "items": [
    265.                 {
    266.                     "title": "数据1",
    267.                     "ratio": 1.0,
    268.                     "value": 2833543
    269.                 },
    270.                 {
    271.                     "title": "数据2",
    272.                     "ratio": 0.12883587790974055,
    273.                     "value": 365062
    274.                 },
    275.                 {
    276.                     "title": "数据3",
    277.                     "ratio": 0.85563822035709,
    278.                     "value": 312361
    279.                 },
    280.                 {
    281.                     "title": "数据4",
    282.                     "ratio": 0.09972755881816232,
    283.                     "value": 31151
    284.                 },
    285.                 {
    286.                     "title": "数据5",
    287.                     "ratio": 0.016532374562614364,
    288.                     "value": 515
    289.                 }
    290.             ],
    291.         },
    292.         "trends": [
    293.             {
    294.                 "title": "数据1",
    295.                 "points": [
    296.                     {
    297.                         "value": 30000,
    298.                         "date": "2023-07-02 09:25:00"
    299.                     },
    300.                     {
    301.                         "value": 35000,
    302.                         "date": "2023-07-02 09:30:00"
    303.                     },
    304.                     {
    305.                         "value": 50000,
    306.                         "date": "2023-07-02 09:35:00"
    307.                     },
    308.                     {
    309.                         "value": 100000,
    310.                         "date": "2023-07-02 09:40:00"
    311.                     },
    312.                     {
    313.                         "value": 130003,
    314.                         "date": "2023-07-02 09:45:00"
    315.                     },
    316.                     {
    317.                         "value": 190000,
    318.                         "date": "2023-07-02 09:50:00"
    319.                     },
    320.                     {
    321.                         "value": 230000,
    322.                         "date": "2023-07-02 09:55:00"
    323.                     },
    324.                     {
    325.                         "value": 250000,
    326.                         "date": "2023-07-02 10:00:00"
    327.                     },
    328.                 ]
    329.             },
    330.             {
    331.                 "title": "数据2",
    332.                 "points": [
    333.                     {
    334.                         "value": 6000,
    335.                         "date": "2023-07-02 09:25:00"
    336.                     },
    337.                     {
    338.                         "value": 7000,
    339.                         "date": "2023-07-02 09:30:00"
    340.                     },
    341.                     {
    342.                         "value": 8000,
    343.                         "date": "2023-07-02 09:35:00"
    344.                     },
    345.                     {
    346.                         "value": 9000,
    347.                         "date": "2023-07-02 09:40:00"
    348.                     },
    349.                     {
    350.                         "value": 10000,
    351.                         "date": "2023-07-02 09:45:00"
    352.                     },
    353.                     {
    354.                         "value": 11000,
    355.                         "date": "2023-07-02 09:50:00"
    356.                     },
    357.                     {
    358.                         "value": 12000,
    359.                         "date": "2023-07-02 09:55:00"
    360.                     },
    361.                     {
    362.                         "value": 21810,
    363.                         "date": "2023-07-02 10:00:00"
    364.                     },
    365.                 ]
    366.             },
    367.             {
    368.                 "title": "数据3",
    369.                 "points": [
    370.                     {
    371.                         "value": 4500,
    372.                         "date": "2023-07-02 09:25:00"
    373.                     },
    374.                     {
    375.                         "value": 4700,
    376.                         "date": "2023-07-02 09:30:00"
    377.                     },
    378.                     {
    379.                         "value": 10000,
    380.                         "date": "2023-07-02 09:35:00"
    381.                     },
    382.                     {
    383.                         "value": 10214,
    384.                         "date": "2023-07-02 09:40:00"
    385.                     },
    386.                     {
    387.                         "value": 12000,
    388.                         "date": "2023-07-02 09:45:00"
    389.                     },
    390.                     {
    391.                         "value": 13000,
    392.                         "date": "2023-07-02 09:50:00"
    393.                     },
    394.                     {
    395.                         "value": 14000,
    396.                         "date": "2023-07-02 09:55:00"
    397.                     },
    398.                     {
    399.                         "value": 15000,
    400.                         "date": "2023-07-02 10:00:00"
    401.                     },
    402.                 ]
    403.             },
    404.             {
    405.                 "title": "数据4",
    406.                 "points": [
    407.                     {
    408.                         "value": 400,
    409.                         "date": "2023-07-02 09:25:00"
    410.                     },
    411.                     {
    412.                         "value": 800,
    413.                         "date": "2023-07-02 09:30:00"
    414.                     },
    415.                     {
    416.                         "value": 1100,
    417.                         "date": "2023-07-02 09:35:00"
    418.                     },
    419.                     {
    420.                         "value": 1200,
    421.                         "date": "2023-07-02 09:40:00"
    422.                     },
    423.                     {
    424.                         "value": 1400,
    425.                         "date": "2023-07-02 09:45:00"
    426.                     },
    427.                     {
    428.                         "value": 1600,
    429.                         "date": "2023-07-02 09:50:00"
    430.                     },
    431.                     {
    432.                         "value": 1800,
    433.                         "date": "2023-07-02 09:55:00"
    434.                     },
    435.                     {
    436.                         "value": 2000,
    437.                         "date": "2023-07-02 10:00:00"
    438.                     },
    439.                 ]
    440.             },
    441.             {
    442.                 "title": "数据5",
    443.                 "points": [
    444.                     {
    445.                         "value": 0,
    446.                         "date": "2023-07-02 09:25:00"
    447.                     },
    448.                     {
    449.                         "value": 2,
    450.                         "date": "2023-07-02 09:30:00"
    451.                     },
    452.                     {
    453.                         "value": 13,
    454.                         "date": "2023-07-02 09:35:00"
    455.                     },
    456.                     {
    457.                         "value": 14,
    458.                         "date": "2023-07-02 09:40:00"
    459.                     },
    460.                     {
    461.                         "value": 34,
    462.                         "date": "2023-07-02 09:45:00"
    463.                     },
    464.                     {
    465.                         "value": 40,
    466.                         "date": "2023-07-02 09:50:00"
    467.                     },
    468.                     {
    469.                         "value": 53,
    470.                         "date": "2023-07-02 09:55:00"
    471.                     },
    472.                     {
    473.                         "value": 63,
    474.                         "date": "2023-07-02 10:00:00"
    475.                     },
    476.                 ]
    477.             }
    478.         ],
    479.         "industryAvg": 100
    480.     }
    481. }
    482.         if (res.data) {
    483.           if(res.data.flowRank.items){
    484.             radioList.value=[]
    485.           //格式漏斗右侧返回占比
    486.           res.data.flowRank.items.forEach((ele,index) => {
    487.             ele.id=index
    488.             ele.newValue=millionTransfer(ele.value)
    489.             if(index!==0){
    490.               radioList.value.push(processingData(ele.ratio*100,2))
    491.             }
    492.           });
    493.           // 漏斗左侧百分比计算
    494.           radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[2].value)*100,2))
    495.           radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[1].value)*100,2))          
    496.           radioList.value.push(processingData((res.data.flowRank.items[4].value/res.data.flowRank.items[0].value)*100,2))
    497.           }
    498.           //绘制图表
    499.           if(res.data.trends){
    500.             chooseListArr.value=initChoosrArr(res.data.trends)
    501.             initData(chooseListArr.value)
    502.           }
    503.           flowList.value=res.data.flowRank
    504.           trendList.value=res.data.trends
    505.           industryAvg.value=res.data.industryAvg
    506.         }
    507.       // });
    508.     };
    509.     //点击漏斗
    510.     const changeFunnel=(val)=>{
    511.       chooseId.value=val;
    512.       if(val<5){
    513.         chooseList.value=[val,val+1]
    514.       }else if(val==5){
    515.         chooseList.value=[2,4]
    516.       }if(val==6){
    517.         chooseList.value=[1,4]
    518.       }if(val==7){
    519.         chooseList.value=[0,4]
    520.       }
    521.       chooseListArr.value=initChoosrArr(trendList.value)
    522.       // 先判断是否有平均线再重绘图表
    523.       changeAverage(averageCheck.value)
    524.     }
    525.     //点击平均值 val=true有平均线
    526.     const changeAverage=(val)=>{
    527.       if(val){
    528.         let arrline=[{
    529.           symbol: "none",
    530.           silent:false, //鼠标悬停事件 true没有，false有
    531.           lineStyle:{ //警戒线的样式 ，虚实 颜色
    532.                 type:"dashed", //样式  ‘solid’和'dotted'
    533.                 color:"#E98433",
    534.                 width: 1   //宽度
    535.             },
    536.           label:{
    537.             show:false,
    538.             color:"#E98433",
    539.             position:'middle',
    540.             // padding: ['0', '0', '0',tableWidth.value],
    541.             formatter: function (params) {
    542.                 let res = "";
    543.                 res += `${params.name}：${params.value}`;
    544.                 return res;
    545.               },
    546.           },
    547.           name:'平均值',
    548.           yAxis:industryAvg.value
    549.         }]
    550.         initData(chooseListArr.value,arrline)
    551.       }else{
    552.          initData(chooseListArr.value)
    553.       }
    554.     }
    555.   watch(
    556.     props,
    557.     (newValue) => {
    558.       console.log(newValue);
    559.       if (newValue && newValue.opt && newValue.opt.roomId) {
    560.           getList()
    561.       }
    562.     },
    563.     {  deep: true }
    564.   );
    565.     onMounted(()=>{
    566.       // getList()
    567.     })
    568.     return {
    569.       flowList,
    570.       chooseList,
    571.       changeFunnel,
    572.       chooseId,
    573.       radioList,
    574.        trendList,
    575.       lineOpt,
    576.       averageCheck,
    577.       changeAverage
    578.     }
    579.   }
    580. })
    581. </script>
    582.  
    583. <style scoped lang="scss">
    584. .funnel_wrap{
    585.   margin-top: 24px;
    586.   padding: 24px;
    587.   color: #212848;
    588.   font-size: 14px;
    589.   background-color: #fff;
    590.   .sec_title{
    591.     font-size: 18px;
    592.     font-weight: 500;
    593.   }
    594.   .funnel_con{
    595.     padding: 24px;
    596.  
    597.   }
    598.   .flow_con{
    599.     position: relative;
    600.     padding-left: 100px;
    601.     padding-right: 112px;
    602.     .left_position{
    603.       position: absolute;
    604.       top: 30px;
    605.       left:0;
    606.       .left_top{
    607.         width: 100px;height: 198px;color:#DFE1EB;border:1px solid #DFE1EB;border-right:0;
    608.       }
    609.       .left_cen{
    610.         width: 72px;height: 146px;position:absolute;left:24px;bottom:-0.5px;color:#DFE1EB;border:1px solid #DFE1EB;border-right:0;
    611.       }
    612.       .left_bot{
    613.         width: 25px;height: 92px;position:absolute;left:72px;color:#DFE1EB;bottom:0px;border:1px solid #DFE1EB;border-right:0;
    614.       }
    615.       .left_title{
    616.           position: absolute;
    617.           line-height: 20px;
    618.           top: -24px;
    619.           right: 0;       
    620.           color: #212848;
    621.         }
    622.       .leftactive{
    623.         border:1px solid green;
    624.         border-right:0;
    625.         color: green;
    626.          .left_title{
    627.           color: green;
    628.         }
    629.       }
    630.  
    631.     }
    632.     .flow_item{
    633.       background-color:#F8F9FB ;
    634.       margin-bottom: 12px;
    635.       height: 40px;
    636.       line-height: 40px;
    637.       display: flex;
    638.       align-items: center;
    639.       position: relative;
    640.       .item_lef{
    641.         width: 116px;
    642.         text-align: center;
    643.         box-sizing: border-box;
    644.       }
    645.       .item_rig{padding-left: 16px;
    646.       position: relative;
    647.       flex: 1;
    648.       .funnle{
    649.         position: absolute;
    650.         border-bottom:40px solid #fff;
    651.         border-left: 12px solid transparent;
    652.         right: 0;
    653.         top: 0;
    654.         }
    655.       }
    656.     }
    657.      .active{
    658.       .item_lef{background-color: green;color: #fff;}
    659.       .item_rig{background-color: #EEF1FF;}
    660.     }
    661.     .svg_box{
    662.       position: absolute;
    663.       top: 25px;
    664.       right: -10px;
    665.       .title{
    666.         position: absolute;
    667.         left:0;
    668.         top: 0;
    669.       }
    670.     }
    671.   }
    672.   .flow_echart{
    673.     flex: 1;
    674.   }
    675.   .none{
    676.     margin-top: 12px;
    677.     color: #9095A7;
    678.     text-align: center;
    679.     }
    680. }
    681. // .svg-icon {
    682. //   height: 3em;
    683. // }
    684. </style>

    三、utils.js方法

    1. export function millionTransfer(
    2.   value,
    3.   digits = 4,
    4.   unit = "w",
    5.   decimal = 2,
    6.   removeZero = false
    7. ) {
    8.   // unit = unit || "w"
    9.   const valueNum = Number(value)
    10.   const transferNum = Math.pow(10, digits)
    11.   if (!isNaN(valueNum)) {
    12.     if (valueNum < transferNum && valueNum >= 0) {
    13.       return value
    14.     }
    15.     const num = floatDivideMethod(valueNum, transferNum)
    16.     if (removeZero) {
    17.       return `${parseFloat(num.toFixed(decimal))}${unit}`
    18.     }
    19.     return `${num.toFixed(decimal)}${unit}`
    20.   }
    21.   return value
    22. }
    23.  
    24. export function thousandthis(num) {
    25.   if (!num && num !== 0) return null
    26.   if (num === '--') return '--'
    27.   if (!(!isNaN(Number(num)) && typeof Number(num) === 'number')) {
    28.     return '0'
    29.   }
    30.   return (num || 0).toString().replace(/\d+/, function(n) {
    31.     const len = n.length
    32.     if (len % 3 === 0) {
    33.       return n.replace(/(\d{3})/g, ',$1').slice(1)
    34.     }
    35.     return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1')
    36.   })
    37. }
    38.  
    39. /* 最早的数据没有亿，只有万，兼容之前数据，后面转换万和亿的数据用这个方法 */
    40. export function valueTransfer(value, decimal = 2, unit = "万", removeZero = false) {
    41.   let outputVal = value
    42.   const valueNum = Number(value)
    43.   const transferNum1 = Math.pow(10, 4)
    44.   const transferNum2 = Math.pow(10, 8)
    45.   if (!isNaN(valueNum)) {
    46.     if (valueNum < transferNum1) {
    47.       outputVal = value
    48.     } else if (valueNum >= transferNum1 && valueNum < transferNum2) {
    49.       outputVal = millionTransfer(value, 4, unit, decimal, removeZero)
    50.     } else {
    51.       outputVal = millionTransfer(value, 8, "亿", decimal, removeZero)
    52.     }
    53.   }
    54.   return outputVal
    55. }
    56.  
    57. //保留两位小数
    58. export function processingData(data,length){
    59.   data=Number(data);
    60.   data=Number((parseInt(data * 100) / 100).toFixed((length!=undefined?length:2)))
    61.   data=data+''
    62.   return data
    63. }
    64.  
    65. import moment from "moment"
    66. export function $formatTime (time, format = "YYYY-MM-DD HH:mm:ss") {
    67.   if (time && time !== "--") {
    68.     if (format === "timestamp") {
    69.       return Number(moment(time).utcOffset(8).format("x"))
    70.     }
    71.     return moment(time).format(format)
    72.   }
    73.   return time
    74. }

    四、父组件调用

    1. import flowFunnel from "./components/flowFunnel.vue";
    2.  
    3.   components:{
    4.     flowFunnel,
    5.   },

     

  • 相关阅读:
    无涯教程-JavaScript - MATCH函数
    量子随机预言机（QROM）是什么？
    ssm+vue+java微信小程序的英语学习激励系统#毕业设计
    一、基础算法精讲：双指针
    如何使用fiddler实现手机抓包，Filters过滤器！
    什么是找出芯片bug的最好办法
    SystemC 等待异步事件解决方案
    乐优商城_第3章_-认识微服务(Feign+Zuul)
    强制用户使用定向推送功能是什么意思？整改措施请收好
    UPS负载箱的工作原理是什么？
  • 原文地址：https://blog.csdn.net/m0_55969466/article/details/132538061