首先看看默认效果:
代码如下:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
修改后第一种显示对饼图中间数字进行汇总而非每次选择每个项后展示该项名称,对鼠标移入做详细展示拆分,效果如图:
代码如下:
option = {
tooltip: {
trigger: 'item',
formatter: '{b} <br/>占比: {d}% <br/>金额:¥{c}'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#4c4a4a',
formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",
color:'#454c5c' },
active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },
emphasis: {
show: true }
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
第二种改造,对原来的数据结构进行修改,增加显示多项。效果如图:
代码如下:
option = {
tooltip: {
trigger: 'item',
// formatter: '{b0} <br/> {c} ({d}%)'
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
console.log(myseries[i])
if(myseries[i].data[j].name==params.name){
res+=' 总额: '+myseries[i].data[j].value+'</br>';
res+=' 占比: '+myseries[i].data[j].radio+'</br>';
res+=' 订单量: '+myseries[i].data[j].count+'</br>';
}
}
}
return res;
}
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#4c4a4a',
formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",
color:'#454c5c' },
active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },
emphasis: {
show: true }
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎',count:200,radio:'20%'},
{value: 735, name: '直接访问',count:210,radio:'25%'},
{value: 580, name: '邮件营销',count:220,radio:'26%'},
{value: 484, name: '联盟广告',count:230,radio:'27%'},
{value: 300, name: '视频广告',count:240,radio:'29%'}
]
}
]
};
以上代码是 针对Echart饼图-圆形图修改,根据业务使用改造的,记录以便日后使用。