zoukankan      html  css  js  c++  java
  • 移动端vue项目总结(Echarts折线图+热力图)

    移动端vue项目总结

    一、日期数据处理

    需求:把数据按天作为分类,父集为当天日期(如果是日期是当天,就显示今天),子集为时间。

    请求数据为一个时间数组list

    分析处理:

    创建一个数组days数组

    1、list做循环,当拿到第一个有效值日期时,对日期进行处理,得到month+day,停止循环,把处理后的日期month+day和一个空数组放到一个对象,然后pushdays中。

    2、在对list做循环查询,当它下面的日期和month+day一致时表示是同一天的数据,然后处理日期为hour+mint,pushdays[days.length-1],如果不一致则进行第一步的处理,然后把日期处理为hour+mintpushdays[days.length-1]中。

    3、渲染时注意要先拿到今天的日期,然后三元表达式直接判断如果month+day和今天的日期一致则显示“今天”否则显示month+day

    二、下拉刷新和上拉加载

    这里用了mint ui 的组件,但在使用组件是出现了一个bug,原有的页面出现的异常的其他样式,分析为由于项目中内置了一个ui框架(第三方平台开发,依赖的内置ui),引入其他ui框架(全局引入)时,会出现this指向先后的问题,导致bug,所以这里一定要按需引入。

    这个地方开发的时候本来想自已写一个的,但由于项目紧急,也就选了一个插件用了,但核心无非就是节流,放个代码吧

    function throttling(fn){
    let mark= true    
    return function(){
    if(!mark){
    return
    }
    mark= false
    
    setTimeout(()=>{
    fn.call.(this,arguments)
    mark= true
    },2000)
    }
    }

    二、可视化echarts

    1、需要展示折线图,并且在折线图可以设置范围区域,超出区域的部分显示其他颜色曲线,颜色需要过渡处理。

    效果图就就不放出来了,动手去试,还是有干货的!

    option = {
        title: {
            text: '阅读量 (%)',
            left: 'center', //居中
            textStyle: {
                color: '#969696', 
                fontSize: 12,  
                lineHeight: 35, 
                fontWeight: 'normal' 
            }
        },
        color: ['#1890ff'], //折线颜色
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器,坐标轴触发有效
                type: 'none' // 默认为直线,可选为:'line' | 'shadow'
            },
            formatter:"{c0}"+"%", //鼠标触发显示内容
            position: ["45%", "40"] //内容显示位置
        },
        grid: { //坐标内显示区域
            left: '5%',
            right: '5%',
            top: '16%',
            bottom: '5%',
            containLabel: true 
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                show: false //x轴刻度
            },
            axisLine: {
                lineStyle: {
                    type: 'solid', //x轴类型
                    color: '#cccccc', //x轴的颜色
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#696969', //坐标值的颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            max: 60,  //y轴最大值
            min: 0,
            splitNumber: 6, //y轴范围分为6个区间
            axisTick: {
                show: false  //x轴刻度
            },
            axisLine: {
                show: false  //y轴隐藏或显示
            },
            splitLine: { //网格线
                lineStyle: {
                    color: ['#e0e0e0'],
                    type: 'dashed' //设置网格线类型 dotted:虚线   solid:实线
                },
                show: true //隐藏或显示
            },
            axisLabel: {
                textStyle: {
                    color: '#696969', //坐标值的颜色
                }
            }
        },
        dataZoom: [{  //区域缩放
            type: 'inside',
            start: 0,   
            // preventDefaultMouseMove: false,  //解决移动端无法触发页面滑动
            end: 100  //曲线显示0%--100%部分
        }],
        visualMap: {//连续型视觉映射组件
            show: false,
            type: 'continuous',
            min: 18 - 5,
            max: 38 + 5, //5根据自己的需求使用(在和区域范围交接的缓存距离)
            inRange: {//从最小值到最大值依次设置颜色
                color: ['red', 'blue', 'blue', 'blue', 'blue', 'red']
            }
        },
        series: [{
            data: [8, 10, 45, 24, 6, 28, 49],
            type: 'line',
            smooth: 0.4,//曲线平滑度0-1
            markArea: { //图表标域,常用于标记图表中某个范围的数据
                silent: false,
                data: [
                    [{
                        name: '',//区域名称
                        yAxis: 18 //最小值
                    }, {
                        yAxis: 38 //最大值
                    }]
                ],
                itemStyle: {//区域的样式
                    color: 'rgba(116, 185, 255,0.1)', //背景色
                    borderColor: 'rgba(116, 185, 255,0.1)',
                    borderWidth: 1,
                    shadowColor: 'rgba(116, 185, 255,0.1)',
                    shadowBlur: 5,
                    opacity: true 
                }
            },
            areaStyle: {//区域填充渐变
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'blue' 
                    },
                    {
                        offset: 0.6, color: 'green' 
                    },
                    {
                        offset: 1, color: 'white'
                    }],
                    global: false // 缺省为 false
                },
                opacity: 0
            }
    
        }]
    }

    2、以前做过一个热点地图,顺便搞个demo上来吧,同样效果图就不展示了,手动狗头

    option = {
        backgroundColor: "#ccc",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
        x: '20',
        y: '330',
        splitList: [
            {start: 500,label:'数量>100'},
            {start: 300, end: 500,label:'数量 300-500'},
            {start: 100, end: 300,label:'数量 100-300'},
            {start: 50, end: 100,label:'数量 50-100'},
            {end: 50,label:'数量 <50'}
        ],
        // color: ['#67e6dc','#9AECDB','#26de81','#20bf6b']
        inRange: {
            color: ['#67e6dc','#9AECDB','#26de81','#20bf6b']
        }
        },
        geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            zoom: 1.2,
            aspectScale: 0.8,
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.6)'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor:'#ffffff',
                borderColor: 'rgba(0, 0, 0, 0.5)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0)'
              }
            }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '人数', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江省",
                "value": 444
              }, {
                "name": "山西省",
                "value": 992
              }, {
                "name": "湖北省",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
          }]
        }]
    }

    结束!

  • 相关阅读:
    How to install VXDIAG Honda, Toyota and JLR SDD software
    16% off MPPS V16 ECU tuning tool for EDC15 EDC16 EDC17
    Cummins INSITE locked and ask for verification code
    How to use BMW Multi Tool 7.3 to replace lost key for BMW X1
    Bleed Brake Master Cylinder with Intelligent Tester IT2
    Porsche Piwis Tester II “No VCI has been detected”,how to do?
    Creader VIII VS. Creader VII+
    How to solve GM MDI cannot complete the installation
    汽车OBD2诊断程序开发 (原文转载,思路很清晰!)
    汽车节温器单片机开发思路
  • 原文地址:https://www.cnblogs.com/styleFeng/p/14133981.html
Copyright © 2011-2022 走看看