首页 > 其他分享 >echarts 饼图在中间显示百分比

echarts 饼图在中间显示百分比

时间:2024-11-14 17:45:12浏览次数:1  
标签:百分比 false center value 中间 echarts seriesData

echarts饼图在中间显示百分比,使用graphic

setEchartOption(val) {
    const seriesData = [
        { value: 1048, name: '完成值' },
        { value: 735, name: '目标值' }
    ]
    const option = {
        grid: {
            containLabel: true
        },
        tooltip: {
            trigger: 'item'
        },
        color: ['#74A0FA', '#73DEB3'],
        series: [
            {
                type: 'pie',
                radius: ['50%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: seriesData
            }
        ],
        // 绘制中间的百分比
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: Math.round((seriesData[0].value / seriesData[1].value) * 100) + '%',
                textAlign: 'center',
                fill: '#666666',
                fontSize: 20
            }
        }
    }
    this[`chart${val}`].setOption(option)
}

 

标签:百分比,false,center,value,中间,echarts,seriesData
From: https://www.cnblogs.com/hong1/p/18546487

相关文章

  • echarts自定义tooltip
    tooltip配置tooltip:{show:true,trigger:'axis',formatter:params=>{letresult=`<div>${params[0].axisValue}</div>`params.forEach(item=>{if(......
  • RabbitMQ 全面解析:语法与其他消息中间件的对比分析
    1.引言在分布式系统和微服务架构中,消息中间件扮演着重要的角色。它们能够解耦服务、平衡负载、提高系统的可扩展性和可靠性。RabbitMQ是其中广受欢迎的一种。本文将从RabbitMQ的基础概念、语法介绍、以及与其他消息中间件的对比角度,全面剖析其在实际项目中的应用及优劣......
  • 数据库系列: 主流分库分表中间件介绍(图文总结)
    数据库系列:主流分库分表中间件介绍(图文总结) 相关文章数据库系列:MySQL慢查询分析和性能优化数据库系列:MySQL索引优化总结(综合版)数据库系列:高并发下的数据字段变更数据库系列:覆盖索引和规避回表数据库系列:数据库高可用及无损扩容数据库系列:使用高区分度索引列提升性能数据......
  • 中间件全球数据实时同步利器,EventGrid事件流重磅发布
    EventGrid事件流(简称EG)作为易用、稳定、高效的数据同步管道连接不同的系统与服务,支持中间件在线同步和实时同步。事件流围绕云中间件,降低了中间件之间数据流通的复杂性,有效地帮助您减少数据传输的成本。适用于上云、跨云数据搬迁和跨云、跨地域备份容灾等场景,为企业上云和容灾业务......
  • Java常用方法:StringUtils.isNotBlank()、StringUtils.isEmpty()、去除空格的函数、手
    Java常用方法:StringUtils.isNotBlank()、StringUtils.isEmpty()、去除空格的函数、手机号中间4位换成*、判断字符是否为数字要使用工具类StringUtils,首先得导入依赖<dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><ve......
  • OJ08题:876. 链表的中间结点
    目录题目思路分析代码展示题目给你单链表的头结点head,请你找出并返回链表的中间结点。注:如果有两个中间结点,则返回第二个中间结点。示例1:输入:head=[1,2,3,4,5]输出:[3,4,5]解释:链表只有一个中间结点,值为3。示例2:输入:head=[1,2,3,4,5,6]输出:[4,5......
  • ECharts饼图-饼图9,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个饼图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览 二、视......
  • Django电影推荐系统 豆瓣电影 协同过滤推荐算法 Echarts可视化 爬虫 机器学习 大数据
    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久,选择我们就是选择放心、选择安心毕业✌>......
  • 从消息中间件架构发展趋势,探讨物联网平台如何支持亿级设备推送?
    本文分享自《华为云DTSE》第五期开源专刊,作者:贺张俭华为云IoT技术专家随着物联网平台业务的快速增长,基于传统消息中间件构筑面临着处理亿级设备连接和海量数据的挑战。本文分析了消息中间件的架构发展趋势以及核心优势,还探讨了ApachePulsar在华为云IoT平台上的实践应用,展示了华......
  • 一篇帮你搞懂ECharts图表构建
    目录一、引入 主要功能和应用场景:完全版本:二、一个实例 1.大框架2.设置大标题3.设置提示标签4.设置每个柱形数据的背景颜色5.设置柱形数据背景边框6.设置图例小角标7.拖拽手柄8.设置X轴9.设置Y轴10.设置数据11.设置边框完整版本:一、引入 ‌ECharts‌是......