7.20 week4-3 part8 数据图表的显示

【逻辑】导入图表js文件→html创建图表id→js指定图表配置→ajax请求数据→函数返回数据→ajax将数据显示在图表中。

8.1折线图

1.导入js文件。这里使用的是百度开发的echarts:

js文件

2.html放置图表位置和大小等样式:

图表显示位置和样式

3.js中指定图表详细样式option;可参考echarts官网的示例,进行修改即可。有些数据是在后台获取。

js指定图表配置

4.ajax向后台请求数据:

ajax请求数据

5.函数返回数据:

函数返回数据

6.ajax获取数据,并赋予图表(option):

ajax将数据传给图表

7.效果图:

折线图

8.2柱状图和饼图

【注意事项】模板数据不用后台获取,后台只传入动态的数据即可。例如:饼图中只传入series的data数据即可,图例、标签都根据data变动:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容