echarts legend的遍历，从右到左

最新推荐文章于 2024-08-12 11:30:24 发布

???xixi

最新推荐文章于 2024-08-12 11:30:24 发布

阅读量815

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/xixi_csdn/article/details/118309696

版权

本文介绍如何使用ECharts自定义饼图的legend显示方式，实现从右向左展示的功能，并通过具体代码示例展示了如何计算并显示数据的百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
代码

前言

正常的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
              }
            });