var source = ['50%', '50%'];
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: {
text: '蔬菜',
x: 'center',
y: 'center',
textStyle: {
color: '#98a0c4',
fontWeight: 'bolder',
fontSize: 25,
}
},
legend: {
itemWidth: 14,
orient: '',
icon: 'rect',
left: '10%',
top: 'center',
data: ['蔬菜', '水果', '粮食作物', '经济作物', '茶叶', '绿化植物', '中药材', '其他'],
},
calculable: true,
series: [
{
type: 'pie',
data: [100],
z: 2,
radius: ['69%', '0%'],
center: source,
silent: true,
itemStyle: {
normal: {
color: '#fff',
}
},
labelLine: {
normal: {
show: false
}
}
},
{
type: 'pie',
data: [100],
z: 1,
radius: ['70%', '0%'],
center: source,
itemStyle: {
normal: {
color: '#dcdcdc',
}
},
silent: true,
labelLine: {
normal: {
show: false
}
}
}, {
type: 'pie',
data: [100],
z: 4,
radius: ['36%', '0%'],
center: source,
itemStyle: {
normal: {
color: '#dcdcdc',
}
},
silent: true,
labelLine: {
normal: {
show: false
}
}
},
{
type: 'pie',
data: [100],
z: 4,
radius: ['35%', '0%'],
center: source,
itemStyle: {
normal: {
color: '#fff',
}
},
silent: true,
labelLine: {
normal: {
show: false
}
}
},
{
name: '种植面积',
type: 'pie',
z: 5,
radius: ["45%", "60%"],
center: source,
startAngle: 300,
hoverAnimation:true,
label: {
normal: {
show: false,
},
},
data: [
{ value: 69, name: '蔬菜' },
{ value: 88, name: '水果' },
{ value: 90, name: '粮食作物' },
{ value: 20, name: '经济作物' },
{ value: 60, name: '茶叶' },
{ value: 86, name: '绿化植物' },
{ value: 46, name: '中药材' },
{ value: 35, name: '其他' },
]
}
]
};
myChart.on('mousemove', function (params) {
myChart.setOption({
title: {
text: params.name,
}
})
});