## 5分钟上手写ECharts的第一个图表

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </body>

2、新建<script>标签引入模块化单文件echarts.js

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    </body>

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
        </script>
    </body>

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });

            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main'));

                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['销量']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"销量",
                                "type":"bar",
                                "data":[5, 20, 40, 10, 10, 20]
                            }
                        ]
                    };

                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
        </script>
    </body>

5、浏览器中打开echarts.html，就可看到以下效果
1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </body>

2、新建<script>标签引入echarts-all.js，引入图表文件见引入ECharts3

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    </body>

3、新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成，option见API & Doc

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data:['销量']
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"销量",
                        "type":"bar",
                        "data":[5, 20, 40, 10, 10, 20]
                    }
                ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
        </script>
    </body>

4、浏览器中打开echarts.html，就可看到以下效果

## 最好的参考资源：实例

ECharts可以说是数据驱动的图表，大部分时候你关心的是那个option该如何实现，官网的文档提供详细的说明，另外我们还有近100个实例，这些例子都为你展现了最核心的option代码，可以通过在线修改查看效果，ECharts是玩出来的，希望你玩得开心。