业务要求

1.	突出显示当前选择的数据
2.	背景网格化
3.	线条下方区域颜色渐变
4.	数据点均匀分布
5.	鼠标移动到数据点上时，展示数值和时间

思路

1. 首先完成样式上的同步
2. 功能的初步添加
3. 针对业务进行功能修改

实现步骤

1. 基础样式

	1.  折线图，圆滑曲线
	2.	X轴Y轴颜色改变，分割线及颜色改变
	3.	折线拐点设置为实心圆，改变大小
	4.	折线下方的阴影区域

xAxis: {
  type: 'value',
  axisLine: {		 						// x轴线的配置
    lineStyle: {
      color: ['#D1ECC3']
    }
  },
  splitLine: { 								// x轴分割线的配置
    show: true,
    lineStyle: {
      color: ['#D1ECC3']
    }
  },
  axisLabel: { 								// 刻度线标签配置
    color: "#84868E",
    fontSize : 12,
  }
},
yAxis: {									// y轴线的配置
  type: 'value',
  axisLine: {
    lineStyle: {
      color: ['#D1ECC3']
    }
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: ['#D1ECC3']
    }
  },
  axisLabel: {
    color: "#84868E", 						// 刻度线标签颜色
    fontSize : 12
  }
},
series: [{ 									// 数据配置
  // 先给假数据让它显示出来。要注意这里为什么这么写，如果X轴不指定刻度，那么data中的每一个值的下标为0的值，会作为X轴的依赖
  data: [[0,150], [1,230], [2,224], [3,218], [4,135], [4,147], [5,260]],
  type: 'line'  							// 折线图
  smooth: true, 							// 圆滑曲线
  symbol: 'circle',							// 拐点图形设置为实心圆
  symbolSize: 8,							// 拐点大小
  itemStyle: {								// 单条折线的具体设置
    normal: {
      borderType: "solid",
      color: '#67C23A',
      lineStyle: {
        width: 3,							// 折线宽度
        color: '#72cf44'
      }
    }
  },
  areaStyle: { 								// 折线下方的渐变阴影区域
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: '#b4f195'
      },
      {
        offset: 1,
        color: '#fff'
      }
    ])
  }
}]

此时图表的基本样子就出来了，还差一些功能，我们继续添加。

1.	 凸显某条数据
2.	 鼠标移动到某条数据显示具体信息

series: {
	......,
	markPoint: {							// 凸显最大值最小值
	    data: [
	      { type: 'max', name: 'Max' },
	      { type: 'min', name: 'Min' }
	    ]
	},
},
tooltip: {									// 提示框配置
  trigger: 'axis',							// 触发类型
  axisPointer: {							// 指示器类型
    type: 'shadow'
  }
}

此时业务需要的样式和功能我们都已添加，接下来就是完善细节了

3. 完善细节

1.	tootip提示框的具体内容
2.	高亮数据的选择

series: {
	......,
	markPoint: {							// 凸显最大值最小值
	    data: [	
	      { yAxis:'', xAxis:'', value: '' }	// 这种写法时可以凸显某些能确定在坐标轴上大概位置的数据，value为要凸显的内容
	    ]
	},
},
tooltip: {
	......
	formatter: function (params) { 				// 格式化提示内容
      var str = '';
      console.log(params)						// 打印查看一下params里面都有哪些内容
      params.forEach(item=>{					// 下面的这段字符串是为了自定义数据前面的圆点样式
        str += item.marker + item.value[3] + ":" + item.value[1] + "</br>" + '<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:skyblue;\"></span>' + '时间' + ":" + item.value[2]
      })
      return str
    }
}

总结

此次的功能看起来很简单，但是仍然花了我一天的时间，主要是花在查找echarts的API文档以及处理数据上面。
不得不感慨echarts真的是很牛逼，用起来很好用但是繁琐，只能是熟能生巧了。