为第一次使用ECharts的小伙伴提供参考，废话不对说，直接上代码

这里主要对两个官网案例进行讲解：

https://echarts.apache.org/examples/en/editor.html?c=line-stack

https://echarts.apache.org/examples/en/editor.html?c=bar-background

echarts.min.js文件下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello ECharts</title>
</head>
<script src="js/echarts.min.js"></script>
<body>
<div id="line" style="width: 800px;height:400px;"></div>
<div id="bar" style="width: 800px;height:400px;"></div>
</body>

<script>
    // 折线图
    line();
    // 柱状图
    bar();

    function line() {
        // 获取到对应的div，并实例化echarts对象
        var lineChart = echarts.init(document.getElementById("line"));
        // 指定配置和数据
        var option = {
            title: {
                text: '折线图堆叠'
            },
            //触发器，移到图上的效果
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            //图的大小的参数设置
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                // 防止坐标轴标签溢出
                containLabel: true
            },
            // 小工具组件
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                // 坐标轴类型，（value数值轴,category类目轴,time时间轴,log对数轴）
                type: 'category',
                //  关闭坐标轴两边留白策略
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    //stack数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 把配置给实例对象
        lineChart.setOption(option);
    }

    function bar() {
        var barChart = echarts.init(document.getElementById("bar"));
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                //开启背景色，即单个柱与最高柱的差值的颜色
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'

                }
            }]
        };
        barChart.setOption(option);
    }
</script>

</html>

附上一张最后的效果图（与官网一致）：

ECharts入门——折线图与柱状图_官网