饼状图大小
radius: '45%', center: ['50%', '35%'],
图例的位置
legend: { orient: 'vertical', /* x: 'left', y: 'top', */ textStyle: { //图例文字的样式 color: '#fff', fontSize: 12 }, type: 'scroll', left: 80, bottom: 0, data: names },
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之饼状图</title> <!-- 引入 echarts.js --> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> <style> body { background:#01040d; height: 100vh; background: url(images/background.png) no-repeat; background-size: 100% 100%; } .leftBie { border: 1px solid #181482; float: left; height: 500px; margin-right: 19px; width: 600px; } .dataView { text-align: center; position: absolute; left: 168px; bottom: 102px; } .dataView span { width: 120px; display: inline-block; color: #FFFFFF; font-size: 12px; margin: 3.4px; } .CurrentNumber{ width:200px; } .totalNumber{ position: absolute; top: 1px; right: -91px; } </style> </head> <body> <div class="leftBie"> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height: 470px;"></div> <div class="dataView"></div> </div> <script type="text/javascript"> var SwissBankApi = 'data.json'; $.ajax({ type: 'get', url: SwissBankApi, dataType: "json", //返回数据形式为json success: function(data) { totalNumber(data); ProportionRegional(data); }, error: function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); function totalNumber(data) { var html = ""; html += '<div class="CurrentNumber">'; $.each(data.content, function(i, item) { html += '<span>当前人数:' + item.count + '人</span>'; }); html += '</div>'; html += '<span class="totalNumber">总人数:' + data.count + '人</span>'; $(".dataView").html(html); } function ProportionRegional(data) { //基于准备好的dom，初始化echarts实例 var cChart = echarts.init(document.getElementById('main')); var names = []; //类别数组（用于存放饼图的类别） var brower = []; //请求成功时执行该函数内容，result即为服务器返回的json对象 $.each(data.content, function(index, item) { names.push(item.name); //挨个取出类别并填入类别数组 brower.push({ name: item.name, value: item.count }); }); cChart.setOption({ //加载数据图表 title: { text: '区域人数比例', // subtext:'', x: 'left', y: '7px', textStyle: { //图例文字的样式 color: '#fff', //字体风格,'normal','italic','oblique' fontStyle: 'normal', //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... fontWeight: '200', //字体系列 fontFamily: 'sans-serif', //字体大小 fontSize: 16 }, textAlign: 'left' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', /* x: 'left', y: 'top', */ textStyle: { //图例文字的样式 color: '#fff', fontSize: 12 }, type: 'scroll', left: 80, bottom: 0, data: names }, series: [{ name: '', type: 'pie', radius: '45%', center: ['50%', '35%'], data: brower, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { color: function(params) { //自定义颜色 var colorList = ['#e161ae', '#37a2d8', '#64e1e3', '#fedb5b', '#fda07e' ]; return colorList[params.dataIndex] } } } }] }); } </script> </body> </html>
效果如下所示：
data.json
{ "count": 299, "content": [{ "id": "fid--c6a0a81_170f6d2aa18_57ca", "name": "病房", "lon": 0, "lat":12, "count": 12 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "护士站", "lon": 0, "lat": 12, "count": 11 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "医务室", "lon": 0, "lat": 0, "count": 13 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "缴费大厅", "lon": 0, "lat": 0, "count": 14 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "住院部", "lon": 0, "lat": 0, "count": 15 }] }
