学习echarts后的一点感悟

 学习echarts后的一点感悟

                              本猿是第一次写东西，是今年的毕业生，当初怀着无限的青春梦想义务的投生到IT行业，谁知一入坑，才知坑很深，小猿目前就只于南京一家小公司的大数据产品部，从是java开发，因为平时经常会用到百度的echarts 写点东西帮助初学者少走弯路

                               1 .引入 echarts.js

                               2 在html页面或者 jsp页面写入一个div

                                   如：<div id="myEchart" style="height:500px;"></div>

                        3 echarts的数据显示主要考的一个option对象 和一个 对应的万能接口setOption

                                        myChart = echarts.init(document.getElementById("myEchart"));

                                option = {..........}//这里内容可以直接从Echat自带的列子中取

                                  myChart.setOption(option);//将图表内容格式内容放入到myChart位置

                               4  后台数据交互 以显示柱状图为例

                                             a 柱状图的显示主要分 x 轴 和 y轴  在这里我这边平时的后台数据的反回是使用的springmvc+mybatis 返回json 

                                       

                               $.ajax({

                                                   type:"post",

                                                   async:false,

                                                   url:“/mobilePopulation/Geo.do”,//请求路径

                                                  dataType:"json",//返回数据形式为json

                                                  data:_data,

                                                  success:function(result){

                                                             if(result){

                                                                      options.legend.data = result.legend;  //legend赋值数据

                                                                      options.xAxis[0].data=  result[0].xdata；//x轴赋值数据

                                                                      options.series[0].data= result[0].data；//y轴赋值数据

                                                                      myChart.hideLoading();  

                                                                      myChart.setOption(options); 

                                                             }

                                                   }，

                                                  error:function(errorMsg){
                                                             alert("图表请求数据失败啦!");
                                                             myChart.hideLoading(); 
                                                   }

                                       })

                              }

 

                        5 使用echarts中的遇到的一些问题，在实际 的开发中一般我们遇到的问题都是图表的样式问题和所对应的塞数据的问题 ,一般来说遇到样式问题可以找对应的API 到目前为止，我所遇到的样式问题都可以在API找到，而对于塞数据的问题，这个就要特殊情况特殊对待,无论是x 轴的 还是y轴的 他们的里面的series实际就是一个数组，而这个数组是有结构的对象数组 

  var y=[];

                       y.push({type:'bar',barWidth:15,data:arr4[i],barCategoryGap:'30%'});

                      option.series=y;

                  通过该种方式基本可以搞定大部分塞数据而数据不正确现实的问题