vue+Echarts 折线图markPoint凸显某条数据的实现过程

业务要求

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: [