一、代码

 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. 基于ε-NFA的正则表达式引擎

    正则表达式几乎每个程序员都会用到,对于这么常见的一个语言,有没有想过怎么去实现一个呢?乍一想,也许觉得困难,实际上实现一个正则表达式的引擎并没有想像中的复杂,<编译原理>一书中有一章专门讲 ...

  2. Python脱产8期 Day014 2019/4/28

    一 带参装饰器 1.通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...

  3. MongoDB 数据库

    数据库: 关系型数据库       mysql           收费        速度快     字段类型 非关系型数据库   MongoDB    不收费    速度慢一些 存储数据都是字符串 ...

  4. 《Nosql精粹》—— 读后总结

  5. SGD vs Momentum vs NAG vs Adagrad vs Adadelta vs RMSprop vs Adam

    梯度下降优化基本公式:\({\theta\leftarrow\theta-\eta\cdot\nabla_\theta{J(\theta)}}\) 三种梯度下降优化框架 这三种梯度下降优化框架的区别在 ...

  6. LeetCode: 103_Binary Tree Zigzag Level Order Traversal | 二叉树Zigzag层次遍历 | Medium

    本题也属于层次遍历的变形,不同之处在于其遍历的方法是交替进行的,形成一个ZigZag的曲线形式,如下: 代码如下: struct TreeNode { int val; TreeNode* left; ...

  7. Java运行环境(win10)

    系统安装Java后,配置运行环境,我的系统是win10,之前随便装了,没想到最近执行javac命令报错,(网上找了一堆都没用)处理方式如下: 环境变量-新建:变量名:%JAVA_HOME%  变量值: ...

  8. ubuntu18.04 出现 Command 'ifconfig' not found 问题的解决办法

    我们在虚拟主机中查看ip地址需要输入ifconfig,但是报以下错误: 系统提示我们安装 net-tools,当我们输入以下命令,即可安装完成. sudo apt-get install net-to ...

  9. 理解Array.prototype.fill和Array.from

    之所以将这两个方法放在一起说,是因为经常写这样的代码: Array.from({length: 5}).fill(0),看起来很简洁,但是踩到坑之后才发现自己对这两个方法实在是不求甚解. Array. ...

  10. OkHttp3 任务队列

    OkHttp3 有两种运行方式: 1.同步阻塞调用并且直接返回: 2.通过内部线程池分发调度实现非阻塞的异步回调; 下面讲的是非阻塞异步回调,OkHttp在多并发网络下的分发调度过程,主要是Dispa ...