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 ...
随机推荐
- Ngui分辨率适配
必备知识点 1.分辨率适配必然是Orthographic Camera 2.Camera下对应的“Size”(图1)属性大小的理解:当前摄像机高度 = Size * 2 * UnityUnit(Uni ...
- MySQL--运维内参中的binlog_summary脚本
#!/bin/bash ##===================================================## ## 脚本出自<MySQL运维内参> ##===== ...
- 任务调度及远端管理(基于Quartz.net)
这篇文章我们来了解一些项目中的一个很重要的功能:任务调度 可能有些同学还不了解这个,其实简单点说任务调度与数据库中的Job是很相似的东西 只不过是运行的物理位置与管理方式有点不一样,从功能上来说我觉得 ...
- 第二十节:详细讲解String和StringBuffer和StringBuilder的使用
前言 在 Java中的字符串属于对象,那么Java 中提供了 String 类来创建和操作字符串,即是使用对象:因为String类修饰的字符一旦被创建就不可改变,所以当对字符串进行修改的时候,需要使用 ...
- Swift5 语言指南(十九) 错误处理
错误处理是响应程序中的错误条件并从中恢复的过程.Swift为在运行时抛出,捕获,传播和操纵可恢复的错误提供了一流的支持. 某些操作无法保证始终完成执行或生成有用的输出.Optionals用于表示缺少值 ...
- Python编程语言基础
今天给大家讲解python语言基础~~ 01.python核心数据类型 整型数 int:整数是不带有小数部分的数字 浮点型数 float:浮点数是带有小数部分的数字(小数部分可以是0) 复数 co ...
- C#中关于as关键字的使用
我们在实际编码中有时会用到as关键字来将对象转换为指定类型,与is类型不同的是,is关键字是用于检查对象是否与给定类型兼容,如果兼容就返回true,如果不兼容就返回false.而as关键字会直接进行类 ...
- Docker - 常用基础命令
Docker命令分布 帮助信息 查看docker基本信息:docker info 查看docker版本信息:docker version 查看docker的所有命令及选项:docker --help ...
- Linux - 多窗口管理器Screen程序
GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...
- 排名前 16 的 Java 工具类
在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.以下工具类.方法按使用流行度排名,参考数据来源于Github上随机选取的5万个开源项目源码. 一. ...