echart 堆叠柱状图而不重叠,总数不会叠加,显示百分比

Echarts实现堆叠柱状图无重叠与百分比显示
本文介绍了如何在Echarts中创建堆叠柱状图,确保柱状不重叠,并展示每个柱子的百分比比例,同时强调了配置过程中需避免与stack属性冲突。
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript">
        var dataX = ['大类案件', '小类案件','自行处置案件 '];
        var dataY = [100,100,50];
        var dataY2 = [50,48,10]
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        option = {
              xAxis: {
                  type: 'category',
                  data: dataY,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
              },
              yAxis: {
                  type: 'value',
                    splitLine:{
                        show: true,
                        color: '#ccc'
                    },//去除网格线
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
              },
              series : [
                  {
                      type:'bar',
                      data:dataY,
                      barGap: '-100%',//添加此配置项即为重叠效果
                        itemStyle: {
                          normal: {
                            color:'#f5e181',
                            label : {
                              show: true,
                              position: 'top',
                              formatter: function (params) {
                                     return params.value ;
                                  },
                              textStyle: {
                                color: '#000', 
                                fontSize:'18'
                              }
                            }
                          }
                        }
                  },
                  {
                      type:'bar',
                      data:dataY2,
                       itemStyle: {
                          normal: {
                            color:'#fdcf0e',
                            label : {
                              show: true,
                              position: 'insideTop',
                              formatter: function (params,index) {
                                 return params.value == 0 ? '0%' : Math.round(params.value/dataY2[params.dataIndex]*1000)/10 + '%';
                              },
                              textStyle: {
                                color: '#000', 
                                fontSize:'18'
                              }
                            }
                          }
                        }
                  },
                  
              ]
          };
          myChart.setOption(option, true);
       </script>
   </body>
</html>

注意点:不能跟stack属性一起用

<think>嗯,用户之前已经问过如何用ECharts做带有总数背景的横向柱状图,并且标签要显示总数的右边。现在他们又提到参考了一些站内引用,可能需要更具体的实现方法或者解决相关问题。首先,我需要回顾之前的回答,确保这次提供的信息没有重复,同时结合用户的新需求和引用内容进行调整。 用户引用了四篇资料,其中提到了柱状图的实现步骤、React中的使用、横向展示以及滚动和点击处理。过用户当前的问题主要集中在总数背景和标签位置,所以可能需要关注如何正确配置series和标签显示。特别是引用[1]中的柱状图实现步骤和引用[3]中的横向展示可能相关。 在之前的回答中,已经给出了数据结构和基础配置,但用户现在可能遇到了标签位置的问题。需要确认标签是否显示在总背景条的右侧,而仅仅是实际值条的右侧。这可能涉及到两个系列的标签配置,或者需要调整布局。例如,在背景条中显示总数标签,而实际值条显示当前值标签,或者将两个标签都放在右侧,但位置同。 另外,引用[4]提到横向柱状图的滚动和点击处理,但用户当前的问题涉及这些,可以暂时忽略。需要确保标签的位置正确,可能需要使用formatter函数或调整label的position属性。例如,将背景条的标签放在右侧,实际值的标签也放在右侧,但通过同的偏移量或颜色区分。 可能还需要检查是否在series中正确配置了两个bar系列,背景条在前,实际条在后,并且使用barGap: '-100%'让它们重叠。同时,标签的位置需要设置为'right',并且可能需要调整distance或其他属性来避免重叠。 用户的需求可能还包括动态数据更新或样式调整,但根据当前问题,重点在标签位置。需要确保在series的每个系列中正确设置label属性,特别是背景条的标签可能需要显示总数,而实际条显示当前值,并且都在右侧。例如,在背景条的series中设置label.show为true,position为'right',而实际条的标签同样在右侧,但可能需要同的颜色或偏移量来区分。 最后,需要验证提供的代码示例是否正确实现了这些配置,并确保引用的资料与解决方案相关,如引用[1]中的实现步骤和引用[3]中的横向展示配置。同时,检查是否有其他潜在问题,如轴标签旋转或网格配置,确保图表显示完整。</think>### 分步实现方案 #### 一、核心配置原理 **通过`双系列叠加`实现背景条与数据条的分离显示,利用`label.position`控制标签位置**。数学表达可描述为: $$显示宽度 = \frac{当前值}{总量} \times 背景条宽度$$ [^1] #### 二、关键配置代码 ```javascript option = { yAxis: { type: 'category', data: ['A', 'B', 'C'], inverse: true, // 确保标签显示在右侧时方向正确[^3] axisLabel: { margin: 20 } // 标签间距调整 }, xAxis: { show: false }, // 隐藏数值轴 grid: { right: '30%' }, // 为标签预留空间 series: [ { // 背景条系列 type: 'bar', barWidth: 20, silent: true, itemStyle: { color: '#f5f5f5' }, label: { show: true, position: 'right', // 关键配置 formatter: '{@total}', // 显示总量 color: '#666', offset: [10,0] // 右侧偏移量 }, data: [ { value: 100, total: 100 }, { value: 150, total: 150 }, { value: 200, total: 200 } ], barGap: '-100%' }, { // 实际值系列 type: 'bar', barWidth: 20, itemStyle: { color: '#37A2DA' }, label: { show: true, position: 'right', formatter: '{c} ({d}%)', // 显示值和百分比 color: '#333', offset: [120,0] // 与背景标签错位显示 }, data: [75, 120, 160] } ] }; ``` #### 三、实现效果说明 1. **双标签体系**:灰色背景标签显示总量(右侧),蓝色数据标签显示实际值+百分比(更靠右) 2. **视觉对比**:通过颜色透明度建立数据层级关系,背景条透明度设置为0.2 3. **交互优化**:使用`silent:true`避免背景条触发提示框[^1] #### 四、高级优化技巧 1. **动态标签定位**:当数据条长度超过背景条50%时自动切换标签位置 ```javascript label: { position: function(params) { return params.value > params.data.total*0.5 ? 'insideRight' : 'right'; } } ``` 2. **响应式布局**:通过`resize`事件自动调整`grid.right`比例 ```javascript window.addEventListener('resize', () => { myChart.setOption({ grid: { right: window.innerWidth < 768 ? '40%' : '30%' } }); }); ``` ### 相关问题 1. 如何实现ECharts柱状图的双轴标签同步显示? 2. 怎样处理超长文本在柱状图标签中的自动换行? 3. ECharts如何实现动态更新的背景条效果? [^1]: Apache ECharts柱状图官方文档 [^2]: ECharts在React中的集成方法 [^3]: 横向柱状图布局优化实践
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值