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

修改效果图:

直接上代码:其它不多说。
app.title = '嵌套环形图';
option = {
legend: {
itemWidth: , //图例的宽度
itemHeight: , //图例的高度
itemGap: ,
orient: 'vertical',
right: 'right',
top:'center',
icon: "rect",
selectedMode: false, //取消图例上的点击事件
data: ['4~18岁', '18<X≤80岁', '>80岁']
},
color: ['#33C6F7','#FFA700','#FF9090'],//扇形区域以及列表颜色
// 设置环形中间的数据。默认center为中间,如果图表位置变化了,中间文字是不变的。
graphic:[{
type:'text',
left:'center',
top:'40%',
style:{
fill:'#686868',
text:'总患者数'
}
},{
type:'text',
left:'center',
top:'50%',
z:,
style:{
text:'',
font: '30px Microsoft YaHei'
}
}],
series: [{
type: 'pie',
radius: ['60%', '75%'],//两个表示环
center: ['50%', '55%'],
labelLine: {//设置延长线的长度
normal: {
length: ,//设置延长线的长度
// length2: 10,//设置第二段延长线的长度
}
},
label: {
normal: {
// formatter: '{d}%, {c} \n\n',
formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
padding: [, -],//取消hr线跟延长线之间的间隙
rich: {
a: {
color: '#999',
lineHeight: ,//设置最后一行空数据高度,为了能让延长线与hr线对接起来
align: 'center'
},
hr: {//设置hr是为了让中间线能够自适应长度
borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的
width: '105%',
borderWidth: 0.5,
height: 0.5,
},
per: {//用百分比数据来调整下数字位置,显的好看些。如果不设置,formatter最后一行的空数据就不需要
padding: [, ],
}
}
}
},
data: [{
value: ,
name: '4~18岁'
},
{
value: ,
name: '18<X≤80岁'
},
{
value: ,
name: '>80岁'
}
],
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
运行效果图:

修改echarts环形图的牵引线及文字位置的更多相关文章
- echarts环形图,自定义说明文字
一.代码 app.title = '已安装通讯盒电站统计'; option = { backgroundColor: '#0f0f31',//#0f0f31 title: { show:true, x ...
- vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts < ...
- 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 环形图使用方式//常用于统计完成进度等等 ...
- echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...
- echarts白色实心环形图(空心饼图)的编写
// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- vue 结合 Echarts 实现半开环形图
Echarts 实现半开环形图 1.先看看实现的图 2.HTML部分 创建id 是 chart 的div标签. <div class="content-item"> & ...
随机推荐
- 【HDU 2176】 取(m堆)石子游戏
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2176 [算法] Nim博弈 当石子数异或和不为0时,先手必胜,否则先手必败 设石子异或和为S 如果 ...
- .NET Core 开发:永远的Hello Word
从.NET Core发布到现在已经很长一段时间了,园子里的各路大神也和它打的火热,本着与时俱进,啥火学啥的原则,我也开始了我的.NET Core学习之旅. 简介 .NET从2002年发行到现在,从呱呱 ...
- Android: HowTo设置app不被系统kill掉
有一种方法可以设置app永远不会被kill,AndroidManifest.xml 中添加: android:persistent="true" 适用于放在/system/app下 ...
- Re:从0开始的微服务架构--(二)快速快速体验微服务架构?--转
原文地址:https://mp.weixin.qq.com/s/QO1QDQWnjHZp8EvGDrxZvw 这是专题的第二篇文章,看看如何搭建一个简单模式的微服务架构. 记得好久之前看到一个大牛说过 ...
- canvas制作刮刮乐案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WebView简单用法
1.空布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...
- PostgreSQL练习网站
PostgreSQL练习 http://pgexercises.com/index.html
- Android dex ,xml 文件反编译方法
Dex 文件是Android上运行于delvik的java二进制文件,如果你对其中的内容感兴趣而开发人员没有公布源代码,你可以用如下方法反编译dex文件: 1 解压system.img 用xyaffs ...
- web_测试用例注意点
测试是一种思维,包括情感思维和智力思维,情感思维主要体现在一句俗语:思想决定行动上(要怀疑一切),智力思维主要体现在测试用例的设计上.具有了这样的思想,就会找出更多的bug.(^_^个人认为,不代表官 ...
- WePy--记录使用过程中的一些坑
讲真, 官方文档还是要好好看, 都是细节啊... 1- 使用wepy框架中封装好的小程序api <wepy 对小程序的API进行Promise处理> ①: 首先需要声明 开启使用we ...