Study Note: echarts

Echarts (Enterprise Charts Commercial Product Chart library)

Provides a common chart of commercial products, based on Zrender (a brand new lightweight canvas class library), creates basic components such as coordinate systems, legends, hints, toolboxes, and builds a line chart, histogram, scatter, candlestick chart, pie chart, radar, map, chord graph, force-directed layout, Dashboards and funnel charts, while supporting stacking and multi-chart blending of any dimension.

http://echarts.baidu.com/doc/doc.html Documentation

http://echarts.baidu.com/doc/example.html instances

A simple pie chart.

<!--prepare a DOM with size (wide height) for echarts -<DivID= "Main"style= "width:600px;height:400px"></Div><!--echarts Single File Introduction -<Scriptsrc= "Http://echarts.baidu.com/build/dist/echarts.js"></Script><Scripttype= "Text/javascript">//Path Configurationrequire.config ({paths: {echarts:'http://echarts.baidu.com/build/dist'    }});//Userequire (['Echarts',        //load on Demand (ex: Load bar module with bar chart)        'Echarts/chart/line',             //polyline (area) chart        //' Echarts/chart/bar ',//Histogram (BAR)        //' Echarts/chart/scatter ',//Scatter (bubble) chart        //' echarts/chart/k ',//k line chart        'Echarts/chart/pie',             //Pie (doughnut) Chart        //' Echarts/chart/radar ',//Radar (area) chart        //' Echarts/chart/chord ',//chord graph        //' Echarts/chart/force ',//force-oriented layout diagram        //' Echarts/chart/map ',//Map        //' Echarts/chart/gauge ',//instrument panel        //' Echarts/chart/funnel ',//Funnel chart        //' echarts/chart/eventriver ',//Event river diagram        //' Echarts/chart/venn ',//Wayne Map        //' Echarts/chart/treemap ',//rectangular tree Chart        //' Echarts/chart/tree ',//Tree chart        //' Echarts/chart/wordcloud ',//character Fu Yun        //' Echarts/chart/mix ',//mashup        //' echarts/chart/component ',//Components        //' Echarts/chart/other ',//other        //' echarts/chart/theme ',//Theme        //' echarts/chart/topic ',//thematic    ],    function(EC) {//Initialize the Echarts chart based on the prepared Dom        varMyChart=Ec.init (document.getElementById ('Main')); ///////////////////////option={title: {text:'A site user access source', Subtext:'purely fictional .', x:'Center'}, Calculable:false, Series: [{name:'Access Source', type:'Pie',//Pie chartradius:'50%', center: ['50%', '60%'], data:[{value:335, Name:'Direct Access'}, {value:310, Name:'Email Marketing'}, {value:234, Name:'Affiliate ADS'}, {value:135, Name:'Video Ads'}, {value:1548, Name:'Search Engine'}                    ]                }            ]        }; ///////////////////////        //loading data for Echarts objectsmychart.setoption (option); });</Script>

Study Note: echarts