echart重叠图表

今天接到一个任务，显示重叠图表，一开始在echart官网中找到具体列子，但是在本地测试时，发现样式完全不一样，猜测原因是版本的不同，后续又在网上查找原因，发现是一个属性的设置原因。

先展示echart2实例与本地数据的差别：

对于相同的option设置：

echart2实例：

本地图表显示：

发现不同地方位置：首先是颜色不同，第二是实例中有重叠，本地没有重叠；第三实例中柱状图上有显示数据，本地没有。

后来找到具体原因：缺少stack属性。stack属性是叠加，不是覆盖。

扫描二维码关注公众号，回复： 4825094 查看本文章

后来添加上stack属性的图表：

代码：

<label id='bar' style="height: 700px;right:50px;width:1600px;"></label>
<script type="text/javascript">
 	var myBar = echarts.init(document.getElementById('bar'));
	 option = {
		    title : {
		        text: 'xxx数据',
		        subtext: '（12月之内）',
		        left:150
		    },
		    tooltip : {
		        trigger: 'axis'
		    },

                    //重新修改legend默认颜色

                    //按照legend  data的顺序排列，设置自定义颜色

                    color:['#FF8800','#FFDDAA','#00FFFF','#99FFFF'],
		    legend: {
		        data:[]
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    grid: {y: 70, y2:30, x2:20},
		    xAxis : [
		        {
		            type : 'category',
		            data : []
		        },
		        {
		            type : 'category',
		            axisLine: {show:false},
		            axisTick: {show:false},
		            axisLabel: {show:false},
		            splitArea: {show:false},
		            splitLine: {show:false},
		            data : []
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            axisLabel:{formatter:'{value}'}
		        }
		    ],
		    series : []
		}; 
                  
	myBar.setOption(option); 
	 var ajaxBar = function() {
		$.ajax({
			url : Global.ctx +'/xxx',
			success : function(responseText) {
				 console.log(responseText);
				 //请求成功时处理
				option.legend.data = responseText.datum.legend;
				option.xAxis[0].data = responseText.datum.xAxis;
				option.xAxis[1].data = responseText.datum.xAxis;
				var serieslist = responseText.datum.series;
				for (var i = 0; i < serieslist.length; i++) {
					option.series[i] = serieslist[i];
				}
				myBar.setOption(option, true);
			}, 
			 complete : function() {
				//请求完成的处理
			}, 
			 error : function() {
				//请求出错处理
				alert("加载失败");
			}
		}) 
	 } 
	
	 window.setTimeout(ajaxBar, 100); 
		                    
	</script>

ajax返回数据格式：

猜你喜欢