echarts饼图样式
1.中间标题字体⼤⼩不⼀致（可分为⼀个title⼀个graphic）
2.labelLine与饼图分离（两个饼图，其中⼀个显⽰⼀个隐藏）
function setmyChartJsgxzq(arr,date) {
// 基于准备好的dom，初始化echarts实例
myChartJsgxzq = echarts.ElementById('jsgxzq'));
// 指定图表的配置项和数据
var option = {
color: moreColor,
dataset: {
source: arr
},
xAxis: {
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
}
},
series: [{
name : 'show',
type: 'pie',
radius: ['43%', '60%'],
seriesLayoutBy: 'row',
label: {
normal: {
show: false,
color:'#000000'
},
}
},
{
name: 'hidden',
radius: ['60%', '63%'],
type: 'pie',
seriesLayoutBy: 'row',
itemStyle: {
opacity: 0,
},
label: {
normal: {
show: true,
color:'#000000'
},
},
labelLine:{
normal: {
lineStyle: {
color: '#000000'
},
show: true
}
}
}
],
title: {
text: '⾏业更新周期',
x: 'center',
y: '44%',
textStyle: {
fontWeight: 'normal',
fontSize: 14
}
},setoption
graphic:{
type:'text',
left:'center',
top:'54%',
style:{
text:date,
textAlign:'center',
fill:'#000',
width:30,
fontSize:18,
/
/ height:60
}
}
};
// 使⽤刚指定的配置项和数据显⽰图表。    myChartJsgxzq.setOption(option);
}
注：arr的数据格式为⼆维数组eg:
arr = [
['1-3年','4-6年','7-9年','10-12年'],
[10,20,30,40]
];
date = '5年';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。