rendering



Implementation source code:

<! DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; App. title = 'circle graph '; var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:['#93D8A9','#FFB99D','#AF7DCC','#FFD83D','#bbe2e8'], legend: { orient: 'horizontal', x: 'left' data: [' direct access to the ', 'email marketing,' advertising ', 'video advertising', 'search engines']}, series: [{name:' access to the source, type: 'pie', the radius: ['30%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 335, name: 'Direct access'}, {value: 310, name: 'mail marketing'}, {value: 234, name: 'affiliate advertising'}, {value: 135, name: 'video advertising'}, {value: 1548, name: 'search engine'}]}]}; if(option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>Copy the code

Other attributes of pie chart Configuration Document Address: Click to jump