【逻辑】导入图表js文件→html创建图表id→js指定图表配置→ajax请求数据→函数返回数据→ajax将数据显示在图表中。
8.1折线图
1.导入js文件。这里使用的是百度开发的echarts:
2.html放置图表位置和大小等样式:
3.js中指定图表详细样式option;可参考echarts官网的示例,进行修改即可。有些数据是在后台获取。
4.ajax向后台请求数据:
5.函数返回数据:
6.ajax获取数据,并赋予图表(option):
7.效果图:
8.2柱状图和饼图
【注意事项】模板数据不用后台获取,后台只传入动态的数据即可。例如:饼图中只传入series的data数据即可,图例、标签都根据data变动: