🙄前戏
实现大屏的一个饼状图，根据设计图，标签边上是有文字和数值显示的，如图所示：
查阅Echarts文档
在formatter的回调中，只返回了name，没有value啊，头疼🤦♂️
那获取不了value，那就康康能不能全局用一个数据源。
🤡开始编码
//将data定义为一个全局的变量
const data = [
{value: 212, name: '管控'},
{value: 124, name: '侦控'},
{value: 204, name: '公开'},
{value: 214, name: '管理'},
];
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 250,
top:45,
itemWidth:8,
itemHeight:8,
itemGap:18,
data:data,
//关键的在这
formatter:function(name){
//通过name获取到数组对象中的单个对象
let singleData = data.filter(function(item){
return item.name == name
})
return name + ' | ' + singleData[0].value;
},
textStyle:{
fontSize: 14,
color:'#fff'
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['55%', '70%'],
center: ['30%','50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
// 控制hover显示的文字
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
//这引用的全局的对象
data: data,
itemStyle: {
// 设置扇形的颜色
normal:{
color:function(params) {
//自定义颜色
var colorList = [
'#FF6036','#FAC149','#3366FF','#1CCD97',
];
return colorList[params.dataIndex]
}
},
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
]
};
🥴关键的地方
根据数组对象的某个属性值找到指定的元素
