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

echarts环形饼图,完整圆形,百分比分值

时间:2022-08-23 15:11:23浏览次数:63  
标签:百分比 center color 分值 value scale total echarts name

var scale = 1;
var echartData = [{
    value: 21,
    name: '市场签约1'
}, {
    value: 38,
    name: '市场签约2'
}, {
    value: 35,
    name: '市场签约3'
}, {
    value: 31,
    name: '市场签约4'
}, {
    value: 28,
    name: '市场签约5'
}, {
    value: 24,
    name: '市场签约6'
}, {
    value: 25,
    name: '市场签约7'
}]
var rich = {
    yellow: {
        color: "#3bc7ff",
        fontSize: 14 * scale,
        padding: [8, 0],
        align: 'center'
    },
    total: {
        color: "#A2C7F3",
        fontSize: 60 * scale,
        align: 'center'
    },
    white: {
        color: "#a2c7f3",
        align: 'center',
        fontSize: 18 * scale,
        padding: [8,0 ]
    },
    blue: {
        color: '#3bc7ff',
        fontSize: 18 * scale,
        align: 'center'
    },
    hr: {
        borderColor: '#a2c7f3',
        width: '100%',
        borderWidth: 1,
        height: 0,
    }
}
option = {
    backgroundColor: '#031f2d',
    title: {
        text:'总得分',
        left:'center',
        top:'51%',
        padding:[10,0],
        textStyle:{
            color:'#6B9DD7',
            fontSize:18*scale,
            fontWeight:'normal',
            align:'center'
        }
    },
    legend: {
        selectedMode:false,
        formatter: function(name) {
            var total = 0; //各科正确率总和
            var averagePercent; //综合正确率
            echartData.forEach(function(value, index, array) {
                total += value.value;
            });
            return '{total|' + total + '}{white|分}';
        },
        data: [echartData[0].name],
        // data: ['高等教育学'],
        // itemGap: 50,
        left: 'center',
        top: 'center',
        icon: 'none',
        align:'center',
        textStyle: {
            color: "#fff",
            fontSize: 18 * scale,
            rich: rich
        },
    },
    series: [{
        name: '总考生数量',
        type: 'pie',
        radius: ['42%', '50%'],
        hoverAnimation: false,
        color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE','#6F81DA'],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    var total = 0; //考生总数量
                    var percent = 0; //考生占比
                    echartData.forEach(function(value, index, array) {
                        total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '分/}{blue|' + percent + '%}';
                },
                rich: rich
            },
        },
        labelLine: {
            normal: {
                length:20 * scale,
                length2: 0,
                lineStyle: {
                    color:'#a2c7f3'
                }
            }
        },
        data: echartData
    }]
};

 

标签:百分比,center,color,分值,value,scale,total,echarts,name
From: https://www.cnblogs.com/facenano/p/16616238.html

相关文章

  • 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......
  • 在Vue中引入echarts以及使用
    在Vue中引入echarts以及使用今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染。1.引入echartsnpminstallecharts--save在vue项目中安装......