echart legend显示数值并设置滚动

爱吃烧鸭蛋的叶安

已于 2022-07-01 10:29:16 修改

阅读量5.9k

点赞数

分类专栏： echarts 文章标签： javascript 大数据开发语言

于 2022-07-01 10:17:19 首次发布

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/125553655

版权

echarts 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、显示数值

在这里插入图片描述

legend: {//无legend属性可隐藏色块文字提示
            orient: 'vertical',
            right: '20px',
            textStyle:{
              color: themeColor || '#333'
            },
            formatter: (name) => {
              let total = 0;
              let tarValue;
              for (let i = 0; i < seriesData.length; i++) {
                total += seriesData[i].value;
                if (seriesData[i].name == name) {
                  tarValue = seriesData[i].value;
                }
              }
              return `${name}  ${tarValue}个`;
          },
        },

其中 seriesData 为图表数据，本案例中的格式为 seriesData:[{name:'',value:''},{name:'',value:''}{name:'',value:''}],
百分比根据实际情况算出即可

二、设置滚动

原图
在这里插入图片描述
滚动效果图：

只需要加上type为scroll即可

legend: {//无legend属性可隐藏色块文字提示
          type: 'scroll',
            orient: 'vertical',
            right: '0px',
            textStyle:{
              color: themeColor || '#333'
            },
            formatter: (name) => {
              let total = 0;
              let tarValue;
              for (let i = 0; i < seriesData.length; i++) {
                total += seriesData[i].value;
                if (seriesData[i].name == name) {
                  tarValue = seriesData[i].value;
                }
              }
              return `${name}  ${tarValue}个`;
          },
        },