echart重叠图表
程序员文章站
2022-04-24 09:43:30
...
今天接到一个任务,显示重叠图表,一开始在echart官网中找到具体列子,但是在本地测试时,发现样式完全不一样,猜测原因是版本的不同,后续又在网上查找原因,发现是一个属性的设置原因。
先展示echart2实例与本地数据的差别:
对于相同的option设置:
echart2实例:
本地图表显示:
发现不同地方位置:首先是颜色不同,第二是实例中有重叠,本地没有重叠;第三实例中柱状图上有显示数据,本地没有。
后来找到具体原因:缺少stack属性。stack属性是叠加,不是覆盖。
后来添加上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返回数据格式: