echarts 环形图中间加上文字但是效果怎么修改
本文介绍了echarts 环形图中间加上文字但是效果怎么修改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div id="section7" class="p60">
<div class="container">
<p class="text-center text-title">CMA核心内容</p>
<div class="col-md-6 text-center pt60">
<div id="pie1" style="width: 100%;height:400px;"></div>
</div>
<div class="col-md-6 text-center pt60">
<div id="pie2" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
var myChart1 = echarts.init(document.getElementById('pie1'));
var myChart2 = echarts.init(document.getElementById('pie2'));
option1 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['20%-成本管理', '20%-绩效管理', '15%-对外财务-报告决策', '15%-内部控制', '30%-规划预算-编制与预测']
},
graphic:{
type:'text',
left:'center',
top:'center',
style:{
text:'Part1\n 财务规划,绩效和控制\n Financial Reporting ,\nPlanning,Performance\n and Control',
textAlign:'center',
fill:'#000',
width:30,
height:30
}
},
series: [
{
name:'访问来源',
type: 'pie',
radius: ['35%', '65%'],
itemStyle: {
normal:{
label:{
show:true,
textStyle:{color:'#3c4858',fontSize:"18"},
formatter:function(val){ //让series 中的文字进行换行
return val.name.split("-").join("\n");}
},
title:{
text:'aaaa'
},
labelLine:{
show:true,
lineStyle:{color:'#3c4858'}
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textColor:'#000'
}
},
data: [
{value: 20, name: '20%-成本管理'},
{value: 20, name: '20%-绩效管理'},
{value: 15, name: '15%-对外财务-报告决策'},
{value: 15, name: '15%-内部控制'},
{value: 30, name: '30%-规划预算-编制与预测'}
]
}
],
color: ['rgb(61,171,232)','rgb(95,193,215)','rgb(146,198,96)','rgb(59,175,134)','rgb(53,128,198)']
};
myChart1.setOption(option1);
现在是这样的
但是我想在环形的中间添加文字
还想改变折线的样式变为下面这样
请问如何修改
解决方案
利用labelLine的length和length2以及padding等这些就可以做出来了!
下面的链就是我做出的展示效果。和你的效果基本一致
链接地址如下:
链接描述
这篇关于echarts 环形图中间加上文字但是效果怎么修改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文