echarts时间轴问题

努力成为大牛ing 发布于 2015/02/10 18:19
阅读 1K+
收藏 0

echarts中如何根据时间动态加载数据?我做了好几天,还没弄出来,求帮助,万分感谢。

代码如下:

require(
[ 'echarts',
'echarts/theme/macarons',
'echarts/chart/pie', 
'echarts/chart/bar','echarts/chart/line',
'echarts/chart/funnel' 
], 
draw_pie,
get_time
);


  function get_time(ec){
var ecConfig = require('echarts/config');
var myChart = ec.init(document.getElementById("main"));
myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, getTime);
function getTime(para){
var time = para.data;

//根据时间为条件获取的数据返回
$.ajax({
type:'post',
dataType:'json',
url:'hczd-sys/userLog/time_module.htm',
data:{
time:time
},
success:function(result){
if(result){
//我想在这里实现饼图的调用
draw_pie(ec);
}
},
error:function(data){
console.info(data.responseText);
}
});
}

}  

function draw_pie(ec,theme) {
var time;
var ecConfig = require('echarts/config');
var myChart = ec.init(document.getElementById("main"));
myChart.on(ecConfig.EVENT.CLICK, eConsole);
function eConsole(param) {
var series=option.options[0].series[0];
           var data=series.data[param.dataIndex].name;
            var params = "project_name="+'${project_name}'+ 
"&module="+'${module}'+  
"&data="+data+
"&time="+time;
if('${module}'){
alert('亲,里面没有数据,不能点击啦!');
}else{
$("#dg").html("<iframe src='hczd-sys/userLog/module_page_view.htm?"+params+ "' height='100%' style='width: 100%'></iframe>");

}

}

var option = {
timeline:{
data:[ '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01',
           { name:'2015-06-01', symbol:'emptyStar6', symbolSize:8 },
            '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01',
             { name:'2015-12-01', symbol:'star6', symbolSize:8 }
        ],
label : {
            formatter : function(s) {
                return s.slice(0, 7);
            }
        },
        autoPlay : true,
       playInterval : 5000
},
options:[
{
title : {
       text: '${module ==''?project_name:module}访问量统计',
       subtext: '统计',
       x:'center'
   },
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
       orient : 'vertical',
       x : 'left',
       data:[
        <c:forEach items="${module_list}" var="md" varStatus="s">
        <c:if test="${module != null && module !=''}">
'${md.url}'${s.count==module_list.size()?'':','}
</c:if>
<c:if test="${module == null || module == ''}">
'${md.module}'${s.count==module_list.size()?'':','}
</c:if>
            </c:forEach>  
       ]
   },
   toolbox: {
       show : true,
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false,lang: ['数据视图', '关闭', '刷新']},
         /*   magicType : {
show : true,
type : ['bar', 'funnel'],
option:{
funnel:{
x: '25%',
                              width: '50%',
                                funnelAlign: 'left',
                                max: 1700
}
}
}, */
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : true,
   series : [
       {
           name:'浏览类型',
           type:'pie',
           radius : '50%',
          center: ['50%', '50%'],
           data:[
<c:forEach items="${module_list}" var="md" varStatus="s">
<c:if test="${module != null && module !=''}">
{value:'${md.url_count}',name:'${md.url}'}${s.count==module_list.size()?'':','}
            </c:if>
            <c:if test="${module == null || module ==''}">
            {value:'${md.module_count}',name:'${md.module}'}${s.count==module_list.size()?'':','}
            </c:if>
            </c:forEach>  
           ]
       }
  ]
}
]

};
//loading data
myChart.setOption(option);
myChart.restore();
}; 
</script>
  </head> 
  <body>
<div id="main" class="main" align="right"></div>

<div id="other" class="main"></div>

  </body>
</html>


加载中
0
夢的世界llll
夢的世界llll
弄出来了吗?没有我告诉你
努力成为大牛ing
努力成为大牛ing
一直没弄了,没有弄出来
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部