峯谷圖配置（面積圖， 基於echarts）

    峯谷圖或面積圖也是數據可視化圖表的一種常見類型。這個配置比較簡單，下面就以一個銷量峯谷圖爲例直接放效果圖和代碼了。下面是最終實現的效果動態圖，提示框會跟隨鼠標移動而確定位置：

 

    爲了有更好的適用性，這裏把繪製峯谷圖的操作都封裝到了一個函數裏面。以Vue項目爲例，要完成這個峯谷圖的配置所需步驟如下：

1：npm下載echarts模塊。

2：在main.js文件中引入峯谷圖相關的模塊，並把echart主模塊綁定到vue原型對象上，以便後續調用，代碼如下：

// 引入 ECharts 主模塊
let echarts = require('echarts/lib/echarts')
// 引入圖表
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

Vue.prototype.$chart = echarts

 3. 編寫時間點數據生成函數和峯谷圖的配置函數，具體代碼如下： 

        // 時間點數據生成函數
        initTime () {
            let arr = []
            for (let i = 0; i < 24; i++) {
                if (i < 10) {
                    arr.push('0' + i)
                } else {
                    arr.push(i)
                }
            }
            return arr
        },
        // 入參說明：
        // 1. data 原始數據,形如[4,5,67,88]
        // 2. dom 峯谷圖掛載的dom id 名
        // 3. time 峯谷圖的時間點數組, 形如[00, 01, 02, 03]
        initLineChart (data = [], dom, time = []) {
            let id = document.getElementById(dom)
            let myChart = this.$chart.init(id)
            // 自定義提示框內容
            let point = 'display: inline-block;width: 10px;height: 10px;background: #3a8ee6;border-radius: 50%;margin-right: 5px;'
            let tipContent = `<div style="${point}"></div>{c}`
            let option = {
                // 標題配置
                title: {
                    text: '銷量峯谷圖'
                },
                // 提示框配置
                tooltip: {
                    position: 'top',
                    formatter: tipContent,
                },
                xAxis: {
                    type: 'category',
                    // 座標軸兩邊留白策略，類目軸和非類目軸的設置和表現不一樣
                    boundaryGap: false,
                    // 類目數據
                    data: time,
                    // 座標軸軸線相關設置
                    axisLine: { show: false },
                    // 座標軸刻度相關設置
                    axisTick: false,
                    // 座標軸在 grid 區域中的分隔線
                    splitLine: {lineStyle: {type: 'dashed'}},
                    // 座標軸指示器配置
                    axisPointer: {
                        show: true,
                        type: 'line',
                        label: {
                            show: false
                        }
                    }
                    
                },
                yAxis: {
                    type: 'value',
                    // 座標軸名稱
                    name: '單數（筆）',
                    axisLine: { show: false },
                    axisTick: false
                },
                series: [{
                    data: data,
                    type: 'line',
                    // 區域填充樣式
                    areaStyle: {
                        color: '#66b1ff'
                    },
                    // 線條樣式
                    lineStyle: {
                        color: '#3a8ee6'  
                    },
                    // 折線拐點標誌的樣式
                    itemStyle: {
                        borderColor: '#3a8ee6'
                    },
                    // 是否平滑曲線顯示
                    smooth: true
                }]
            }
            myChart.setOption(option)
        }

4:  在模板中加一個標籤用於提供峯谷圖所需的dom，如下所示： 

<div id="lineChart" style="width: 100%;height: 350px"></div>

5：準備測試數據，並調用峯谷圖繪製方法，如下所示：

let lineData = [820, 932, 901, 934, 1290, 1330, 1320, 1200, 900, 600, 500, 555, 666, 200, 820, 932, 901, 934, 1290, 1330, 1320, 1200, 900, 600, 500, 555, 666, 200]
let time = this.initTime()
this.initLineChart(lineData, 'lineChart', time)

    完成上述步驟後，就可以得到博客開頭動態圖的效果了。不做數據可視化的需求就不知道還有這麼多圖表類型，這裏筆者把做過的一些圖表配置都收錄到了博客“數據可視化圖表配置”這一專欄裏面，也方便日後查詢。如有任何疑問，可與下方留言交流。