环形占比图

Echarts 效果图

image.png

Echarts 绘制环形占比图

闲话不多说,直接到观众老爷们最喜欢的上代码环节

js代码

环形概率图:
    data = [
    ['已拣配', 0.6]
    ]
    t1 = (data[0][1] * 100).toFixed(0)
    var option = {
        color: ['#78d5e5', '#01377d'],
        title: {
            text: data[0][0]
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],//环形图内外半径
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold'
                    },
                    formatter: '{c}%'
                }
            },
            data: [{
                    value: t1,
                    name: "",
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                {
                    value: (1 - data[0][1]) * 100,
                    name: ''// 中心文字
                }
            ],
            clockwise: false
            // 是否逆时针
        }]
    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Echarts 效果图 Echarts 绘制雷达图 闲话不多说,直接到观众老爷们最喜欢的上代码环节 js代码
    鬼古神月阅读 2,790评论 0 0
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,514评论 2 59
  • 1、Pyecharts简介 Echarts是一个由百度开源的数据可视化工具,凭借着良好的交互性,精巧的图表设计,得...
    扫盲狗阅读 12,986评论 6 21
  • 最近在做一个移动端的小项目,然后里面用到了echarts,由于之前从未在移动端用过,所以花了很多时间来处理这个图表...
    记录生活记录bug阅读 10,487评论 2 1
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,749评论 28 53

友情链接更多精彩内容