今天做页面的时候用到了环状饼图,大家都知道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. $set()的正确使用方式

    vue给对象新增属性,并触发视图更新 如下代码:给student对象新增age属性 data () { return { student: { name: '', sex: '' } } } 众所周知 ...

  2. js 奇偶判断

    function isOdd(num) { == ; } function isEven(num) { == ; } function isSane(num) { return isEven(num) ...

  3. 【转】关于高可用负载均衡的探索-基于Rancher和Traefic

    原文链接:http://www.dwz.cn/7F4r2T 原创 2018-03-23 张新峰 RancherLabs 本文于3月22日晚由张新峰,杭州爱医康架构师技术分享整理而成.本次分享介绍了如何 ...

  4. Anaconda 创建环境

    2019-03-25 17:10:51 Anaconda 给不同的项目创建不同的环境真的非常重要,最近在使用flask的时候在base环境中安装flask-bootstrap,竟然将我原本的py3.7 ...

  5. CentOS7.5 Python3安装pip报错:ModuleNotFoundError: No module named '_ctypes' --Python3

    1.问题:pyhontModuleNotFoundError: No module named '_ctypes'  操作系统:CentOS7.5 安装完Pyhotn3后(如何安装Python3,安装 ...

  6. Access查询时间段 .

    access数据库cmd // SendTime是在Access数据库中是文本类型 StringBuilder sb = new StringBuilder(); sb.Append("SE ...

  7. Maven项目中使用本地JAR包

    <dependency> <groupId>com.TEST</groupId> <artifactId>hm-test</artifactId& ...

  8. vue的组件之间传值方法

    父组件 <template> <div> 这是父组件 <children v-bind:parentToChild="toChild" v-on:sh ...

  9. ThinkPHP5.0源码学习之执行应用

    一.应用启动 在/thinkphp/start.php文件中,用一句代码App::run()->send();实现应用的启动. // 执行应用 App::run()->send();   ...

  10. mysql sql文件批量处理

    简单动作复杂化,导致处理文件误入坑, 数据库拷贝,备份还原是每个面向对象的开发人员避免不了的动作,在数据库使用中,习惯性的使用第三方数据库管理软件,最近需要做数据库迁移,导出的批量sql文件不知如何区 ...