echarts 重叠而不堆叠

on绑定响应事件

//点击事件
daysChart.on('click', function (param) {
    loadOneDay(param.name);
});
柱状图堆叠不适用时,可使用以下代码仿作层叠,但数据大的仍会覆盖数据小的
//鼠标划过
'mouseout''mouseover'
//柱状图重叠
myChart.on('mouseover', function(param){
	myChart.setOption({
        series: [{
            barGap: '-100%'
        }]
    });
})
//柱状图不重叠
myChart.on('mouseout', function(param){
	myChart.setOption({
        series: [{
            barGap: '30%'
        }]
    });
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts中,可以通过设置堆叠(stack)属性来实现柱状图堆叠效果,即数据不会叠加。如果不设置堆叠属性,则默认为重叠效果,即数据会叠加在一起。 举个例子,假设有以下数据: data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] 如果要实现堆叠效果,可以使用如下代码: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', stack: '堆叠' }, { data: [130, 202, 180, 80, 90, 200, 130], type: 'bar', stack: '堆叠' } ] }; 这段代码中的series数组中包含了两个柱状图,分别对应两组数据。在每个柱状图的配置中,通过设置stack属性为相同的值,即可实现堆叠效果。 如果要实现重叠效果,可以使用如下代码: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }, { data: [130, 202, 180, 80, 90, 200, 130], type: 'bar', barGap: '-100%', z: '-1' } ] }; 在第二个柱状图的配置中,通过设置barGap属性为'-100%',使第二个柱子与第一个柱子重叠在一起。同时,通过设置z属性为'-1',将第二个柱子的层级调至底层,以保证第一个柱子的可见性。 综上所述,通过设置堆叠属性可以实现柱状图堆叠效果,而不设置堆叠属性则默认为重叠效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值