今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋。直接上代码:

 var option = {
series: [
{
type:'pie',
// 第一个参数是内圆半径,第二个参数是外圆半径,相对饼图的宿主div大小
radius: ['40%', '50%'],
avoidLabelOverlap: false,
// 禁用饼状图悬浮动画效果
animation: false,
      
label: {
normal: {
// 这里的竖线前面的b 和 per是相应参数的别名(我理解为别名),对应下面rich属性里的b和per
formatter: '{b|{b}:}{c} ({per|{d}%})',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
padding: 5,
borderRadius: 4,
rich: {
b: {
fontSize: 8,
lineHeight: 15
},
per: {
align: 'center'
}
}
}
},
data:[
{value:1432, name:'合格'},
{value:500, name:'不合格'}
]
}
]
}

大体效果是这样的:

  

比较简陋,如有错误,欢迎指正!!

echarts画饼环状饼图相关参数配置的更多相关文章

  1. 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析)

    电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 目录 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 写在前面 正文 电机噪声 谐波的产生 什么 ...

  2. 转:浅谈UNIX下Apache的MPM及httpd.conf配置文件中相关参数配置

    为什么要并发处理 以Apache为代表的web服务器中,如果不支持并发,则在一个客户端连接的时候,如果该客户端的任务没有处理完,其他连接的客户端将会一直处于等待状态,这事不可想象的,好像没有为什么要不 ...

  3. JVM相关参数配置和问题诊断<转>

    原文连接:http://blog.csdn.net/chjttony/article/details/6240457 1.Websphere JVM相关问题诊断: 由JVM引起的Websphere问题 ...

  4. Spark 性能相关参数配置详解-任务调度篇

    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化. 由于篇 ...

  5. Spark 性能相关参数配置详解-压缩与序列化篇

    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化. 由于篇 ...

  6. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  7. Yarn 内存分配管理机制及相关参数配置

    上一篇hive on tez 任务报错中提到了containter内存不足,现对yarn 内存分配管理进行介绍 一.相关配置情况 关于Yarn内存分配与管理,主要涉及到了ResourceManage. ...

  8. YARN日志聚合相关参数配置

    日志聚合是YARN提供的日志中央化管理功能,它能将运行完成的Container/任务日志上传到HDFS上,从而减轻NodeManager负载,且提供一个中央化存储和分析机制.默认情况下,Contain ...

  9. Spark 性能相关参数配置详解-shuffle篇

    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 在Spark的官方文档http://spark.apache.org/docs/latest/configuration. ...

随机推荐

  1. 尚硅谷面试第一季-16 JVM垃圾回收机制

    问题的提出:GC发生在JVM那个部分,由几种GC,它们的算法是什么? 课堂重点: GC发生在JVM体系的堆部分.     什么是GC(分代手机算法)Minor GC 和 Full GC GC4大算法: ...

  2. Java基础学习-Java语言概述

    一.Java语言发展史 创始人:詹姆斯·高斯林(James Gosling) 公司:SUN——(Stanford University Network斯坦福大学网络公司) 1995年5月23日,Jav ...

  3. oracle substr函数

    //截取下划线后的字符串 select substr('GY_272',instr('GY_272', '_', -1, 1)+1)   from dual select substr('GY_272 ...

  4. mac git 删除本地仓库文件

    递归清除本地文件夹下的Git文件,如果想重新建立仓库,那么在重新初始化新建的git仓库 //删除文件夹下的所有 .git 文件 find . -name ".git" | xarg ...

  5. ugui 灰度shader mask冲突解决 转。。。

    项目上遇到了一个问题,灰度shader无法在mask下使用,两个之间会一定的冲突.经查验是mask组件对shader的相关属性有要求,添加相关的属性则可符合要求使其他shader使用UGui里的mas ...

  6. oracle 11 g release 2 卸载

    Win 10 系统,Oracle 11 g R 2 ,安装目录C盘根目录 1.停止Oracle的所有服务 打开“服务”窗口,关闭Oracle的所有服务 2.运行Oracle Universal Ins ...

  7. spring cloud 版本号与 boot版本之间的对应关系(版本不对,会导致pom无法引入)

    版本号规则 Spring Cloud并没有熟悉的数字版本号,而是对应一个开发代号. 开发代号看似没有什么规律,但实际上首字母是有顺序的,比如:Dalston版本,我们可以简称 D 版本,对应的 Edg ...

  8. Rails-Treasure chest2 嵌套表单;

    嵌套表单1-1 嵌套表单1-多 选日期时间的UI (一个jquery Plugin) 拆除前后台css和js Rich Editor, 显示输入的HTML tag 批次编辑/删除 嵌套表单1-1 核心 ...

  9. Web版记账本开发记录(七)

    经过不懈的努力,虽然开发出来的还有瑕疵,但今后我会继续努力的.

  10. 数独_erlang解题代码

    前几天LP玩数独,玩到大师级各种被虐,我看了看说,分分钟帮你做出来, 结果当然没有做出来. 于是上网搜了下数独的解题代码,看了下C的代码,大多是递归之类的(如http://blog.sina.com. ...