Full version ajax+ Baidu echarts Implement statistical Chart demo and adapt to the window size change

1. Preface
Baidu Echarts will commonly used in our project to do statistics, API is very detailed, demo is also very much, we often have everything, do some small projects, Baidu Echarts demo is enough. What about today. Mainly with small white talk about, how to use ajax+ Baidu Echarts to achieve our dynamic data binding it.
2. Details
Write a full demo. The URL of the interface itself, the data structure to change. Introduction of Baidu Echarts Library

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= XGF99MJQCACK1CTV50LXS0QOQDHIZML1 "></script>

2.html content '

<div class= "Match_echart cleanfloat" >                     
     <div id= "Chart1" style= ' margin-right:1% ' ></div>
     <div id= "Chart2" ></div>
 </div>

3.CSS style

Define wide height
.match_echart>div{width:48%; height:400px;float:left; border:1px solid #d1d1d1;}
cleanfloat:after{display:block;clear:both;content: ""; visibility:hidden;height:0;}

4.js Code

Initialize var Chart1 = echarts.init (document.getElementById (' Chart1 '));

var chart2 = echarts.init (document.getElementById (' Chart2 '));
        Get data with Ajax fill function Chartfun () {/* pie chart option*/var option1 = {title: {text: ' Category ', x: ' Center ',}, ToolTip: {trigger: ' item ', formatter: ' {A} <br/>{b}: {C} ({d}%) '}, Legend: {Orient: ' vertical ', left : ' Left ', data: [' height ', ' moderate ', ' low ']}, series: [{Name: ' Category ', type: ' Pie ', center: [' 50% ', ' 55% '], radius: ' 50% ', D ATA: []},]}/* Histogram option*/var option2 = {title: {text: ' Opponent ', x: ' Center ',}, tooltip: {T Rigger: ' Axis ', Axispointer: {type: ' Shadow '}}, Xaxis: [{type: ' Category ', data: [], Axistick: {ALIGNWITHL Abel:true}], YAxis: [{type: ' value '}], series: [{name: ' opponent ', type: ' Bar ', center: [' 50% ', ' 55% '] , Radius: ' 50% ', Data: []},]}/* Category pie chart */$.ajax ({url:url1,//Please change to your own URL success:function (re
       Sult) {     Change to your own data structure var = result.high;                     
            var low = Result.low;                                          
            var middle = result.middle;
             Option1.series[0].data.push ({value:high, Name: "Height"}, {value:middle, Name: "Moderate"}, {value:low, Name: ' Low '});                
            Chart1.setoption (Option1);
            }})/* Classification histogram */$.ajax ({url:url2,//Please replace your own URL success:function (result) { Replace with your own data structure for (var i = 0; i < result.list.length; i++) {var column =resul
                T.list[i].column;
                var num = result.list[i].num;
                Option2.series[0].data.push ({value:num, name:column});   
              Option2.xaxis[0].data.push (column);                           
        } chart2.setoption (Option2); }
    })
  }


//Call Method $ (function () {chartfun ()});
    According to the window size Adaptive chart window.addeventlistener ("Resize", function () {chart1.resize ();
Chart2.resize (); });

5. Effect display

4. Summary
This demo in the application of the project needs should be simple can not be simpler, a lot of children's shoes demand is certainly not jiangzi, OK, if you are small white, this will, a little difficult or more difficult will not baffle you. In short, the master of the method will be. I write this is very food, well, I admit that I do not take the technology, learning.