echart 柱图的label只显示总数

参考了网上的例子,结合实际,记录

实现原理:

通过在series中最后插入一个对象,该对象中的data是总和的集合,如下图

echart 柱图的label只显示总数                      echart 柱图的label只显示总数

 

 红色部分是原始数据,绿色部分是插入的最后一条数据(柱图的颜色透明化,所以看不到),展示的数字其实是最后一个的label,展示在内部的最左部分,

这样的话,实际看起来就会显的页面占用率小,空白空间比较大, 所以进行了再次处理

最终效果图(如上 图2),整体效果比左边的效果好了很多

实现的代码

 

 后端返回的数据是

"result": {
            "series": [
                {
                    "name": "aa", 
                    "value": ["0", "0", "0", "0", 9, "0", "0", "0", "0", "0"]
                }, 
                {
                   "name": "bb", 
                    "value": ["0", "0", "0", "0", "0", "0", "0", "0", "0", 1]
                }, 
                {
                    "name": "cc", 
                    "value": ["0", "0", "0", 5, "0", "0", "0", "0", "0", "0"]
                }, 
                {
                    "name": "dd", 
                    "value": ["0", "0", "0", "0", "0", "0", 8, "0", "0", "0"]
                }, 
                {
                    "name": "ee", 
                    "value": ["0", "0", 6, "0", "0", "0", "0", "0", "0", "0"]
                }, 
                {
                    "name": "ff", 
                    "value": ["0", 4, "0", "0", "0", "0", "0", "0", "0", "0"]
                }, 
                {
                    "name": "gg", 
                    "value": [13, "0", "0", "0", "0", "0", "0", "0", "0", "0"]
                }, 
                {
                    "name": "hh", 
                    "value": ["0", "0", "0", "0", "0", 12, "0", "0", "0", "0"]
                }, 
                {
                    "name": "ii", 
                    "value": ["0", "0", "0", "0", "0", "0", "0", "0", 14, "0"]
                }, 
                {
                    "name": "jj", 
                    "value": ["0", "0", "0", "0", "0", "0", "0", 11, "0", "0"]
                }
            ], 
            "xaxis": [13, 4, 6, 5, 9, 12, 8, 11, 14, 1]
   } 

接下来,就是对数据的处理

1)首先要整理出每一行的总数(注意,这个总数,指的是每一个value里取相同索引的值的和,而不是value自身所有值的累加)

 var totaldata=[];
 let itemdataLen = series[0].data.length;
for(var i=0;i<itemdataLen;i++){
        totaldata[i]=0;
};
result.series.forEach((item,index)=>{
       item.value.forEach((im,ix)=>{
          totaldata[ix] += Number(im)
       });
});

2) 对  totaldata 中的值进行缩放 -  这样的话,在页面上的占用空间就会减少

totaldata.forEach((item,index)=>{
    totaldata[index] = item/10;
});

3)在series最后插入  -- 由于之前对数据进行了缩放,所以在展示tooptip中要对数据进行放大

var lastSeri={
     name:"总数",
     type: 'bar', 
     stack: '总量', 
     label: { 
           normal: { 
                show: true, 
                position: 'insideBottomLeft', 
                formatter:function(params){
                   return params.data*10;
                }, 
                 textStyle:{ color:'#000' } 
             }
      }, 
       itemStyle:{ 
           normal:{ 
              color:'rgba(128, 128, 128, 0)' 
           } 
       }, 
       data: totaldata
 };
  series.push(lastSeri);

 

  echart 柱图的label只显示总数    
上一篇:vue使用echart(地图,弹窗展示多条数据,option定义)


下一篇:echart 中实现折线拐点的显示和指定的样式设置