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

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


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


  //这里需要给这个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

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)

效果如下:

Echarts 柱形图 时间横轴的动态生成和数据的动态生成_第1张图片



你可能感兴趣的:(js插件)