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）实现效果图

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