echart initial library

A, echart Profile

　　Echarts (http://echarts.baidu.com/) is Baidu company produced, regarded as the conscience of Baidu rare. To completely grasp Echarts, you need to have a little knowledge of front-end development, knowledge is your time to spend a few weeks can be learned (here you need to master a little html, css, javascript knowledge of)

Second, the introductory case

(Note: Be sure to place the container in front of js code, [I also discovered after practice])

1, Code

 

<! DOCTYPE HTML > 
< HTML > 
< head > 
< Meta charset = "UTF-. 8" > 
<-! Introduced ECharts File -> 
< Script the src = "JS / echarts.js" > </ Script > 
</ head > 
< body > <-! to prepare a ECharts includes Dom size (width and height) of the -> < div ID = "main" style = "width: 100%; height: 450px;" > </ div > </body><script type
    
    

= "text / JavaScript" > // based ready dom, instance initialization echarts var myChart = echarts.init (document.getElementById ( ' main ' )); // the specified configurations and the data table var Option = { 
           barWidth: 30 , // strip width was 30            ToolTip: {}, 
           Legend: { // Description // Orient: 'Vertical', // description appears at the location // Center: 'Center', // described centered position centered by default horizontal display                     Data: [ ' period ' , ' ending ' ],
        
     

        
       

                    
                    
// Data Description 
                    bottom: ' bottom ' , 
                    }, 
           XAXIS: { // X-axis of the content 
                    type: ' category ' , 
                    AxisLabel: { 
                        // Text Text displayed obliquely on the abscissa color the begin 
                             interval The: 0 , 
                             Rotate: 45 , 
                             margin: 10 , 
                             textStyle: {Color: " # ec6869 " }
                         //Wrap text color display text on the abscissa End 
                             }, 
                    type: ' category ' , 
                    Data: [ " language " , " mathematics " , " English " , " Physics " , " Chemistry " ] 
                  }, 
            YAXIS: { // the Y axis the content 
                     type: ' value ' 
                   }, 
            title: { 
                 text: 'Pa next ' ,// main title text, '\ n' specify line breaks 
                 subtext: ' 2019 autumn experiment results school students ' , 
                 left: ' Center ' , 
            }, 
            Series: [ 
                // first data the begin 
                    { 
                    type: ' bar ' , // Echart histogram (bar) 
                    name: ' period ' , 
                    Data: [ 60 , 70 , 55 , 33 is , 12 is ],
                         //Cylindrical bar color is set to the begin eb6768 # 
                        ItemStyle: { 
                                Normal: { 
                                Color: ' # eb6768 ' , 
                                the shadowBlur: 2 , 
                                shadowColor: ' RGBA (. 3,. 3,. 4, 0.5) ' 
                                        } 
                                    } 
                        // columnar bar color is set to End eb6768 # 
                    },
                  // first data End 
// second data the begin                         { 
                    type: ' bar                 
                 
' , 
                    Name: ' period ' , 
                    Data: [ 63 is , 65 , 35 , 18 is , 24 ],
                     // the columnar bar color is set to the begin eb6768 # 
                    ItemStyle: { 
                            Normal: { 
                                Color: ' # 3b8ede ' , 
                                the shadowBlur: 2 , 
                                shadowColor: ' RGBA (. 3,. 3,. 4, 0.5) '  
                                  }
                               }
                    // columnar bar color is set to End eb6768 #     
                  } 
                // second data End     
               ] 
             }; 
       

        // use just specified configuration data items and display the chart. 
        myChart.setOption (Option);
     </ Script > 
</ HTML >

 

2, effect