Echarts基于动态数据初步使用 及问题 代码记录.

　　　　　　　　ECHARTS 插件 基本的动态数据展示(横向图)

• 下载 echarts.commn.min.js文件
• 在页面中进行引用, 并为Echarts图形准备一个div盒子

  1 <!-- 引入插件 -->2 <script type="text/javascript" src='/images/loading.gif' data-original="<%=contextPath%>/js/lib/echarts/echarts.common.min.js"></script> 3 <!-- 为ECharts准备一个具备大小（宽高）的Dom盒子 -->4 <div id="main" ></div>

  　　===================================================== 2 var yAxisData=[];//为y轴数据 声明变量 3 var series_before=[]; //准备变量 现在存放的是现在的反馈量 4 var series_today=[]; // 同上 存放的是今天的反馈量 5 6 var url = webContext + '/act/getRanking'; //var webContext = '<%=contextPath%>'; 这个webContext来源别的外引jsp头文件 url是干什么的就不说了 7 var param = {maId:maId}; // 设置参数 因为是post参数所以只能准备这样的 键值对参数了 8 9 $.ajax({//ajax调用开始10 type : "post", 11 url : url,12 data : param,13 async : false,//是否同步 因为我担心图标是一次性绘制 如果绘制快的话 数据还没传回来就绘制了就出错了 所以用的非异步 14 success : function(data){ //如果成功后调用的参数 data为返回回来的数据15 var x=JSON.parse(data);//用JSON的parse函数解析掉数据16 //实际上他是把json字符串解析成了 js中的数组的形式 方便我们在js中数据获取 使用等等17 var yAxis=new Array([x.length]);//因为 :18 //1 我们是一个横向的柱体表格 19 //2 echart插件需要的数据是用 逗号隔开的 单数据(就是只有value不需要key) 数组形式 例:33,21,45....20 //3 他的绘制数据是由下而上进行填充的 所以你想降序的形式展示出来 那么你的数据就该是 升序的 例: 1,2,3,5,7 在y轴上展示的是7,5,3,2,121 //4 所以我们先定义出同一长度的数组 因为我一个柱体上要展示两个数据 所以算上y轴的 我们需要 3个等长数组!22 var before=new Array([x.length]);23 var today=new Array([x.length]);24 //因为我的数据条数是不确定的 所以我做了一些处理使其数据过多的时候不再是挤在一个死大小的盒子中 而是 加长盒子 当然这个里还有添加echarts插件滚动条的方式 但是由于业务需要再者本人不喜欢 所以动了些手脚25 //165是表内容到div边界的一个总值26 var div_high = (x.length)*30 +165;27 if(div_high ==165 ){div_high=600;}28 $("#main").attr("style","background:#ffffff; width: 1100px;height:"+div_high+"px;");29 30 31 for(var i=0;i<x.length;i++){32 yAxis[i]=x[i].userName;//我的数据中的 名字33 before[i]=x[i].num-x[i].todayNum;//除了今天 总数减去今天的就是以前的34 today[i]=x[i].todayNum;//今天的35 }36 yAxisData=yAxis;//这个是因为在echarts插件中也要使用 数据的访问范围问题 提到了chartload()方法体的局部变量了37 series_before=before;38 series_today=today;39 },40 error:function(e){41 alert("error!");42 }43 })
  

  原标题：Echarts基于动态数据初步使用 及问题 代码记录.

  关键词：