时间:2021-07-01 10:21:17 帮助过:28人阅读
然而,光有数据太不直观了,所以小白觉得需要有图表的展示。还记得在远古时代,在网页上展示图表使用的是flash。后来有一阵子使用后台的一些技术(比如说微软的MSChart控件)提前生成图片。不过在如今,前端越来越屌,于是小白同学决定使用前端js来做这个事情。在前端图表控件这个江湖中,有各种各样的轮子存在,这些轮子各有千秋,不过对于集pm,po,dev,test,ceo,cto,cfo一体的小白同学来说这都不是事儿。最后拍拍屁股就决定使用echart吧。
echart 是度娘家的娃,文档地址在这里: http://echarts.baidu.com/ 。看了看文档,小白觉得略微有点混乱,不过这里有个 5分钟上手ECharts指南 ,小白觉得这个柱状图挺顺眼的,就决定用这个来展示价格。
小白的服务器语言使用java,框架使用springboot。小白以前是撸多奶的,从没用过这几个东西,不知道html和css该放在哪里。不过求助万能的stackoverflow大神,html该放的位置就有了:
/META-INF/resources//resources//static//public/
小白比较喜欢static的名字,就有了如下的项目结构:
然后打开url:
成功的完成了EChart的首杀。
唔,界面看上去差不多了,好像有什么不对,那就是数据不是从自己的数据库里摸出来的,这个时候就需要使用Ajax去获取数据。小白已经有好久好久没有写前端js脚本了,所以就去问小黑要解决方案。小白提的要求很简单:
1 简单
2 能发ajax
3 有一点点cool
4 不太喜欢jquery
小黑收到这个要求后,从回收站里掏出个项目模板给了小白,于是有了下面的结构:
好久没有撸前端了,先把功能实现了:
function getItem() { $.post(util.getAbsUrl("report/car"), {}, function (data) { show(data); });};function show(data) { var myChart = echarts.init(document.getElementById('main')); var shops = []; var prices = []; for (var i = 0; i < data.cars.length; i++) { var car = data.cars[i]; shops.push(car.shopName) prices.push(car.price); } var option = { title: { text: '黑店报价' }, tooltip: {}, legend: { data: ['报价'] }, xAxis: { data: shops }, yAxis: {}, series: [{ name: '报价', type: 'bar', data: prices }] }; myChart.setOption(option);};
小白到这里才发现,咦,怎么好像还是用的jquery。
服务器端的代码:
@RestControllerpublic class ReportController { @Autowired private CarDao carDao; @RequestMapping(value = "/report/car") public CarResponse getCarReport() { CarResponse response = new CarResponse(); TimeZone.setDefault(TimeZone.getTimeZone("GMT+8")); Calendar todayStart = GregorianCalendar.getInstance(); todayStart.add(Calendar.DATE, -1); Date endTime = todayStart.getTime(); todayStart.add(Calendar.DATE, -1); Date startTime = todayStart.getTime(); response.setCars(carDao.getCarByTime(startTime, endTime)); return response; }}
在Java的时间处理上遇到了不小的麻烦,没有多奶得心应手,可能是因为不熟悉吧,小白这样安慰自己。
顺便就赠送下Java Calendar的用法,请叫我雷锋:
import java.util.Calendar;public class Test{ public static void main(String[] args) { Calendar cal = Calendar.getInstance(); int year = cal.get(Calendar.YEAR); //比当前月份少1 int month = cal.get(Calendar.MONTH); //date表示日期,day表示天数,所以date与day_of_month相同 int date = cal.get(Calendar.DATE); int dayOfMonth = cal.get(Calendar.DAY_OF_MONTH); //表示本周的第几天,从周日开始计算 int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK); int dayOfYear = cal.get(Calendar.DAY_OF_YEAR); //12小时制 int hour = cal.get(Calendar.HOUR); //24小时制 int hourOfDay = cal.get(Calendar.HOUR_OF_DAY); int minute = cal.get(Calendar.MINUTE); int second = cal.get(Calendar.SECOND); int millisecond = cal.get(Calendar.MILLISECOND); int maxDate = cal.getActualMaximum(Calendar.DATE); System.out.println("现在的年份为:" + year); System.out.println("现在的月份为:" + month); System.out.println("现在的号为:" + date); System.out.println("现在的号为:" + dayOfMonth); System.out.println("现在是星期:" + dayOfWeek); System.out.println("现在过了的天数为:" + dayOfYear); System.out.println("现在几点:" + hour); System.out.println("现在几点:" + hourOfDay); System.out.println("现在几分:" + minute); System.out.println("现在几秒:" + second); System.out.println("现在几毫秒:" + millisecond); System.out.println("本月最后一天是:" + maxDate); }}