38Echarts环状图两种效果
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了38Echarts环状图两种效果相关的知识，希望对你有一定的参考价值。
一、多数据环
```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%\nb",
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\nb‘
,
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环状图两种效果的主要内容，如果未能解决你的问题，请参考以下文章