echarts 面积渐变；echarts纵坐标间距小显示趋势不明显

export const getLine = (option = {}) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
      // formatter: '{c}m3/天'
    },
    legend: {
      textStyle: {
        color: '#B0D0E9'
      }
    },
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 10, //滚动条高度
        textStyle: {
          color: '#fff'
        }
      }
    ],
    // grid: {
    //   // left: '5%',
    //   // right: '5%',
    //   // top: '10%',
    //   // bottom: '5%',
    //   // containLabel: true
    // },
    xAxis: {
      type: 'category',
      data: option.xData,
      axisLabel: {
        color: '#B0D0E9'
      }
      // axisLine: {
      //   lineStyle: {
      //     color: '#B0D0E9'
      //   }
      // }
    },
    yAxis: {
      type: 'value',
      name: option.name,
      axisLabel: {
        color: '#B0D0E9',
      },
      min:Math.min(...option.data) ,
      max:Math.max(...option.data),
      axisLine: {
        lineStyle: {
          color: '#B0D0E9'
        }
      }
      // splitLine: {
      //   lineStyle: {
      //     color: '#B0D0E9',
      //     type: 'dashed'
      //   }
      // }
    },
    series: [
      {
        name: option.name,
        type: 'line',
        lineStyle: {
          color: '#B0D0E9'
        },
        areaStyle: {
          // 使用方法二的写法
          color: {
            type: 'linear',
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: '#4CE4C8' // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#83f3e600" // 100% 处的颜色
              }
            ]
          }
        },
        itemStyle: {
          color: '#B0D0E9'
        },
        smooth: true,
        data: option.data
      }
    ]
  }
}

1.面积渐变看其中的areaStyle对象设置

2.纵坐标使用获取数据的最小值和最大值作为纵坐标的最小值和最大值

RGB与十六进制颜色码转换 - 在线工具?

透明度 可以在颜色编辑器中去修改成十六进制的颜色