echarts配置option（1）——折线图

折线渐变背景结合路径图实现动态效果

let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let yData = [150, 132, 134, 230, 210, 290, 310];
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: { color: '#999', fontSize: 9.75 }
    }//坐标轴指示器
  },
  legend: {
    top: 'top',
    right: 19.5,
    itemWidth: 8,
    itemHeight: 8,
    icon: 'rect',
    textStyle: { fontSize: 9.75 }
  },//图例
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xData,
    axisLabel: { textStyle: { color: '#fff', fontSize: 9.75 } }
  },
  yAxis: {
    name: 'unit 1',
    type: 'value',
    axisLabel: { textStyle: { color: '#fff', fontSize: 9.75 } },
    splitLine: {
      lineStyle: { color: 'rgba(130, 144, 157, 0.18)', fontSize: 9.75 }
    },
    nameTextStyle: { color: '#3DACF1', fontSize: 9.75 }
  },
  grid: { left: '14%', top: '20%', bottom: '15%', width: '80%' },//图表距离四周的距离
  series: [
    {
      name: 'legend 1',
      type: 'line',//折线图
      smooth: false,//是否平滑
      symbol: 'circle',
      symbolSize: 1,
      itemStyle: {
        normal: {
          borderColor: 'rgba(137, 70, 207, 0.2)',
          borderWidth: 1,
          color: 'rgba(137, 70, 207, 1)'
        }
      },
      tooltip: { trigger: 'axis', axisPointer: { type: 'line' } },//提示框
      lineStyle: {
        normal: {
          width: 3,
          shadowColor: 'rgba(137, 70, 207, 1)',
          shadowBlur: 20
        }
      },
      areaStyle: {
        opacity: 1,
        color: {
          colorStops: [
            { offset: 0, color: 'rgba(137, 70, 207, 0.5)' },
            { offset: 0.3, color: 'rgba(137, 70, 207, 0.2)' },
            { offset: 1, color: 'rgba(137, 70, 207, 0)' }
          ],//颜色渐变
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false
        }
      },
      data: yData
    },//面积区域
    {
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      symbolSize: 8,
      polyline: true,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.3,
        symbolSize: 7,
        symbol: 'circle',
        color: 'rgba(137, 70, 207, 1)'
      },
      lineStyle: { normal: { width: 1, opacity: 0 } },
      data: [
        {
          coords: xData.map((item, index) => [item, yData[index]])
        }
      ]
    }//光效区域
  ]
};