echarts legend的遍历,从右到左

文章目录


前言

正常的legend的展示是从左到右的,鉴于需求的要求,需要从右往左展示。图片显示的数量,但是下面的代码中显示的百分比。
在这里插入图片描述

代码


function arrCount(arr) {
            let count = 0
            arr.forEach(item => {
              count = count + item.value
            })
            return count
          }

let typeChartMoney = self.$echarts.init(document.getElementById('typeChartMoney'));
            typeChartMoney.setOption({
              title: {
                show: false
              },
              legend: function () {
                let serie = [];
                // 这是每列五个来计算的,大于5才需要分列
                if (collectHTLXMoney.length > 5) {
                  collectHTLXMoney.map((item, index) => {
                    let dataList;
                    let flag = false;
                    let r = 20 * parseInt(index / 5)
                    if ((index + 1) % 5 == 0) {
                      flag = true;
                      dataList = collectHTLXMoney.slice((index - 5 + 1), (index + 1))

                    } else if ((index + 1) == collectHTLXMoney.length) {
                      flag = true;
                      dataList = collectHTLXMoney.slice(parseInt(collectHTLXMoney.length / 5) * 5)

                    }
                    let obj = {
                      orient: 'vertical',
                      right: r + '%',
                      align: 'left',
                      icon: 'circle',
                      itemGap: 10,
                      itemHeight: 12,
                      textStyle: {
                        color: '#76B7E9',
                        fontSize: 16,
                        lineHeight: 20,

                      },
                      formatter(name) {
                      // 显示名字和百分比
                      
// let total = arrCount(collectDeptNum)
                // const val = collectDeptNum.filter(item => {
                //   return item.name === name
                // })
                // return name + '\n' + ((val[0].value / total).toFixed(1)) * 100 + '%'
                        const val = collectHTLXMoney.filter(item => {
                          return item.name === name
                        })
                        return name + '\n' + val[0].value
                      },
                      data: dataList
                    }

                    if (flag) {
                      serie.push(obj);
                    } 

                  });
                }
                return serie;
              }(),
              tooltip: {
                trigger: 'item',
                formatter: '{b} <br/>{c} ({d}%)'
              },
              color: self.colors,
              series: {
                type: 'pie',
                right: '45%',
                label: {
                  formatter: '{b}\n{d}%',
                  fontSize: 18,
                },
                data: collectHTLXMoney
              }
            });
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值