一、多数据环
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts环状图效果</title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="totalFlowRate" style="height:700px;width:950px"></div>
</body>
</html>
<script type="text/javascript">
var totalFlowRate = echarts.init(document.getElementById('totalFlowRate'));
var totalFlowRateOption = {
title: {
text: "流量来源",
top: "top",
left: "40%"
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['20%', '30%'],
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 2,
label: {
show: true,
position: 'outer',
fontSize: 15,
formatter: "{d}%\n{b}",
align: 'right'
},
labelLine: {
length:60,
length2:60,
lineStyle: {
width: 2,
type: 'solid'
}
}
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
totalFlowRate.setOption(totalFlowRateOption);
</script>
```
二、单数据环
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts环状图效果</title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="totalFlowRate" style="height:106px;width:106px"></div>
</body>
</html>
<script type="text/javascript">
var totalFlowRate = echarts.init(document.getElementById('totalFlowRate'));
var labelTop = {
normal : {
color: 'green',
label : {
show : true,
color:'blue',
position : 'center',
formatter : '{c}\n{b}'
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: 'red',
label : {
show : false
},
labelLine : {
show : false
}
}
};
var option = {
animation:false,
/*
本来itemStyle在此处统一设置，但因本实例的两个itemStyle风格不一致，所以只能在series[0].data里分别设置
*/
series : [
{
type : 'pie',
startAngle: 270,
center : ['50%', '50%'],
radius : [40, 50],
data : [
{name:'GoogleMaps', value:150,itemStyle : labelTop},
{name:'other', value:50, itemStyle : labelBottom}
]
}
]
};
totalFlowRate.setOption(option);
</script>
```
三、百度案例
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts环状图效果</title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="totalFlowRate" style="height:700px;width:950px"></div>
</body>
</html>
<script type="text/javascript">
var totalFlowRate = echarts.init(document.getElementById('totalFlowRate'));
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
formatter : '{b}',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelFromatter = {
normal : {
label : {
formatter : function (params){
return 100 - params.value + '%'
},
textStyle: {
baseline : 'top'
}
}
},
}
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center'
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [40, 55];
option = {
legend: {
x : 'center',
y : 'center',
data:[
'GoogleMaps','Facebook','Youtube','Google+','Weixin',
'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'
]
},
title : {
text: 'The App World',
subtext: 'from global web index',
x: 'center'
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
width: '20%',
height: '30%',
itemStyle : {
normal : {
label : {
formatter : function (params){
return 'other\n' + params.value + '%\n'
},
textStyle: {
baseline : 'middle'
}
}
},
}
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
type : 'pie',
center : ['10%', '30%'],
radius : radius,
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:46, itemStyle : labelBottom},
{name:'GoogleMaps', value:54,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['30%', '30%'],
radius : radius,
x:'20%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:56, itemStyle : labelBottom},
{name:'Facebook', value:44,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['50%', '30%'],
radius : radius,
x:'40%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:65, itemStyle : labelBottom},
{name:'Youtube', value:35,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['70%', '30%'],
radius : radius,
x:'60%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:70, itemStyle : labelBottom},
{name:'Google+', value:30,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['90%', '30%'],
radius : radius,
x:'80%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:73, itemStyle : labelBottom},
{name:'Weixin', value:27,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['10%', '70%'],
radius : radius,
y: '55%', // for funnel
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Twitter', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['30%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'20%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Skype', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['50%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'40%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Messenger', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['70%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'60%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:83, itemStyle : labelBottom},
{name:'Whatsapp', value:17,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['90%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'80%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:89, itemStyle : labelBottom},
{name:'Instagram', value:11,itemStyle : labelTop}
]
}
]
};
totalFlowRate.setOption(option);
</script>
```
38Echarts环状图两种效果
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10966679.html
今日推荐
周排行