Echarts

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