一、多数据环
```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: "Traffic Sources ", ToolTip: { }, left:" 40% "
Top:" Top ",
Trigger: 'Item',
Formatter: "{A} a {B}: {C} ({D}%)"
},
Legend: {
Orient: 'Vertical',
X: 'left',
Data: [ 'direct access', 'email marketing', 'advertising alliance', 'video ads,' 'Search engines']
},
Series: [
{
name: 'referrer',
of the type: 'PIE',
the RADIUS: ['20% ', '30%'],
ItemStyle: {
Normal: {
the 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: 'email marketing'},
{value: 234, name: 'affiliate advertising'},
{value: 135, name: 'video ads'},
{value: 1548, name: 'Search Engine' }
]
}
]
};
totalFlowRate.setOption (totalFlowRateOption);
</ Script>
`` `
two, single data ring
` `` HTML: RUN
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> Echarts cyclic FIG effect </ title>
<Script type = "text / JavaScript" the 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: to false
},
labelLine: {
Show: to false
}
}
};
var {Option =
Animation: to false,
/ *
original itemStyle uniform provided here, but the two are inconsistent style itemStyle the present example, the only in the series [0] .data respectively provided in
* /
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, item style: labelTop}
]
}
]
};
totalFlowRate.setOption(option);
</script>
```
FIG annular 38Echarts two effects
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10966679.html
Ranking