一、多数据环```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>```
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10966679.html
时间： 2024-10-12 20:56:34