欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echart重叠图表

程序员文章站 2022-04-24 09:43:30
...

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

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

对于相同的option设置:

echart2实例:

echart重叠图表


本地图表显示:

echart重叠图表

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


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

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

echart重叠图表

代码:

<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返回数据格式:

echart重叠图表