ECharts- first post simplest application

1, a simple demonstration of a pie chart
Ready echarts-all.js
2, write page code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts-all.js"></script>
    <div id="pie1" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById ( 'pie1'));
    the Option1 = { 
        title: { 
            text: ' by type statistics ' , 
            Top: ' bottom ' , 
            left: ' Center ' , 
            textStyle: { 
                the fontSize: 14 , 
                fontWeight: '' , 
                Color: ' # 333 ' 
            }, 
        }, // title 
        ToolTip: { 
            Trigger: ' Item '  ,
            Formatter:" {A} a {B}: {C} ({D}%) " ,
             / * Formatter: function (Val) {// allow for series wrap text 
                 console.log (val); // val view the attributes, content attributes to customize inside 
                 var var content = [ 'name']; 
                 return content; // return the tag may contain html 
             } * /  // custom mouse suspended interactive information presentation, mouse on bread FIG like the trigger event 
        }, // message box, when the information presentation mouse interaction suspension 
        Legend: { 
            Show: to false , 
            Orient: ' Vertical ' , 
            X: ' left ' ,
            Data: [ ' 50% - students ' , ' 25% - teacher ' , ' 25% - parents ' ] 
        }, // Legend Properties, an example of a pie graph, pie chart for explaining each sector, data the lower series of data matches 
        Graphic: { 
            type: ' text ' , 
            left: ' Center ' , 
            Top: ' Center ' , 
            style: { 
                text: ' user statistics \ n- ' + ' 100 ' , // use the "+" you can make each line of text centered
                textAlign: ' Center ' , 
                font: ' Italic Cursive Bolder 16px ' , 
                Fill: ' # 000 ' , 
                width: 30 , 
                height: 30 
            } 
        }, // this example a pie graph display attribute text center of the circle, which is a native graphic elements components, many features 
        Series: [ 
            { 
                name: ' user statistics ' , // ToolTip prompt box displays the contents 
                of the type: ' PIE ' , //Pattern type, such as pie charts, bar charts, etc. 
                RADIUS: [ ' 35%' , ' 65% ' ], // first pie radius, the radius of the array is, the second term is the outer radius. The percentage of support, the present embodiment is arranged an annular FIG. See specific document or may change its value try 
                // roseType: 'Area', whether to FIG Nightingale, default to false 
                ItemStyle: { 
                    Normal: { 
                        label: { 
                            Show: to true , 
                            textStyle: {Color: ' # 3c4858 ' , the fontSize: " 18 is " }, 
                            Formatter: function (Val) {    // make series wrap text for 
                                return val.name.split ( " - ") .join ( " \ n- " );} 
                        }, // text label on the pie chart graphics, it may be used to illustrate some of the graphics data, such as values, names, and the like. ItemStyle similar properties may look at the specific document 
                        labelLine: { 
                            Show: to true , 
                            the lineStyle: {Color: ' # 3c4858 ' } 
                        } // line color 
                    }, // base style 
                    emphasis: { 
                        the shadowBlur: 10 ,
                        shadowOffsetX: 0 , 
                        shadowColor: ' RGBA (0, 0, 0, 0.5) ' , // mouse on the region border color 
                        textColor: ' # 000 ' 
                    } // mouse on the respective pattern regions 
                }, 
                Data: [ 
                    {value : 50 , name: ' 50% - students ' }, 
                    {value: 25 , name: ' 25% - teacher ' }, 
                    {value: 25 , name: ' 25% - parents ' } 
                ], // data, other property, consult the documentation
                Color: [ ' # 51CEC6 ' , ' # FFB703 ' , ' # 5FA0FA ' ], // each region color 
            }, // array {a} element, a graph, this ring may be made to FIG 
        ], // Series list 
    }; 
    myChart1.setOption (the Option1); 
    </ Script > 
</ head > 
</ HTML >
3, open the page in a browser
Summary: echarts use
1 "using echarts.init (document.getElementById ( 'pie1')); initialize a display position of html tags ECharts
2 "to write your own option
3 "will be loaded into the initialized ECharts position.
ECharts- first post simplest application

Guess you like
