移动端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
      }]
    }]
}

 

 

结束！