echarts为Echarts2,在自己页面上做没有效果,因此在其例子
http://echarts.baidu.com/echa…
的基础上改为下面的代码(横轴改为时间类型)
var stime='2016-01-01',
etime='2016-09-01',
time=new Date('2016-04-01');
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['邮件营销','联盟广告']
},
xAxis : [
{
type : 'time',
min:new Date(stime.replace(/-/g,"/")),
max:new Date(etime.replace(/-/g,"/")),
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[[time,120]]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[[time,220]]
}
]
};
效果图为:
发现也没有堆积,都是从零显示,而且纵轴也没有了,这是为什么?
可以把上述代码复制粘贴到例子链接页面的编辑框中,点“刷新”看效果。
看实例data应该是一个一维数组。
而且柱状图是一点对应一个数据,但你设置的是有最大最小值的连续横坐标。
我是提问者,折腾一番,用另外的办法解决了这个问题:不要把横轴type设置为time,依然是category。对横轴的data属性值进行动态添加,同样,series中的data值也只是一个一维数组。
不是好方法,但也算能用了。
注:在echarts3中,time类型的柱图是可以堆叠的。