JSP中JS获取java传值日期作为折线图横坐标显示

爱被打了一巴掌 2022-05-15 13:46 190阅读 0赞

# JSP中JS获取java传值日期作为折线图横坐标显示 #

## 01. 数据准备 ##

(1) 错误获取数据分析

此处要重要强调的是，js接收JSP中 java 数据部分，接收得到的值是字符串型，还要根据需要的类型转换，若需要日期xxxx-xx-xx年月日格式，则需要用 SimpleDateFormat 格式化数据，同理若需要json型数据，要用 json.prase(),将字符串转换为json格式，才可在js中使用。

如在JSP中有数组

<% 
    dataList1 =[2018-2-6,2018-8-8,2018-8-28,2018-9-4.2018-9-12,2018-10-10,2018-10-24] 
    %>

在JS中，获取dataList1 数组时,若直接用以下语句，获取为错误数据，得到 1985,1987…类似值

var dataList1 = <%=dataList1%>;

(2) 正确获取数据分析  
此处以时间来分析，由于js中获取的是字符串，故准备传入JS的值，将其转化为字符串数据，如上面的数组dataList1，由于dataList1数组中为时间，故传入JS时，先将时间转化为毫秒，即时间戳形式，代码如下，完整代码见第二部分：

java.util.Date date=sdf.parse(s_qjl_gmsj); 	//格式化购买时间，转化为毫秒	  
    		dataList1.add(date.getTime());// 添加购买时间

得到的结果如下:

dataList1 =[1517846400000, 1533657600000, 1535385600000, 1535385600000, 1535990400000, 1536681600000, 1537286400000, 1539100800000, 1540310400000]

此时JS获取的dataList1数组为时间戳数组，在JS中再将时间戳在转化为日期格式即可。实现函数如下：

function  formatDate(now)   {
         
        var year = (now.getYear() < 1900) ? (1900 + now.getYear()) : now.getYear() //FF，Chrome浏览器获取的年份是当前年份-1900得到的，故加上1900
        var month= now.getMonth() + 1;   //获取月份，下标从0开始故+1
        var date= now.getDate();  //获取日期
        return year + "-" + month + "-" + date; //返回xxxx-xx-xx格式日期
      }

为什么年份要加上1900，可参考解析[JS 获取当前年份后两位的问题][JS]  
对 dataList1 的转换操作如下，直接调用函数即可：

for(var i=0;i<dataList1.length;i++){
        
        var d=new  Date(dataList1[i]);     
         arr3.push(formatDate(d));  
      }

最后在JS中得到：  
dataList1 =\[2018-2-6,2018-8-8,2018-8-28,2018-9-4.2018-9-12,2018-10-10,2018-10-24\]

## 02. echarts 画图实现 ##

（1）JS代码

（2）实现效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NzM0MzAz_size_27_color_FFFFFF_t_70]

博主也在边学习边使用中，有问题欢迎大家留言共同讨论！

[JS]: https://blog.csdn.net/wu_0916/article/details/78683980
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NzM0MzAz_size_27_color_FFFFFF_t_70]: /images/20220503/b8505636bf08426e99eeb2dcc3065e6d.png