5 minutes to your first chart

1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts. 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
</body>
2, Create a < script > tag to include echarts' core file, echarts.js. 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts import -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>
3, Create a new < script > tag, configure for module loader a path of echarts and the chart you need (the relative path is to link from the current page to echarts.js). For imported chart file, refer to Import ECharts2 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts import -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // configure for module loader
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    </script>
</body>
4, Dynamically load echarts and the chart you need in the < script > tag. Use callback function to initialize and drive the generation of charts. For option, refer to API & Doc 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts import -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // configure for module loader
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // use
        require(
            [
                'echarts',
                'echarts/chart/bar' // require the specific chart type
            ],
            function (ec) {
                // Initialize after dom ready
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['Sales']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"Sales",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // Load data into the ECharts instance 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
5, Open echarts.html in the browser to see the following results.
1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts. 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
</body>
2, Create a < script > tag to import echarts-plain.js. For the imported chart file, refer toImport ECharts3 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts import -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body>
3, Create a <script> tag. Use global variable echarts to initialize and drive the generation of charts. For option, refer toAPI & Doc 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- Prepare a Dom with size (width and height) for ECharts -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts import -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // Initialize after dom ready
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['Sales']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"Sales",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // Load data into the ECharts instance 
        myChart.setOption(option); 
    </script>
</body>
4, Open echarts.html in the browser to see the following results.

Best Reference Resource: Instances

ECharts is a data-driven chart. Since your main concern is how to achieve that option, we offer you, right here on our official website, an extensive documentation for your reference and over 100 ready-made demos with the most core option code that is free to edit online. For ECharts, play makes perfect; hope you enjoy playing here.