百度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">
        option = {
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#c86589'
                },
                {
                    offset: 1,
                    color: '#06a7ff'
                }
            ], false),
            grid: {
                top: '12%',
                left: '6%',
                right: '5%',
                bottom: '10%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                axisLabel: {
                    margin: 30,
                    color: '#ffffff63'
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    length: 25,
                    lineStyle: {
                        color: "#ffffff1f"
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff1f'
                    }
                }
            },
            yAxis: [{
                type: 'value',
                position: 'right',
                axisLabel: {
                    margin: 20,
                    color: '#ffffff63'
                },
        
                axisTick: {
                    show: true,
                    length: 15,
                    lineStyle: {
                        color: "#ffffff1f",
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff1f'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                }
            }],
            series: [{
                name: '注册总量',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#fff", // 线条颜色
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    color: "#fff",
                    borderColor: "#fff",
                    borderWidth: 3
                },
                tooltip: {
                    show: false
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#eb64fb'
                            },
                            {
                                offset: 1,
                                color: '#3fbbff0d'
                            }
                        ], false),
                    }
                },
                data: [330, 429, 490, 770, 880, 990, 1100]
            }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：