移动端vue项目总结（Echarts折线图+热力图）

移动端vue项目总结

 

一、日期数据处理

需求：把数据按天作为分类，父集为当天日期（如果是日期是当天，就显示今天），子集为时间。

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

分析处理：

创建一个数组days数组

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

2、在对list做循环查询，当它下面的日期和month+day一致时表示是同一天的数据，然后处理日期为hour+mint,push到days[days.length-1],如果不一致则进行第一步的处理，然后把日期处理为hour+mint，push到days[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
      }]
    }]
}

 

 

结束！