Echarts 柱形图 时间横轴的动态生成和数据的动态生成

最近在项目里做一个数据统计的模块，当时自己选中的JfreeChart,自己对这个其实也不是很熟悉，做完了之后生成的图片看着好丑，而且很模糊。后来同事向我推荐了Echarts ，这是在用Echarts 的时候的一点心得，防止以后自己再遇到这样的问题忘记了。本人新手，还请各位多多指教

首先，当然是引入JS文件，这个就跳过了。接着就是JSP页面：

<div id="pieChart" style="height: 400px;width:1200px;"></div>   //这里需要给这个div 设置height和width，不然后面生成图片会报错

然后是JS：

我将生成图片的js改成了如下的一个方法，然后只要在这个方法中传入参数就可以实现动态地生成柱形图了：

方法如下：

//生成图片的方法
function makePicture(result,others,show,upload,instal,active,unload){
option = {
   tooltip : {
       trigger: 'axis',
       axisPointer : {            // 坐标轴指示器，坐标轴触发有效
           type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       }
   },
   legend: {
    data:['获取广告','展示','下载','安装','激活','卸载']
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   xAxis : [
       {
           type : 'category',
           data:result        //待传入的参数result ，此为时间的横坐标，其实也是一个数组
       }
   ],
   yAxis : [
       {
           type : 'value'
       }
   ],
   series : [
       {
           name:'获取广告',
           type:'bar',
           data:others     //待传入的参数others 
       },
       {
           name:'展示',
           type:'bar',
           stack: '广告',
           data:show
 //待传入的参数show
       },
       {
           name:'下载',
           type:'bar',
           data:upload      //待传入的参数others 
         
       },
       {
           name:'安装',
           type:'bar',
           data:instal        //待传入的参数instal   
         
       },
       {
           name:'激活',
           type:'bar',
           data:active      //待传入的参数others 
         
       },
       {
           name:'卸载',
           type:'bar',
           data:unload     //待传入的参数unload
         
       },
   ]
};
myChart.clear();
//此处是将前一次生成的图的数据清除，不加这句的话，前一次的图的数据可能在下一次生成图的时候仍然会存在图上
myChart.setOption(option);
}

传入参数之前，当然，我们需要准备得到的数据：

通过ajax,得到后台传过来的json，然后得到那些要传入的参数的值：(这些参数都是数组)

//柱形图的数据准备

var result= [];
var others = [];
var show = [];
var upload = [];
var instal = [];
var active = [];
var unload = [];

我得到的json为resultCount；

然后将resultCount的值传给以上的数组：

for(var i=0;i<resultCount.length;i++){

result.push(resultCount[i].result);
others.push(resultCount[i].others);
show.push(resultCount[i].show);
upload.push(resultCount[i].upload);
instal.push(resultCount[i].instal);
active.push(resultCount[i].active);
unload.push(resultCount[i].unload);

}

这样，我们要传入方法的参数就都有数据了，准备工作做完了，现在只要最后几步，就可以生成图了：

1.  var myChart = echarts.init(document.getElementById('pieChart'));   /根据div的ID来实现echarts初始化

2.在生成图的方法中塞入有数据的参数就可以了

makePicture(result3,others,show,upload,instal,active,unload)

效果如下：