echarts环形图,自定义说明文字
一、代码
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环形图,自定义说明文字的更多相关文章
- vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts < ...
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- echarts环形图自动定位radius
根据后台返回数据条数进行pie图radius定位: var a = 100; var b = 0; var c = 0; var radius = []; for (var i in data ...
- echarts环形图点击旋转并高亮
通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,从而根据startAngle这个属性来设定图形的开始渲染的角度,使点击某个扇形时圆环旋转使之始终对准某个点. 期间考虑到某扇形区域太小点击 ...
- Echarts环形进度使用 【1 简单的使用示例】
使用中说明几点属性: hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...
- echarts白色实心环形图(空心饼图)的编写
// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- echarts中关于自定义legend图例文字
formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...
随机推荐
- Python序列结构--列表(一)
列表 列表**包含若干元素的有序连续内存空间**,当列表增加或删除元素时,**列表对象自动进行内存的扩展或收缩**,从而**保证相邻元素之间没有缝隙**.但插入和删除非尾部元素时涉及列表元素大量的移动 ...
- Javascript多线程
最近项目中要用一个倒计时,但是当弹窗的时候倒计时会被阻塞,所以我想到使用Javascript多线程解决该问题. 虽然JavaScript是单线程的,但是通过worker可以让Javascript另外开 ...
- JavaScript的BOM编程,事件-第4章
目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象, ...
- Mybatis框架二:增删改查
这里是搭建框架和准备数据: http://www.cnblogs.com/xuyiqing/p/8600888.html 实现增删改查功能: 测试类: package junit; import ja ...
- postgresql-删除重复数据
greenplum最终的方法是: delete from test where (gp_segment_id, ctid) not in (select gp_segment_id, min(ct ...
- Django--cookie操作
day74 会话跟踪技术 什么是会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...
- Fork/Join框架
java 5开始引入了Executor和ExecutorService接口以及实现这两个接口的类之后,使得java在并发支持上得到了进一步的提升.执行器框架(Executor Framework)将任 ...
- 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Spring Boot + Spring Cloud 构建微服务系统(一):服务注册和发现(Consul)
使用Consul提供注册和发现服务 什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul ...
- 和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮
前面几篇文章详细讲解了 ElasticSearch 的搭建以及使用 SpringDataElasticSearch 来完成搜索查询,但是搜索一般都会有搜索关键字高亮的功能,今天我们把它给加上. 系列文 ...