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

 

 

結束！