预期效果
圆饼图，中间展示饼图主要信息，例如最开始的总数值，右边展示图例信息（图例信息多的话滚动显示），鼠标移动到饼图相应的色块，中间内容信息显示成该色块的信息（name值，value值）。
var data = [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }]
var color=['#ee6666',"#1492ff",'#fac858','#91cc75','#5470c6', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#0ed2ff']
var nametext ='劳务用工'
option={
color:color,
title: {
show: false,
text: nametext,
subtext:'122',
textAlign:'center',
textVerticalAlign:'middle',
textStyle: {
fontSize: 20,
lineheight:30,
color: "#333",
fontStyle: "normal"
},
subtextStyle:{
color: '#1492ff',
fontSize: 16,
fontWeight:'bold',
padding: [0, 10, 0, 10],
},
left: "30%",
top:'center'
},
legend: {
orient: 'vertical',
right: '5%',
bottom:'center',
itemWidth: 14,
itemGap: 12,
selectedMode:false,
textStyle: {
rich: {
a: {
color: '#333',
fontSize: 16,
width:150,
padding: [0, 10, 0, 0],
},
b: {
color: '#1492ff',
fontSize: 16,
fontWeight:'bold',
padding: [0, 10, 0, 10],
},
}
},
formatter: function (name) {
var target,unit;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
unit = data[i].unit
}
}
return `{a| ${name}}{b|${target}}`;
}
},
series: [
{
name: 'lwyg',
type: 'pie',
radius: ['40%', '80%'],
center:['30%','50%'],
minAngle:30,
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
normal:{
show: true,
position: 'center',
formatter:'{b}\n{c}',
textStyle:{
fontSize:0,
color: '#fff',
}
},
emphasis: {
show:true,
textStyle:{
fontSize:20,
fontWeight:'bold'
},
formatter:function(params){
return `{a| ${params.name}}\n{b|${params.value}}`;
},
rich: {
a: {
color: '#333',
fontSize: 20,
lineHeight:25,
},
b: {
color: '#1492ff',
fontSize: 20,
fontWeight:'bold',
lineHeight:25,
},
}
},
},
labelLine: {
normal:{
show: false
}
},
data: data
}
]
}
//点击事件
// var that=this
// this.ChartPie.on('mouseover', { seriesName:'lwyg'},function(params) {
// that.ChartPie.setOption({
// title:{
// show:false
// }
// })
// });
// this.ChartPie.on('mouseout', { seriesName:'lwyg'},function(params) {
// that.ChartPie.setOption({
// title:{
// show:true
// }
// })
// })
image.png
重点标记：
//鼠标移到饼图颜色块，中间部分显示该色块信息。
label: {
normal:{
show: true,
position: 'center',
formatter:'{b}\n{c}',
textStyle:{
fontSize:0,
color: '#fff',
}
},
emphasis: {
show:true,
textStyle:{
fontSize:20,
fontWeight:'bold'
},
formatter:function(params){
return `{a| ${params.name}}\n{b|${params.value}}`;
},
rich: {
a: {
color: '#333',
fontSize: 20,
lineHeight:25,
},
b: {
color: '#1492ff',
fontSize: 20,
fontWeight:'bold',
lineHeight:25,
},
}
},
},
labelLine: {
normal:{
show: false
}
},
//鼠标滑动接触事件
var that=this
this.ChartPie.on('mouseover', { seriesName:'lwyg'},function(params) {
that.ChartPie.setOption({
title:{
show:false
}
})
});
this.ChartPie.on('mouseout', { seriesName:'lwyg'},function(params) {
that.ChartPie.setOption({
title:{
show:true
}
})
})
image.png