23. Installation and php graph showing binding echarts

data demonstration

http://echarts.baidu.com/index.html

It is an image display

To the official example can select various FIG.

By downloading examples

New echartdome.php

<! DOCTYPE HTML> 
<HTML> 
<head> 
    <Meta charset = " UTF-. 8 " > 
    <-! Introduced ECharts File -> 
    <Script the src = " echarts.simple.min.js " > </ Script> 
< / head> 
<body> 
    <- ECharts to prepare Dom includes a size (width and height) of the ->! 
    <div ID = " main " style = " width: 600px; height: 400px; " > </ div> 
    < of the type = Script " text / JavaScript " >
        // based ready dom, instance initialization echarts 
        var myChart = echarts.init (document.getElementById ( ' main' )); 

        // the specified data and the chart CI 
        var Option = { 
            title: { 
                text: ' ECharts start example ' 
            }, 
            ToolTip: {}, 
            Legend: { 
                Data: [ ' sales ' ] 
            }, 
            XAXIS: { 
                Data : [ " shirt " , " sweater " , " chiffon shirt " , " pants " , " high heels " , "sock" ] 
            }, 
            YAXIS: {}, 
            Series: [{ 
                name: ' sales ' , 
                type: ' bar ' , 
                Data: [ . 5 , 20 is , 36 , 10 , 10 , 20 is ] 
            }] 
        }; 

        // use just specified CI graph and data. 
        myChart.setOption (Option);
     </ Script> 
</ body> 
</ HTML>

Open the browser

But we must be run by phpstudy, so can not directly open the page

First echartdome.php into index.php (the file name is to change it)

Choose your own project directory, and modify the site name, and then save the changes

Modify the hosts file

Add this one

Restart the phpstudy, and open the browser, enter the address www.echart.com/

I now need to put the data upflow table inside mysql database shows userdb out by echart, we now need to modify the index.php file

The modified content

<! DOCTYPE HTML> 

<? PHP 
$ the DBMS = ' MySQL ' ;      // database type 
$ Host = ' 192.168.86.131 ' ; // database hostname 
$ dbName = ' userdb ' ;     // database using 
$ = the User ' Sqoop ' ;       // database user name 
$ = Pass ' Sqoop ' ;           // password corresponding 
$ DSN = " $ DBMS: Host Host = $; dbName dbname = $ " ; 

 $ DBH = new newPDO ($ DSN, User $, $ Pass); // initialize a PDO object 
    / * You can also perform a search operation * / 
the foreach ($ dbh-> Query ( ' the SELECT * from Upflow ' ) AS $ Row) { 
    $ X [] = $ Row [ ' IP ' ]; 
    $ Y [] = $ Row [ ' SUM ' ]; 

    print_r ($ Row); // you can use the echo ($ GLOBAL); these values to see 
} 

$ json_x = json_encode ($ X); 
$ json_y = json_encode ($ Y);



 ?> 

<HTML> 
<head> 
    <Meta charset = " UTF-. 8 "> 
    <! - File incorporated ECharts -> 
    <Script the src = " echarts.simple.min.js " > </ Script> 
</ head> 
<body> 
    <! - to prepare a ECharts includes size (width and height) the Dom -> 
    <div ID = " main " style = " width: 600px; height: 400px; " > </ div> 
    <Script type = " text / JavaScript " >
         // echarts example based ready dom, initialization 
        
        var X = <PHP echo $ json_x??> ;
         var Y = <PHP echo $ json_y??> ; 

        var myChart = echarts.init(document.getElementById('main' ));
 <! -
         @ specifies the data table and CI 
        var Option = { 
            title: { 
                text: ' ECharts start example ' 
            }, 
            ToolTip: {}, 
            Legend: { 
                Data: [ ' sales ' ] 
            }, 
            XAXIS: { 
                the Data: [ " shirt " , " sweater " , " chiffon shirt " , " pants " , " high heels "," Sock " ] 
            }, 
            YAXIS: {}, 
            Series: [{ 
                name: ' sales ' , 
                type: ' bar ' , 
                Data: [ . 5 , 20 is , 36 , 10 , 10 , 20 is ] 
            }] 
        };
  -> var = Option { 
    title: { 
        text: ' the IT eighteen palm test data ' , 
        subtext: '
        
        纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量']
    },
    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 : x
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar' ,
            Data: Y, 
            markPoint: { 
                Data: [ 
                    {type: ' max ' , name: ' maximum ' }, 
                    {type: ' min ' , name: ' Min ' } 
                ] 
            }, 
            markLine: { 
                Data: [ 
                    { type: ' average ' , name: ' average ' } 
                ] 
            } 
        },
        
    ]
};


         //Just use the specified configuration items and data charts. 
        myChart.setOption (Option);
     </ Script> 
</ body> 
</ HTML>

Refresh the page

23. Installation and php graph showing binding echarts

Guess you like