JSP中JS获取java传值日期作为折线图横坐标显示
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 获取当前年份后两位的问题
对 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代码
<script>
function formatDate(now) {
var year = (now.getYear() < 1900) ? (1900 + now.getYear()) : now.getYear()
var month= now.getMonth() + 1;
var date= now.getDate();
return year + "-" + month + "-" + date;
}
</script>
<script type="text/javascript">
var dataList1 = <%=dataList1%>;
var dataList2 = <%=dataList2%>;
var s_qjl_name =" <%=s_qjl_name%>";
var arr3 = []; //存储转换得到的时间数组
for(var i=0;i<dataList1.length;i++){
var d=new Date(dataList1[i]);
arr3.push(formatDate(d));
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: s_qjl_name,
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高价格','最低价格']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: arr3 //获取的时间作为横坐标
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' //自动规划纵坐标
}
},
series: [
{
name:'最高价格',
type:'line',
data:dataList2,
markPoint: {
data: [
{type: 'max', name: '最大值'}, //显示数据最大值
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
(2)实现效果图
博主也在边学习边使用中,有问题欢迎大家留言共同讨论!