1.首先定义一个div <div title="统计表" data-options="region:'center'"> <p id="firstPieChart" style="width:100%; height:470px;"></p> </div> 2.//加载饼状图 function loadPieColumn() { var myChart = echarts.init(document.getElementById('firstPieChart'),"macarons"); myChart.clear(); // 显示标题,图例和空的坐标轴 myChart.setOption({ //color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色 title: { text: '-------趋势分析', subtext: '', x:'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { type: 'scroll', x: 'center', y: 'bottom', right: 5, bottom: 2, data: [] }, toolbox: { show : true, feature : { dataView : {show: false, readOnly: false}, magicType : {show: false, type: ['line', 'bar']}, restore : {show: false}, saveAsImage : {show: true} } }, grid: { left: '3%', right: '4%', bottom: '8%', containLabel: true }, series: [{ name: '等级分类', type: 'pie', radius: '55%', center: ['50%', '50%'], data: [] }] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names = []; //类别数组(用于存放饼图的类别) var brower = []; var fs = $('#outFm').serializeArray(); $.ajax({ type: 'post', url:'${ctx}/milkAcquisitionAnalysis/querystat',//请求数据的地址 dataType: "json", //返回数据形式为json data:fs,//参数值 success: function (result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 $.each(result.piemodells, function (index, item) { names.push(item.typeName); //挨个取出类别并填入类别数组 brower.push({ name: item.typeName, value: item.sales }); }); myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 legend: { data: names }, series: [{ data: brower }] }); }, error: function (errorMsg) { //请求失败时执行该函数 $.messager.alert("错误提示", "图表请求数据失败!","error"); myChart.hideLoading(); } }); };
饼形图统计
最新推荐文章于 2023-12-10 17:08:47 发布