<div id="pie1" style="width: 240px;height: 220px;"></div>
不多说,直接上js
function pie(id,data,total){//传参根据项目实际情况需要
var index = 0;//默认选中高亮模块索引
var chart = echarts.init(document.getElementById(id));
var option = {
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)",
position: 'right',
},
color:['#ff635e','#ffb22d','#92cf43','#009cff'],
series:
{
name:'',
type:'pie',
radius: ['55%', '85%'],
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter: [
'{bt|{b}}',
'({num|{c}/'+total+'万})'
].join('\n'),
rich: {
bt: {
fontSize: '15',
lineHeight:'25',
},
num:{
fontSize: '12',
}
},
},
},
labelLine: {
normal: {
show: false
}
},
data:data
}
};
chart.setOption(option);
chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});//设置默认选中高亮部分
chart.on('mouseover',function(e){
if(e.dataIndex != index){
chart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index });
}
});
chart.on('mouseout',function(e){
index = e.dataIndex;
chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});
调用方法
pie('pie1',[
{value:60, name:'指标名称1'},
{value:60, name:'指标名称2'},
{value:40, name:'指标名称3'},
{value:30, name:'指标名称4'}
],190);
上效果图