|
【郑州校区】传智健康项目讲义第九章 八
2.3 查看ECharts官方实例
ECharts提供了很多官方实例，我们可以通过这些官方实例来查看展示效果和使用方法。
官方实例地址：https://www.echartsjs.com/examples/
可以点击具体的一个图形会跳转到编辑页面，编辑页面左侧展示源码（js部分源码），右侧展示图表效果，如下：
要查看完整代码可以点击右下角的Download按钮将完整页面下载到本地。
通过官方案例我们可以发现，使用ECharts展示图表效果，关键点在于确定此图表所需的数据格式，然后按照此数据格式提供数据就可以了，我们无须关注效果是如何渲染出来的。
在实际应用中，我们要展示的数据往往存储在数据库中，所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。
3. 会员数量折线图
3.1 需求分析
会员信息是体检机构的核心数据，其会员数量和增长数量可以反映出机构的部分运营情况。通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年时间内每个月的会员总数据量。展示效果如下图：
3.2 完善页面
会员数量折线图对应的页面为/pages/report_member.html。
3.2.1 导入ECharts库
第一步：将echarts.js文件复制到health_backend工程的plugins目录下
第二步：在report_member.html页面引入echarts.js文件
[AppleScript] 纯文本查看 复制代码 <script src="../plugins/echarts/echarts.js"></script>
3.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/getMemberReport.do").then((res)=>{
myChart1.setOption(
{
title: {
text: '会员数量'
},
tooltip: {},
legend: {
data:['会员数量']
},
xAxis: {
data: res.data.data.months
},
yAxis: {
type:'value'
},
series: [{
name: '会员数量',
type: 'line',
data: res.data.data.memberCount
}]
});
});
</script>
根据折线图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：
[AppleScript] 纯文本查看 复制代码 {
"data":{
"months":["2019.01","2019.02","2019.03","2019.04"],
"memberCount":[3,4,8,10]
},
"flag":true,
"message":"获取会员统计数据成功"
}
|
|
收藏
淘帖
踩
