Echarts饼状legend如何自动显示值和百分比

2023-10-27

效果图如下, 重点在legend里如何设置   显示值和百分比

 

 

                <div class="div_block">
                    <strong class="block_box_title">硬盘使用情况(总容量:{{total}})</strong>
                    <div id="pie1"></div>
                </div>
<style scoped lang="less">
     #line1, #line2, #pie1{
        height: 100%;
    }

重点在legend里如何设置   显示值和百分比

        getpiedata3(){
            this.$ajax.get('/systems/whitelist/info/',{
                params: {}
            })
            .then((data) => {
                var dt = data.data;  
                if(dt.success){
                    this.total = dt.data.total
                    this.getpie_database('pie1', dt.data);
                }else{
                    this.$message({
                        message:dt.error,
                        type: 'error'
                    });
                }  
            })
            .catch((error) => {
                console.log(error);
            })
        },

 //饼图 获取接口
         getpie_database(id, data){ 
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById(id)); 
            // 绘制图表
            let myData = [
                        {value: data.free, name: '可用空间'},
                        {value: data.used, name: '已用空间'}
                    ]
            myChart.setOption({ 
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // left: 'right',
                    x:'50%',//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
                    y: 'center',//垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
                    icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形,triangle 三角形,diamond 四边形,arrow 变异三角形,none 无
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 10, // 设置高度
                    itemGap: 35 ,// 设置间距,
                    formatter: function (name) {
                        // console.log(data, 'data')
                        let total = 0
                        let tarValue
                        for (let i = 0; i < myData.length; i++) {
                            total += myData[i].value
                            if (myData[i].name == name) {
                            tarValue = myData[i].value
                            }
                        }
                        let v = tarValue + 'G'
                        //计算出百分比
                        let p = Math.round((tarValue / total) * 100) + '%'  
                        return `${name}  ${p}   ${v}`
                        //name是名称,v是数值
                    }
                    // textStyle: {  // 图例文字的样式
                    //     color: '#fff',
                    //     fontSize: 16,
                    // }
                },
                color:this.color,
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '70%',
                    center:['20%','50%'],
                    label: {//去除饼图的指示折线label
                        normal: {
                        show: false,
                        position: 'inside',
                        formatter:"{b}:{d}%"
                        },
                    },
                    data: myData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            });
        },

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts饼状legend如何自动显示值和百分比 的相关文章

  • js作用域

    一 js没有块级作用域 在c java等语言中花括号里的代码都有自己的作用域 而js花括号没有块级作用域 经常会导致一些困惑 不明所以 例如 console info color if true var color blue console
  • 数据源——信用评分的前世今生【附FICO分介绍】

    信用评分这把 看不见的标尺 如今已经逐渐渗透到我们生活的方方面面 大到贷款买房买车 小到租用一个共享充电宝 都受到它的影响 那么问题来了 这个重要的数字是从哪里冒出来的呢 这就要从信用评分的起源讲起 什么是信用评分 信用评分 Credit
  • Oracle 11g+PLSQL Developer安装及环境配置

    1 安装包 OracleXE112 Win64 zip 数据库服务管理平台 plsql 11 0 4 安装包 语言包 注册机 rar 第三方客户端 链接 https pan baidu com s 1AKTrd6Qu9 qk59N G6AV

随机推荐

  • cookie,token,ajax异步请求,知识点

    当get 或post 访问接口时 如果需要传入cookie 可以直接传入jar格式的cookie 也可以传入字典格式cookie cookie cookie是存储与访问者计算机的变量 由浏览器负责存储在电脑本地 一般加密存储 但是由于存储在
  • 软件审查工具

    代码审查工具 https baijiahao baidu com s id 1693720741656939513 wfr spider for pc Eclipse Code Review 代码审查 工具介绍 https www itey
  • 快速成长的秘诀|自我成长的方法有哪些?

    快速成长总共三篇 分别是 完成自我升级 自我成长的方法 学会自我培养或培养他人 在成长第一篇 完成自我升级 发布后 有很多同学做了仔细阅读 而且其中一位同学给了我非常好的反馈补充 他的原话 我看完了 给我一个最大的感受是 您把一整套认知思维
  • Vue动画的使用

    动画的作用 提高用户的体验 帮助用户更好的理解页面中的功能 使用过渡类名实现动画 动画进入 v enter 动画进入之前的初始状态 v enter to 动画进入之后的结束状态 v enter active 动画进入的时间段 PS 第一 第
  • KVM实战入门之Libvirt

    环境说明 本实验在VMware的centos6 7 x64进行的 1 VMware配置 如果不能勾上则不能继续进行 解决办法 重新创建VMware虚拟机 到这一步 自定义 能勾上了 创建虚拟机后即可下一步 2 查看Linux环境 查看是否支
  • HC32L110国产超低功耗华大MCU芯片介绍

    华大HC32L110 系列32 位 ARM Cortex M0 微控制器 HC32L110 系列是一款旨在延长便携式测量系统的电池使用寿命的超低功耗 Low Pin Count 宽电压工作范围的 MCU 集成 12 位 1M sps 高精度
  • VirtualBox+Windbg 进行双机调试的方法

    以前见他们调试驱动程序之类的都是使用的VMWare 我没怎么用这软件 感觉这软件有点臃肿 后台服务挂得太多了 感觉不爽 于是就没搞它 加上电脑上很早就装有Oracle的Virtual Box 于是就看了下 其实Virtual Box也有支持
  • 使用msf监听模块接收反弹shell

    Metasploit Framework MSF 提供了多种方式来监听反弹 shell 使用 multi handler 模块 这是 MSF 中最常用的模块之一 用于监听反弹 shell 它支持多个协议和 payload 可以根据需要进行配
  • SQL基础笔记

    Codecademy中Learn SQL SQL Table Transformaton和SQL Analyzing Business Metrics三门课程的笔记 以及补充的附加笔记 Codecademy的课程以SQLite编写 笔记中改
  • nginx反向代理后获取真实请求ip

    本来接口运行的好好的 后面为了规范接口 我在nginx加了如下代码 location v1 api proxy pass https xxx xxx xxx 8081 v1 api 后面重新部署后发现通过HttpServletRequest
  • python下载安装使用_下载、安装与使用 pysot

    本篇文章简要介绍了如何在windows环境下 使用anaconda进行pysot运行环境的部署以及使用 pysot是商汤科技推出的一个针对单目标跟踪 Single Object Tracking 的 研究平台 里面包含了他们团队的一些算法实
  • 23种设计模式之策略模式

    文章目录 概览 策略模式的优缺点 策略模式的应用场景 策略模式的结构与实现 模式的结构 模式的实现 策略模式的扩展 总结 概览 策略模式定义了一系列算法 并将每个算法封装起来 使他们可以相互替换 且算法的变化不会影响到使用算法的客户 需要设
  • Python从入门到放弃(三):基本语句和语法

    一 一些改变 1 Python增加了什么 相比起C 或者其他一些语言 Python增加了一个冒号 所有的python复合语句 都是首行由冒号来提醒 这个一定不能够掉了 且接下来是以缩进的形式来书写 C 或者一些语言是大括号括起来的 后面会看
  • 【算法与数据结构】98、LeetCode验证二叉搜索树

    文章目录 一 题目 二 解法 三 完整代码 所有的LeetCode题解索引 可以看这篇文章 算法和数据结构 LeetCode题解 一 题目 二 解法 思路分析 注意不要落入下面你的陷阱 笔者本来想左节点键值 lt 中间节点键值 lt 右节点
  • 传感器i2c与arduino连接_Arduino中进行I2C通信发送数据案例分析

    在之前的文章中 我们介绍了Arduino之间的SPI通信 今天我们将学习另一种串行通信协议 I2C 内部集成电路 比较I2C和SPI I2C只有两条线 而SPI使用四条 I2C可以有多个主机和从机 而SPI只能有一个主机和多个从机 因此 如
  • docker容器连接宿主机redis和mysql

    当我们在用docker部署项目的时候可能会遇到这样一个问题 项目A和项目B都用到了redis和mysql 如果在docker compose里link或者dependon一个redis和mysql的话 会发现每一个项目都有一个redis和m
  • static作用:静态变量的生存周期和作用域

    首先要理解生存周期与作用域的区别 生存周期 变量从定义到销毁的时间范围 存放在全局数据区的变量的生存周期存在于整个程序运行期间 而存放在栈中的数据则随着函数等的作用域结束导致出栈而销毁 除了静态变量之外的局部变量都存放于栈中 作用域 变量的
  • 多路开关模式的switch语句

    在实例10中 将break语句去掉之后 会将符合检验条件后的所有语句都输出 利用这个特点 可以设计多路开关模式的switch语句 例如 在平年一年12个月 1 3 5 7 8 10 12月是31天 4 6 9 11月是30天 2月是28天
  • 第1144期AI100_机器学习日报(2017-11-05)

    AI100 机器学习日报 2017 11 05 聊天机器人Chatbot知识资料全集 入门 进阶 论文 软件 数据 专家等 wx 专知内容组 推荐中的序列化建模 Session based neural recommendation wx
  • Echarts饼状legend如何自动显示值和百分比

    效果图如下 重点在legend里如何设置 显示值和百分比 div class div block strong class block box title 硬盘使用情况 总容量 total strong div div div