1. Initialize the plugin by referencing the necessary files:

                    
                        <script src="/path/to/echarts.js"></script>
                    
                

2. HTML Markup.

                    
                        <div id="basic-line" class="height-400"></div>
                    
                

3. Basic usage may look something like this.

                    
                        // Set paths
                        // ------------------------------

                        require.config({
                            paths: {
                                echarts: '../app-assets/vendors/js/charts/echarts'
                            }
                        });


                        // Configuration
                        // ------------------------------

                        require(
                            [
                                'echarts',
                                'echarts/chart/bar',
                                'echarts/chart/line'
                            ],


                            // Charts setup
                            function (ec) {
                                // Initialize chart
                                // ------------------------------
                                var myChart = ec.init(document.getElementById('basic-area'));

                                // Chart Options
                                // ------------------------------
                                chartOptions = {

                                    // Setup grid
                                    grid: {
                                        x: 40,
                                        x2: 20,
                                        y: 35,
                                        y2: 25
                                    },

                                    // Add tooltip
                                    tooltip: {
                                        trigger: 'axis'
                                    },

                                    // Add legend
                                    legend: {
                                        data: ['New orders', 'In progress', 'Closed deals']
                                    },

                                    // Add custom colors
                                    color: ['#FF847C', '#FECEA8', '#99B898'],

                                    // Enable drag recalculate
                                    calculable: true,

                                    // Horizontal axis
                                    xAxis: [{
                                        type: 'category',
                                        boundaryGap: false,
                                        data: [
                                            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
                                        ]
                                    }],

                                    // Vertical axis
                                    yAxis: [{
                                        type: 'value'
                                    }],

                                    // Add series
                                    series: [
                                        {
                                            name: 'Closed deals',
                                            type: 'line',
                                            smooth: true,
                                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                            data: [10, 12, 21, 54, 260, 830, 710]
                                        },
                                        {
                                            name: 'In progress',
                                            type: 'line',
                                            smooth: true,
                                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                            data: [30, 182, 434, 791, 390, 30, 10]
                                        },
                                        {
                                            name: 'New orders',
                                            type: 'line',
                                            smooth: true,
                                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                            data: [1320, 1132, 601, 234, 120, 90, 20]
                                        }
                                    ]
                                };

                                // Apply options
                                // ------------------------------

                                myChart.setOption(chartOptions);

                                // Resize chart
                                // ------------------------------

                                $(function () {

                                    // Resize chart on menu width change and window resize
                                    $(window).on('resize', resize);
                                    $(".menu-toggle").on('click', resize);

                                    // Resize function
                                    function resize() {
                                        setTimeout(function() {

                                            // Resize chart
                                            myChart.resize();
                                        }, 200);
                                    }
                                });
                            }
                        );