时间轴 搭配 饼图使用

SongPingp 发布于 2014/09/09 09:22
阅读 3K+
收藏 3

@Kener-林峰 你好,想跟你请教个问题:我动态加载了echarts时间轴和饼图数据,饼图数据是跟着时间轴的时间来加载数据。 我是一次请求把各个时间点数据都加载到客户端浏览器上,用函数来一次出来到echarts myOptions里面,代码如下:

// 基于准备好的dom,初始化echarts图表
		myChart = ec.init(document.getElementById('main'));

		// 为echarts对象加载数据 
		//绑定事件第一步操作
		var ecConfig = require('echarts/config');
		myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function(param) {
			//myOptions.options.push(getOption(param.data));
			//myOptions.options[0].series=[];
			//myOptions.options[0].series.push(setS(param.data));
			console.log(myOptions.options[5].series[0].data[1].name); 
		});
		//加载数据
		myOptions = setReptData(anneeYear,myOptions);
		myEcharts = myChart.setOption(myOptions);
		console.log(myOptions);


function setReptData(anneeYear,myOptions){
    	for(var i = 0 ;i<anneeYear.length;i++){
    		if(i==0){
    			myOptions.options[0].series=[];
    			myOptions.options[0].series.push(setByFirstYear(anneeYear[i]));
    		}else{
    			myOptions.options.push(laterYearData(anneeYear[i]));
    		}
    	}
    	return myOptions;
    }
    function returnData(year){
    	console.log("returnData:"+year);
    	var data = [];
    	for ( var i = 0; i < jsonObj.length; i++) {
    		var getYear=jsonObj[i].anneeYear;
    		if(year==getYear){
	    		var induCode = jsonObj[i].induCode;
	    		var entpCount = jsonObj[i].entpCount;
    			var inserObj = {value:entpCount,name:induCode};
    			data.push(inserObj);
    		}
		}
    	return data;
    }
    //加载第一年往后数据
    function laterYearData(year){
    	console.log("laterYearData:"+year);
    	var getData = returnData(year); 
    	console.log("getData:"+getData);
    	var newOption = {series : [ {
    		name : jsonObj[0].areaCode + '地区-行业占比',
    		type : 'pie',
    		center : [ '50%', '45%' ],
    		radius : '50%',
    		data : getData
    	} ]};
    	return newOption;
    }
    //加载第一年数据
    function setByFirstYear(year){
    	console.log("setByFirstYear:"+year);
    	var getData = returnData(year);
    	var newOption =  {
    		name : jsonObj[0].areaCode + '地区-行业占比',
    		type : 'pie',
    		center : [ '50%', '45%' ],
    		radius : '50%',
    		data : getData
    	} ;
    	return newOption;
    }



现在的问题是:我f12debug和console.log时候参数都push放到myOptions里面,在页面展示图表数据,饼图展示缺少某数据展示项如图:

但是点击服务行业 项 数据还是能显示,结果数据还是对的。如下:


还有偶尔还能出现两个 这样的东东,是在谷歌浏览器下展示,版本为  28.0.1500.95 m


加载中
0
Kener-林峰
Kener-林峰
把option打印出来看看吧,关键是第一个起始的option中系列里是否包含了图例定义的名称。起始时如果没有图例会默认认为这个数据没ready,所以让图例置灰,当timeline做切换时图例是会保持状态的的,置灰的还是置灰(这是用于时间序列上分析是用的,想想应用场景就明白了)
0
SongPingp
SongPingp

@Kener-林峰  你好,我初次打开图表页面的时候,第一年的数据加载是没有问题的,我点击后几年的数据,我回头再来点击第一年数据,就出现第一年数据不对。

debug 看了下 options 内容 是没问题的,跟实例的添加是一样的。 给timeline添加点击事件的时候获取第一个options 值还是跟初次加载一样的。

0
SongPingp
SongPingp
这两个是不一样的吗?
0
Kener-林峰
Kener-林峰
顺序变了吧?看看timeline的notMerge参数
0
SongPingp
SongPingp
@Kener-林峰   你好,我没看到那个参数,我在页面也没加入这个参数值。我先加入这个参数,再调试下。。谢谢你。 
0
SongPingp
SongPingp
@Kener-林峰  你好,我的使用场景:legend 存放的是所有用到过行业,但是每年的行业不一定都存在,第一次加载出来的legend和数据是对的,点击某年,某年series data name没有是没第一年加载的legend里面的数值name,图表就不展示点击当前年legend为选中,而是灰色调,还要手动去点击下。有点不合理。不知道是不是哪个参数 缺失导致的? 
pake35110
pake35110
回复 @Kener-林峰 : 关机是不能直接解决,实时的感觉不好。 minAngle:当数据为0时,为什么不起作用。一定要重新加载chart?
Kener-林峰
Kener-林峰
回复 @椰子1987 : 恩,没理解怎么补0也没办法,真不是难事
SongPingp
SongPingp
回复 @Kener-林峰 :谢谢, 唉 。 legend 值 后面时间点 数组里有,但第一次的时间点没有显示,后面也不再显示。后面再点几次,就成光板。还得自己点legend值。 无结果,只能果断放弃。
Kener-林峰
Kener-林峰
回复 @椰子1987 : 抱歉,看不过来,有直接在官网例子上能跑的option就贴出来吧
SongPingp
SongPingp
回复 @Kener-林峰 : 这样补'0'效果应该能实现、 我贴下源码 你看看。
下一页
0
SongPingp
SongPingp
 

@Kener-林峰

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% 
 String h_common_path = request.getContextPath(); 


%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>企业排放量占比统计情况</title>
  <script src="<%=h_common_path%>/handsontable/lib/jquery.min.js"></script>
<!-- from baidu CDN -->
<script src="<%=h_common_path %>/echarts-js/esl.js"></script>
</head>


<body >
<div id="contentwrapper">
 <div class="main_content">
 <div id="main" style="width: 98%"></div> 
 </div>
</div>
</body>
<script type="text/javascript">
 var jsonObj = jQuery.parseJSON('[{"anneeYear":"1995","areaCode":"北京","discharge":2190.9,"entpCount":121,"id":1,"induCode":"制造业","note":""},{"anneeYear":"1995","areaCode":"北京","discharge":2101.8,"entpCount":25,"id":2,"induCode":"交通业","note":""},{"anneeYear":"1995","areaCode":"北京","discharge":1480.9,"entpCount":98,"id":3,"induCode":"火电业","note":""},{"anneeYear":"1995","areaCode":"北京","discharge":1200.9,"entpCount":245,"id":4,"induCode":"其他行业","note":""},{"anneeYear":"1996","areaCode":"北京","discharge":1100.9,"entpCount":269,"id":8,"induCode":"其他行业","note":""},{"anneeYear":"1996","areaCode":"北京","discharge":1280.9,"entpCount":110,"id":7,"induCode":"火电业","note":""},{"anneeYear":"1996","areaCode":"北京","discharge":2121.8,"entpCount":27,"id":6,"induCode":"交通业","note":""},{"anneeYear":"1996","areaCode":"北京","discharge":2290.9,"entpCount":134,"id":5,"induCode":"制造业","note":""},{"anneeYear":"1997","areaCode":"北京","discharge":2290.9,"entpCount":156,"id":9,"induCode":"制造业","note":""},{"anneeYear":"1997","areaCode":"北京","discharge":2121.8,"entpCount":28,"id":10,"induCode":"交通业","note":""},{"anneeYear":"1997","areaCode":"北京","discharge":1080.9,"entpCount":146,"id":11,"induCode":"火电业","note":""},{"anneeYear":"1998","areaCode":"北京","discharge":9,"entpCount":4,"id":99,"induCode":"家居行业","note":""},{"anneeYear":"1998","areaCode":"北京","discharge":1100.9,"entpCount":311,"id":16,"induCode":"其他行业","note":""},{"anneeYear":"1998","areaCode":"北京","discharge":1180.9,"entpCount":101,"id":15,"induCode":"火电业","note":""},{"anneeYear":"1998","areaCode":"北京","discharge":2121.8,"entpCount":31,"id":14,"induCode":"交通业","note":""},{"anneeYear":"1998","areaCode":"北京","discharge":2290.9,"entpCount":153,"id":13,"induCode":"制造业","note":""},{"anneeYear":"1999","areaCode":"北京","discharge":2090.9,"entpCount":149,"id":17,"induCode":"制造业","note":""},{"anneeYear":"1999","areaCode":"北京","discharge":2221.8,"entpCount":35,"id":18,"induCode":"交通业","note":""},{"anneeYear":"1999","areaCode":"北京","discharge":1380.9,"entpCount":128,"id":19,"induCode":"火电业","note":""},{"anneeYear":"1999","areaCode":"北京","discharge":1100.9,"entpCount":331,"id":20,"induCode":"其他行业","note":""},{"anneeYear":"2000","areaCode":"北京","discharge":9.2,"entpCount":7,"id":97,"induCode":"服务行业","note":""},{"anneeYear":"2000","areaCode":"北京","discharge":1298.1,"entpCount":411,"id":24,"induCode":"其他行业","note":""},{"anneeYear":"2000","areaCode":"北京","discharge":1269.9,"entpCount":151,"id":23,"induCode":"火电业","note":""},{"anneeYear":"2000","areaCode":"北京","discharge":2189.8,"entpCount":39,"id":22,"induCode":"交通业","note":""},{"anneeYear":"2000","areaCode":"北京","discharge":2289.9,"entpCount":161,"id":21,"induCode":"制造业","note":""},{"anneeYear":"2001","areaCode":"北京","discharge":10093,"entpCount":29,"id":100,"induCode":"测试行业","note":""}]');
 //这是所有行业类型,这里需要的是年份对应行业类型分类
 var induType = jQuery.parseJSON('["交通业","其他行业","制造业","家居行业","服务行业","测试行业","火电业"]');
 var firstYear="";
 var firstIndu="";
 //存放年份 对应行业分类
 var year_indu = "";
 var anneeYear = [];
 var indu = [];
 for(var i =0;i<jsonObj.length;i++){
 var year=jsonObj[i].anneeYear;
 var induCode = jsonObj[i].induCode;
 var entpCount = jsonObj[i].entpCount;
 if(firstYear!=year){
 firstYear=year;
 anneeYear.push(year);
 }
 }
 //console.log("统计年份:"+anneeYear);
 //console.log("年份行业分类:"+induArrayByYear[0]);
 
 function showAreaHY(showIndex,staticNum){
 $("#main").css("height","400px");
 }
    $(document).ready(function(){
    	//showAreaHY(1,4);
    	$("#main").css("height","400px");
    });
 	// 路径配置
    require.config({
        paths:{ 
            'echarts' : '<%=request.getContextPath()%>/echarts-js/echarts',
            'echarts/chart/bar' : '<%= request.getContextPath()%>/echarts-js/echarts',
            'echarts/chart/pie':'<%= request.getContextPath()%>/echarts-js/echarts',
        }
    });
  	//作为echarts接收调用函数返回值使用
 var myEcharts  ;
    // 使用
    var myOptions = {};
    var nowYear ;
    var myChart ;
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', 
            'echarts/chart/pie' //使用柱状图就加载bar模块,按需加载
        ],
        	drawEChart  //函数
        );
 //当loadingFlag 为0时候判断是否初次加载
 var loadingFlag = "${loadingFlag}";    
    //创建ECharts图表方法
 function drawEChart(ec) {
 myOptions = {
 timeline : {
 data : anneeYear,
 label : {
 formatter : function(s) {
 return s.slice(0, 7);
 }
 },
 notMerger:true
 },
 options : [ {
 title : {
 text : jsonObj[0].areaCode + '地区-行业占比变化'
 //subtext: '纯属虚构'
 },
 tooltip : {
 trigger : 'item',
 formatter : "{a} <br/>{b} : {c} ({d}%)"
 },
 legend : {
 data : induType
 },
 toolbox : {
 show : true,
 feature : {
 mark : {
 show : true
 },
 dataView : {
 show : true,
 readOnly : false
 },
 restore : {
 show : true
 },
 saveAsImage : {
 show : true
 }
 }
 },
 series : [ {
 name : jsonObj[0].areaCode + '地区-行业占比',
 type : 'pie',
 center : [ '50%', '45%' ],
 radius : '50%',
 data : [12]
 } ]
 } ]
 };
 // 基于准备好的dom,初始化echarts图表
 myChart = ec.init(document.getElementById('main'));


 // 为echarts对象加载数据 
 //绑定事件第一步操作
 var ecConfig = require('echarts/config');
 myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function(param) {
 //myOptions.options.push(getOption(param.data));
 //myOptions.options[0].series=[];
 //myOptions.options[0].series.push(setS(param.data));
 for(var i = 0 ; i<anneeYear.length;i++){
 if(param.data==anneeYear[i]&&i>0){
 console.log("绑定事件"+i+":"+myOptions.options[i]);
 }
 if(i==0&&param.data==anneeYear[i]){
 console.log("绑定事件"+i+":"+myOptions.options[0].series[0].data);
 }
 }
 });
 myOptions = setReptData(anneeYear,myOptions);
 myEcharts = myChart.setOption(myOptions);
 console.log("开头:");
 console.log(myOptions);
 console.log("结尾:");
 
 }
    
    function setReptData(anneeYear,myOptions){
    	for(var i = 0 ;i<anneeYear.length;i++){
    		if(i==0){
    			myOptions.options[0].series=[];
    			myOptions.options[0].series.push(setByFirstYear(anneeYear[i]));
    		}else{
    			myOptions.options.push(laterYearData(anneeYear[i]));
    		}
    	}
    	return myOptions;
    }
    function getLegendData(year){
    	var induType = [];
     	for ( var i = 0; i < jsonObj.length; i++) {
    		var getYear=jsonObj[i].anneeYear;
    		if(year==getYear){
    			var induCode = jsonObj[i].induCode;
    			induType.push(induCode); 
    		} 
    	}
     	return induType;
    }
    
    function returnData(year){
    	console.log("returnData:"+year);
    	var data = [];
    	for ( var i = 0; i < jsonObj.length; i++) {
    		var getYear=jsonObj[i].anneeYear;
    		if(year==getYear){
    		var induCode = jsonObj[i].induCode;
    		var entpCount = jsonObj[i].entpCount;
    			var inserObj = {value:entpCount,name:induCode};
    			data.push(inserObj);
    		}
 }
    	return data;
    }
    //加载第一年往后数据
    function laterYearData(year){
    	console.log("laterYearData:"+year);
    	var getData = returnData(year); 
    	console.log("getData:"+getData);
    	var newOption = {series : [ {
    		name : year+jsonObj[0].areaCode + '地区-行业占比',
    		type : 'pie',
    		center : [ '50%', '45%' ],
    		radius : '50%',
    		data : getData
    	} ]};
    	return newOption;
    }
    //加载第一年数据
    function setByFirstYear(year){
    	console.log("setByFirstYear:"+year);
    	var getData = returnData(year);
    	var newOption =  {
    		name : year+jsonObj[0].areaCode + '地区1行业占比',
    		type : 'pie',
    		center : [ '50%', '45%' ],
    		radius : '50%',
    		data : getData
    	} ;
    	return newOption;
    }
</script>
</html>


0
夢的世界llll
夢的世界llll

你这个问题我遇到过,myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function (param) {在事件里加载数据可以解决,

options.series[0].data = arrRS;
funcStatisticsChart.setOption(options,true);
重新设置options的值

返回顶部
顶部