黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第十章 一 [打印本页]

---

作者: 我是楠楠    时间: 2019-11-14 16:04
标题: 【郑州校区】传智健康项目讲义第十章 一

【郑州校区】传智健康项目讲义第十章 一

第10章 图形报表、POI报表
1. 套餐预约占比饼形图
1.1 需求分析
会员可以通过移动端自助进行体检预约，在预约时需要选择预约的体检套餐。本章节我需要通过饼形图直观的展示出会员预约的各个套餐占比情况。展示效果如下图：

1.2 完善页面
套餐预约占比饼形图对应的页面为/pages/report_setmeal.html。
1.2.1 导入ECharts库

[AppleScript] 纯文本查看 复制代码

 <script src="../plugins/echarts/echarts.js"></script>

1.2.2 参照官方实例导入饼形图

[AppleScript] 纯文本查看 复制代码

<div class="box">

<!‐‐ 为 ECharts 准备一个具备大小（宽高）的 DOM ‐‐>

<div id="chart1" style="height:600px;"></div>

</div>

[AppleScript] 纯文本查看 复制代码

<script type="text/javascript">

// 基于准备好的dom，初始化echarts实例

var myChart1 = echarts.init(document.getElementById('chart1'));

//发送ajax请求获取动态数据

axios.get("/report/getSetmealReport.do").then((res)=>{

myChart1.setOption({

title : {

text: '套餐预约占比',

subtext: '',

x:'center'

},

tooltip : {//提示框组件

trigger: 'item',//触发类型，在饼形图中为item

formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式

},

legend: {

orient: 'vertical',

left: 'left',

data: res.data.data.setmealNames

},

series : [

{

name: '套餐预约占比',

type: 'pie',

radius : '55%',

center: ['50%', '60%'],

data:res.data.data.setmealCount,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

});

});

</script>

根据饼形图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：

[AppleScript] 纯文本查看 复制代码

{

"data":{

"setmealNames":["套餐1","套餐2","套餐3"],

"setmealCount":[

{"name":"套餐1","value":10},

{"name":"套餐2","value":30},

{"name":"套餐3","value":25}

]

},

"flag":true,

"message":"获取套餐统计数据成功"

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2