峰谷图或面积图也是数据可视化图表的一种常见类型。这个配置比较简单，下面就以一个销量峰谷图为例直接放效果图和代码了。下面是最终实现的效果动态图，提示框会跟随鼠标移动而确定位置：

    为了有更好的适用性，这里把绘制峰谷图的操作都封装到了一个函数里面。以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)

    完成上述步骤后，就可以得到博客开头动态图的效果了。不做数据可视化的需求就不知道还有这么多图表类型，这里笔者把做过的一些图表配置都收录到了博客“数据可视化图表配置”这一专栏里面，也方便日后查询。如有任何疑问，可与下方留言交流。