修改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"> & ...
随机推荐
- poj--3207--Ikki's Story IV - Panda's Trick(2-sat)
Ikki's Story IV - Panda's Trick Time Limit: 1000MS Memory Limit: 131072KB 64bit IO Format: %I64d ...
- 云:VMware
ylbtech-云:VMware VMware总部位于美国加州帕洛阿尔托 ,是全球云基础架构和移动商务解决方案厂商,提供基于VMware的解决方案,企业通过数据中心改造和公有云整合业务,借助企业安全转 ...
- 通过QEMU-GuestAgent实现从外部注入写文件到KVM虚拟机内部
本文将以宿主上直接写文件到VM内部为例讲解为何要注入以及如何实现 tag: qemu-ga, qemu guest agent, kvm, guest-file-write, inject 小慢哥的原 ...
- 13.QT多窗口切换list
Dialog::Dialog(QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { ui->setupUi(this); list = ...
- Android local socket学习总结
转载请注明出处: http://blog.csdn.net/xiexh0921/article/details/7513628 ################################## ...
- CodeFirst模式,容易引发数据迁移问题(不建议使用)
code first 模式 .模型类需要数据契约绑定[DataContract] .模型参数需要[DataMember]-----(可以序列化) .(同上)也可以在类的上面增加[Table(" ...
- 想写一个 Sketch 插件 结果 一查不可收拾 ~~ 涉及到 Symbol 符号/ Layer 图层 / Overrides 可替换变量 等等
var sketch = context.api() var document = sketch.selectedDocument; var selection = document.selected ...
- 1到32 数字正则 还有IP的
正则是按位解析匹配的,所以[1-32]是不行的. 解析: 1.1-32,包含1位数(1-9)和2位数(10-32) 2.10-32必须切割,10-19和20-29形式一样,得到[12][0-9],30 ...
- mvel2.0语法指南
虽然mvel吸收了大量的java语法,但作为一个表达式语言,还是有着很多重要的不同之处,以达到更高的效率,比如:mvel像正则表达式一样,有直接支持集合.数组和字符串匹配的操作符. 除了表达式语言外, ...
- 趣学算法 PDF pdf 下载 陈小玉版
趣学算法pdf高清无水印版下载 最近在网上找趣学算法pdf,最后还是买了完整版,今天将本书分享出来,分享给那些和我一样在网上苦苦寻找的小可爱们,有条件的话请支持正版! 链接:https://pan.b ...