## Echarts

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

###### 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);
                                        }
                                    });
                                }
                            );

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://developers.google.com/chart/
Github Page | https://github.com/ecomfe/echarts
Template Page |
Type | URL
--- | ---
Line & Area Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-line-area-charts.html
Bar & Column Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-bar-column-charts.html
Pie & Doughnut Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-pie-doughnut-charts.html
Scatter Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-scatter-charts.html
Radar & Chord Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-radar-chord-charts.html
Funnel & Gauges charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-funnel-gauges-charts.html
Combination Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-combination-charts.html
Advance Charts | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/echarts-advance-charts.html