echarts柱状图重叠而不是相互增加--------------------------------------gxy

喜欢ヅ旅行 2022-05-26 01:49 490阅读 0赞

echarts柱状图做成重叠的效果：  
如图：  
![这里写图片描述][70]

如果简单加个，stack: ‘product’属性的话是上下叠加的，这并不能符合效果，这种事可以在某种场景使用的。

代码如下：

option = {
        xAxis: {
            data: ['a', 'b', 'c', 'd'],
            axisTick: {show: false},
            axisLabel: {
                formatter: 'barGap: \'-100%\''
            }
        },
        yAxis: {
            splitLine: {show: false}
        },
        animationDurationUpdate: 1200,
        series: [{
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#ddd'
                }
            },
            silent: true,
            barWidth: 40,
            barGap: '-100%', // Make series be overlap
            data: [60, 60, 60, 60]
        }, {
            type: 'bar',
            barWidth: 40,
            z: 10,
            data: [45, 60, 13, 25]
        }]
    };
    
    
    //动态切换
    var barGaps = ['30%', '-100%'];
    var loopIndex = 0;
    
    setInterval(function () { 
        var barGap = barGaps[loopIndex];
    
        myChart.setOption({
            xAxis: {
                axisLabel: {
                    formatter: 'barGap: \'' + barGap + '\''
                }
            },
            series: [{
                barGap: barGap
            }]
        });
        loopIndex = (loopIndex + 1) % barGaps.length;
    
    }, 2000);

[70]: /images/20220526/f1105dc7f93d497f9175225e57a5e2ef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，490人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 柱状图多柱情况下堆叠和重叠

.echarts代码原文http://echarts.baidu.com/examples/editor.html?c=mix-line-bar 在此不进行复制 2.堆...

傷城~/ 2024年04月18日 22:15/ 0 赞/ 90 阅读

相关 Highcharts 实现重叠柱状图

1 使用详解 plotOptions.column.grouping 说明：true代表对柱体进行分组并单独显示，false代表不分组则重叠在一起，默认为true。

￡神魔★判官ぃ/ 2023年10月05日 12:17/ 0 赞/ 38 阅读

相关 ECharts 实现重叠柱状图

1 使用详解（1）series.z 说明：折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先

女爷i/ 2023年10月05日 11:32/ 0 赞/ 74 阅读

相关 ECharts 实现3D重叠椭圆柱状图

1 实现代码（3D重叠椭圆柱状图） <body>  <div i

亦凉/ 2023年10月05日 11:29/ 0 赞/ 49 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 315 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 658 阅读

相关 echarts柱状图多柱重叠和多柱堆叠

效果：如图：标1的地方重叠了2个数据，3也是2个。2只有单独一个。 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_

落日映苍穹つ/ 2022年09月11日 07:29/ 0 赞/ 417 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 382 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 340 阅读

相关 echarts柱状图重叠而不是相互增加--------------------------------------gxy

echarts柱状图做成重叠的效果：如图： ![这里写图片描述][70] 如果简单加个，stack: ‘product’属性的话是上下叠加的，这并不能符合效果，这种

喜欢ヅ旅行/ 2022年05月26日 01:49/ 0 赞/ 491 阅读