用ECharts绘制折线图设置填充底部设置填充地步颜色

type:'line'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
    //初始化ehcharts实例
    var myChart=echarts.init(document.getElementById("box"));
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
          text:'生鲜销量统计'
        },
        //工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend:{
            data:['销量']
        },
        //x轴
        xAxis:{
            data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'销量',
            type:'line',
            data:[40,20,35,60,55,10]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问量统计</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 400px;"></div>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        series:[{
            name:'访问量',
            type:'line',
            data:[600,310,200,800]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

</body>
</html>

设置填充底部

        areaStyle: {
                normal: {}
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问量统计</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 400px;"></div>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        series:[{
            name:'访问量',
            type:'line',
            areaStyle: {
                normal: {}
            },
            data:[600,310,200,800]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

</body>
</html>

设置填充地步颜色

            areaStyle: {
                normal: {color: '#80ffc0'}
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问量统计</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 400px;"></div>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        series:[{
            name:'访问量',
            type:'line',
            areaStyle: {
                normal: {color: '#80ffc0'}
            },
            data:[600,310,200,800]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

</body>
</html>