百度echarts折线图渐变效果色-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:450px;"></div>
    <script type="text/javascript">
        let mockData = [{ time: '4-1', num: 0 },{ time: '4-2', num: 5 },{ time: '4-3', num: 8 },{ time: '4-5', num: 4 },{ time: '4-6', num: 6 }]
        let xData = mockData.map(item => item.time)
        let yData = mockData.map(item => item.num)
        
        option = {
          backgroundColor: '#0A1934',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
                fontSize: 12
              },
            },
            textStyle: { fontSize: '100%' },
            formatter: v => {
              return `
                <div class='u-p-2'>
                <div class='fz-10'>日期：${v[0].axisValue}</div>
                <div class='fz-10 u-mt-2'>人数：${v[0].value}</div>
                </div>
              `
            }
          },
           xAxis: {
            type: 'category', boundaryGap: false, // 两边留白
            data: xData,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#a8abbb',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#6c7087'
              }
            }
          },
          yAxis:{ 
            name:'', 
            type: 'value', 
            scale: true, 
            nameTextStyle: { color:'rgba(255,255,255,.5)', align:'right', padding:[0,10,0,0], fontSize: '100%'},
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#a8abbb',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#6c7087'
              }
            }
          },
          series: {
            name: '', type: 'line', stack: '',
            areaStyle: {
        	  color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(236, 99, 123, .5)'
              }, {
                offset: 1,
                color: 'rgba(102, 212, 250,.0)'
              }])
        	},
            lineStyle: { 
        	  color: { 
                type: 'linear',x: 0, y: 1, x2: 0, y2: 0,
                colorStops: [
        		  { offset: 0, color: '#3a76f6' },
        		  { offset: .25, color: '#66d4fa' }, 
        		  { offset: .75, color: '#f8d470'}, 
        		  { offset: 1, color: '#ec637b'}
        		],
                global: false
              },
        	  width:2
        	},
            symbol:'none',  
            data: yData,
            markLine: {
              symbol: 'none',
              data: [{
                name: "人数最高峰",
                xAxis: '4-3',
                lineStyle: {
                  color: '#eb6272',
                  type: "dashed",
                  width: 0
                },
                label: { 
                  show: true, formatter: '4-3日\n人数最高峰\n',
                  align:'center',
                  distance: [0,-10],
                  fontSize: 14,
                }
              },{
                name: "人数归零",
                xAxis: '4-6',
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                  color: '#66cfef',
                  type: "dashed",
                  width: 1
                },
                label: { 
                  show: true, formatter: '4-6日\n人数归零',
                  fontSize: 14,
                  align:'center',
                }
              }]
            }
          }
        };
        
        var myChart = echarts.init(document.getElementById('main'));
		myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        })
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：