一、代码

 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. MFC文件IO和串行化

    一. MFC中CFile对象实现了磁盘文档的读写,但是大部分MFC应用程序的IO服务都使用CArchive对象来完成.不管CFile和Archive输入输出的都是二进制数据,非文本数据. int a ...

  2. MySQL--CREATE INDEX在各版本的优化

    在MySQL 5.5版本中引入FIC(Fast index creation)特性,提升索引的创建速度. FCI 操作流程: (1)对表加共享S锁,允许其他会话读操作,但禁止写操作, (2)扫描Clu ...

  3. JavaScript实现HTML页面集成QQ空间分享功能

    <!DOCTYPE HTML> <html> <head> <title>QQ空间分享</title> <meta http-equi ...

  4. IOS 整体框架类图值得收藏

    Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...

  5. enumerate使用

    # enumerate读取文件import enumfor index, line in enumerate(open('C:\\Users\\CTO\\Desktop\\spider\\douban ...

  6. Thread-方法以及wait、notify简介

    Thread.sleep()1.静态方法是定义在Thread类中.2.Thread.sleep()方法用来暂停当前执行的线程,将CPU使用权释放给线程调度器,但不释放锁(也就是说如果有synchron ...

  7. Python——pytessercat识别简单的验证码

    什么是验证码 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computersand Humans Apart” (全自动 ...

  8. Linux学习笔记之十————Linux常用服务器构建之ftp服务器

    p服务器介绍 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于Internet上的控制文件的双向传输. 同时,它也是一个应用程序(Ap ...

  9. SpringBoot各类扩展点详解

    一.前言 上篇文章我们深入分析了SpringBoot的一站式启动流程.然后我们知道SpringBoot的主要功能都是依靠它内部很多的扩展点来完成的,那毋容置疑,这些扩展点是我们应该深入了解的,那么本次 ...

  10. 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...