首页 > 其他分享 >echarts饼图,完整圆形,百分比显示

echarts饼图,完整圆形,百分比显示

时间:2022-08-23 15:14:29浏览次数:76  
标签:百分比 name series oa 圆形 value var data echarts

option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color:['#8fc31f','#f35833','#00ccff','#ffcc00'],
        legend: {
            orient: 'vertical',
            x: 'right',
            data: ['准时','迟到','请假','未到'],
            formatter:function(name){
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
                for(var i = 0; i < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                        return name + '     ' + oa[i].value + '     ' + (oa[i].value/num * 100).toFixed(2) + '%';
                    }
                }
            }
        },
        series : [
            {
                name: '签到比例分析',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data:[
                    {value:335, name:'准时'},
                    {value:310, name:'迟到'},
                    {value:234, name:'请假'},
                    {value:135, name:'未到'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        label:{ 
                            show: true, 
//                                position:'inside',
                            formatter: '{b} : {c} ({d}%)' 
                        }
                    },
                    labelLine :{show:true}
                }
            }
        ]
    };

 

标签:百分比,name,series,oa,圆形,value,var,data,echarts
From: https://www.cnblogs.com/facenano/p/16616214.html

相关文章

  • echarts环形饼图,完整圆形,百分比分值
    varscale=1;varechartData=[{value:21,name:'市场签约1'},{value:38,name:'市场签约2'},{value:35,name:'市场签约3'},......
  • echarts 数据的各种格式
    数据集数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据,但是从ECharts4支持数据集开始,更推荐使用数据集来管理数据。因为这样......
  • ECharts 中的样式简介
    ECharts中的样式简介本文主要是大略概述,用哪些方法,可以在ApacheEChartsTM中设置样式,改变图形元素或者文字的颜色、明暗、大小等。为了让表述更通俗易懂,我们在这里用......
  • echarts 图表容器及大小
    图表容器及大小在快速上手中,我们介绍了初始化ECharts的接口echarts.init。API文档中详细介绍了参数的具体含义,建议理解后再阅读本文。下面,我们就常见的几种使用场景,......
  • 学习:python pyecharts数据可视化
    pyecharts数据可视化pyecharts是一个用于生成Echarts图标的类库Echarts是百度开源的一个数据可视化的Js库用Echarts生成的图可视化效果非常棒 新版v1和老版本......
  • 在vue中使用echarts
    1.引入echarts先通过npm安装echartsnpmrunecharts--save2.在main.js中import*asechartsfrom'echarts';Vue.prototype.$echarts=echarts3.在.vue文件中(包括......
  • echarts存在两个series时,tooltip限制仅显示一个
    应用场景       如图,当需要用类似装饰时,需要有两个轴,两组数据,但是tooltip中应该仅显示一组。 解决方法     在option下先设置一个全局的tool......
  • ECharts
    配置调整横纵坐标与边缘的距离方法一:grid:{top:"60px",bottom:"60px",left:"35px",right:"20px",},方法二:博客......
  • echarts 备忘
    1.画线参考:https://echarts.apache.org/examples/zh/editor.html?c=scatter-anscombe-quartet&lang=js示例代码constmarkLineOptFactory=(start=[0.3,0],end......
  • 如何使用echarts
    官网:https://echarts.apache.org/handbook/zh/get-started/a下载js文件并引入b实例化对象echarts.init(获取盒子对象)c设置配置项 复制修改d应用配置项setOp......