要求:
项目源码github地址:https://github.com/zhaiyifei/mygithub/tree/master/ershouwang
项目结构:
项目流程:
首先把静态页面做出来。
然后将静态页面转换为动态页面。
-
制作静态页面。效果如下:
a. home.html
b. pie.html
c. top3.html
下面进行图表的绘制
-
home.html
home.html是发帖量对比柱状图。
柱状图的highcharts是这个样子的:
效果如下:
改成动态的时候,只需要动态生成series数组内部的字典(json)结构即可。
-
-
pie.html 一天内交易出去的商品,地区与类目饼图
饼图highcharts是这个样子的:
效果如下:
两个饼图,做两个highcharts即可。
改成动态时候,我们只需要将series里面的data嵌套数组动态生成即可。 -
top3.html 各城区中最热销的三个类目柱状图
柱状图highcharts 与home.html中的柱状图是一模一样的
我们需要做一个下拉菜单,根据下拉菜单显示对应的柱状图数据。
使用semantic-ui下拉菜单组件,制作下拉菜单。
动态生成的时候,动态生成下拉选项即可。
柱状图数据,根据下拉菜单动态从后台获取,前台使用 ajax动态生成highcharts的series数据。
静态网页制作完毕,下面将静态页面转换为动态页面。