
正文
echarts饼图样式
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示

1.中间标题字体大小不一致(可分为一个title一个graphic)
2.labelLine与饼图分离(两个饼图,其中一个显示一个隐藏)
function setmyChartJsgxzq(arr,date) {
// 基于准备好的dom,初始化echarts实例
myChartJsgxzq = echarts.init(document.getElementById('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
}
},
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年';







