一、代码

 app.title = '已安装通讯盒电站统计';

 option = {
backgroundColor: '#0f0f31',//#0f0f31
title: {
show:true,
x:"left",
text: '已安装通讯盒电站统计',
textStyle:{
fontSize:16
,fontWeight:'normal'
,color:'#72a1d2'
},
left:20,
top:10,
borderColor :'#10395c',
borderWidth :2,
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
}, graphic: [ {
type: 'group',
id: 'textGroup2',
left: 370,
top: 400,
position :[10, 0],
children: [ {
type: 'text',
z: 100,
top: 'middle',
left: 100,
style: {
formatter: "{a} <br/>{b}: {c} ({d}%)",
text: [
'已安装1280个',
'未安装320个',
].join('\n'),
font: '16px cursive',
textVerticalAlign :'middle',
fill:'#13a7d1', }
}
]
}],
series: [
{
name:'已安装通讯盒电站统计',
type:'pie',
radius:['10%','18%'],
avoidLabelOverlap:false,
color:['#32A8FF',' #02C800','#9f47fd'],
formatter: '{b}: {d}',
slient:true,
markLine :{
label :{
show:true,
position :'outside'
},
},
labelLine:{
normal:{
show:true,
length:14 ,
length2 :56,
}
},
label:{
normal:{
show:true,
position:'center',
formatter:function(){
return '80%'
},
textStyle:{
fontSize:20,
color:'rgba(20, 180, 213, 0.9)',
}
}
},
emphasis:{
show:true,
textStyle:{
fontSize:30,
//fontWeight:'bold'
}
}, data:[{value:1280,name:'已安装',itemStyle:{
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 offset: 0,
color: '#2a8af6'
}, {
offset: 1,
color: '#393eda'
}])
},emphasis : {
label : {
show : true,
formatter : "{b}\n{d}%",
color:'white',
}
}
}},{value:320,name:'未安装',itemStyle:{
normal:{
color:'transparent',
}
}}]
},{
name:'',
type:'pie',
radius:['8%','10%'],
avoidLabelOverlap:false,
legendHoverLink :false,
label:{
show:false,
},
tooltip:{//禁止鼠标悬停显示提示框
show:false,
},
hoverAnimation:false ,//禁止鼠标悬停放大区域
color:['#bcdbfa'], data:[{value:100}]
}
]
};

二、效果图

echarts环形图,自定义说明文字的更多相关文章

  1. vue 使用Echarts 环形图 自定义legend formatter 富文本标签

    main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts   < ...

  2. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  3. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  4. echarts环形图自动定位radius

    根据后台返回数据条数进行pie图radius定位:     var a = 100; var b = 0; var c = 0; var radius = []; for (var i in data ...

  5. echarts环形图点击旋转并高亮

    通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,从而根据startAngle这个属性来设定图形的开始渲染的角度,使点击某个扇形时圆环旋转使之始终对准某个点. 期间考虑到某扇形区域太小点击 ...

  6. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...

  7. echarts白色实心环形图(空心饼图)的编写

    // 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...

  8. echarts实现环形图

    前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...

  9. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

随机推荐

  1. AssetBundle使用心得【资源加载】

    0.资源加载方式 静态资源 Asset下所有资源称为静态资源 Resources资源 Resources目录下,通过实例化得到的资源 AssetBundle资源 又称为增量更新资源 1.什么是Asse ...

  2. 9.3AspectJ

    1.1 介绍 AspectJ是一个基于Java语言的AOP框架 Spring2.0以后新增了对AspectJ切点表达式支持 @AspectJ 是AspectJ1.5新增功能,通过JDK5注解技术,允许 ...

  3. 请找出至少一个由递推关系 a(i) = a(i – 1) + a(i – 2) 生成的数列,使得当 n 趋于 (√5+1)/2的数列

    寻找前后两项比值趋于 (√5+1)/2的广义Fibonacci数列 找到了一个帖子:这个帖子 //待补充

  4. 使用netstat命令查看端口的使用情况

    Windows如何查看端口占用情况操作步骤如下: 开始--运行--cmd 进入命令提示符,输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管 ...

  5. 第二十八节:Java基础-进阶继承,抽象类,接口

    前言 Java基础-进阶继承,抽象类,接口 进阶继承 class Stu { int age = 1; } class Stuo extends Stu { int agee = 2; } class ...

  6. Swift5 语言指南(八) 控制流

    Swift提供了各种控制流程语句.这些包括while多次执行任务的循环; if,guard和switch基于特定条件执行不同代码分支的语句; 和语句,如break和continue对执行流在你的代码转 ...

  7. SpringCloud-Eurake坑

    首先遇到的问题 Eurake单台部署,很容易出现自我保护,发现web管理页面一大串红字警告 这个问题通过关闭自我保护机制可以简单解决..一般集群部署不会出现 eureka: server: renew ...

  8. Spring Boot Tomcat配置详解

    参数配置容器 server.xx开头的是所有servlet容器通用的配置,server.tomcat.xx开头的是tomcat特有的参数,其它类似. 所有参数绑定配置类:org.springframe ...

  9. python --第三方登录--微博

    理解第三方登录的流程: 用户向本地应用商城发起请求,我要用微博进行登录 我们的商城凑一个url让用户跳转到第三方应用的url(微博的登录页面) 用户在该界面点击输入用户名密码之后,点击授权. 微博有个 ...

  10. LDA-线性判别分析(二)Two-classes 情形的数学推导

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...