Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ EChart simple and practical control on chart     - CentOS7 install and configure Nagios (Server)

- To read the Linux ext3 / ext4 format partitions under Windows system software (Linux)

- Let the terminal under Mac OS X as like Linux has displayed a variety of colors (Linux)

- C language programming entry - Common operators (Programming)

- To teach you how to safely send mail (Linux)

- How to statistical data of various size Redis (Database)

- Let Linux operating system more secure (Linux)

- in no backup ex: error: Xin Tourou ah backup child process has Singles DAT / US person / bin / in no backup ex (Database)

- Using nmcli commands to manage network in RedHat / CentOS 7.x (Linux)

- Examples 14 grep command (Linux)

- Automate deployment of Docker-based Rails applications (Server)

- C language header file defines a global variable (Programming)

- Use XtraBackup to MySQL database online incremental backup and recovery (Database)

- MySQL DATE_FORMAT () function (Database)

- Editor of the popular Linux Gvim (Linux)

- Graphical interface for the CentOS 6.4 installed and connected by remote VNC (Linux)

- OpenGL Superb Learning Notes - Fragment Shader (Programming)

- To solve the Mac in question invalid BASH under configuration environment variable (Linux)

- Linux system started to learn: Teaches you install Ubuntu 15.04 on VirtualBox (Linux)

- To configure parameter configuration and software installation and uninstallation under Linux (Linux)

 
         
  EChart simple and practical control on chart
     
  Add Date : 2018-11-21      
         
         
         
 

1. Download the preceding frame and placed in the project.

2. Call

in the js


< html lang = "en" >

< head >

< meta charset = "utf-8" >

< title > ECharts < / title >

< / head >

 

< body >

    < - Step:! 1 Prepare a dom for ECharts which (must) has size (width & hight) - >

    < - Step:! 1 to prepare a ECharts with size (width and height) of Dom - >

    < div id = "main"

        style = "height: 500px; border: 1px solid #ccc; padding: 10px;" > < / div >

    < div id = "mainMap"

        style = "height: 500px; border: 1px solid #ccc; padding: 10px;" > < / div >

 

    < - Step:! 2 Import echarts.js - >

    < - Step:! 2 introduced echarts.js - >

    < script src = "$ {base.contextPath} /js/echarts.js" > < / script >

    < script type = "text / javascript"

        src = "$ {base.contextPath} /js/jquery-1.6.2.min.js" > < / script >

    < script type = "text / javascript" >

        // Step: 3 conifg ECharts's path, link to echarts.js from current page

.

        // Step: 3 for the module loader configuration path echarts from the current page links to echarts.js, define the required chart a path

        require.config ({

            paths: {

                echarts: '$ {base.contextPath} / js'

           }

       });

 

        // Step:. 4 require echarts and use it in the callback

        // Step: 4 dynamic loading echarts then started in the callback function to keep the demand loading structure is defined chart a path

        $ (document) .ready (

                function () {

                    $ .ajax ({

                        url: "? $ {Base.contextPath} / total / data type = 1",

                        type: 'get',

                        contentType: "application / json",

                        cache: false,

                        success: function (text) {

                            var data = text;

 

                            bar (data);

                       },

                        error: function (jqXHR, textStatus, errorThrown) {

                            btnSave.setEnabled (true);

                            if (400 == jqXHR.status || 403 == jqXHR.status

                                    || 500 == jqXHR.status)

                                return;

                            var text = "The operation failed," + jqXHR.responseText;

                            mini.alert (text);

                       }

                   });

               });

        // bar (null);

        function bar (data) {

            var sData = new Array ();

            var sX = new Array ();

            for (i = 0; i < data.length; i ++) {

                sData [i] = data [i] .total;

                sX [i] = data [i] .brand;

           }

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

            // 'echarts / chart / map'

           ], function (ec) {

 

                // --- off column ---

                var myChart = ec.init (document.getElementById ( 'main'));

                myChart.setOption ({

                    tooltip: {

                        trigger: 'axis'

                   },

                    legend: {

                        data: [ 'Total']

                   },

                    toolbox: {

                        show: true,

                        feature: {

                            mark: {

                                show: true

                           },

                            dataView: {

                                show: true,

                                readOnly: false

                           },

                            magicType: {

                                show: true,

                                type: [ 'line', 'bar']

                           },

                            restore: {

                                show: true

                           },

                            saveAsImage: {

                                show: true

                           }

                       }

                   },

                    calculable: true,

                    xAxis: [{

                        type: 'category',

                        data: sX

                   }],

                    yAxis: [{

                        type: 'value',

                        splitArea: {

                            show: true

                       }

                   }],

                    series: [{

                        name: 'Total',

                        type: 'bar',

                        data: sData

                   },

                    / *   {

                        name: 'precipitation',

                        type: 'bar',

                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

                   } * /

                   ]

               });

           });

       }

    < / script >

< / body >

< / html >

     
         
         
         
  More:      
 
- JDK tools jstat (Linux)
- How to create a bootable USB disk to use MultiSystem on Ubuntu (Linux)
- Ubuntu 14.04 to install file editor KKEdit 0.1.5 version (Linux)
- Python, and / or (Programming)
- Ubuntu install VMware Workstation 11 tutorials at 14.04 / 14.10 (Linux)
- Java multi-threaded shared communications variables (Programming)
- Linux Shell Scripting multithreading (Programming)
- Print Linux system error codes (Linux)
- Binding unofficial Google Drive and Ubuntu 14.04 LTS (Linux)
- Using Python and OpenCV detecting image barcode (Programming)
- Debian (Wheezy) Install Java environment / replace OpenJDK as the SUN JDK (Linux)
- C ++ hash function (Programming)
- Linux install Samba file sharing server (Server)
- Storm basic framework for analysis (Programming)
- Linux system security reinforcement (Linux)
- Java multi-threaded in a three way (inheritance, implementation, anonymous inner classes) (Programming)
- To read the Linux ext3 / ext4 format partitions under Windows system software (Linux)
- Nginx configuration support f4v video format player (Server)
- CentOS7 installation configuration (Server)
- Delay for the specified IP port analog network to send and receive packets on Linux (Linux)
     
           
     
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.