记录此次工作汇总遇到的问题及解决方法：
效果图如下：
大致需要JS实现的效果：
一：点击站点类型的下拉框时实现站点选择下拉框内部选项的改变。
二：点击“年月日”时，后面时间选择器选择的时间格式也相关变动为年月日的选择（时间选择器在这里使用的是WdataPicker）。
三：点击查询后将数据填充在下方的Table表格中(Layui表格)。
四：点击表格Tbody中任意tr td都会相应触发背景颜色的变化且将该段数据经highchart制成线图显示。
五：点击表格 Thead 任意td，弹出提示框，框内显示该小时内分钟数据。效果如下：
本次项目数据的绑定基本都用artTemplate实现
问题一解决：
后台给我的数据站点类型分为4种，每种对应不同的站点若干个。由于站点的类型不是很多，我直接将selsect中的option改为相应站点类型，没有使用动态生成的数据绑定方法。但后面下拉框中的站点是根据站点类型的变化来变动的，于是我将artTemplate的动态生成数据绑定在站点类型的change()事件中，代码如下：
var stationIdHtml = template("stationId", stationResult.PartStationResult[0].StationInfo);
$("#station").html(stationIdHtml);//初始设置的下拉框选项
$("#stationType").change(function () {
if ($(this).val() == "综合") {
var stationIdHtml = template("stationId", stationResult.PartStationResult[0].StationInfo);
$("#station").html(stationIdHtml);
} else if ($(this).val() == "自动气象站") {
var stationIdHtml = template("stationId", stationResult.PartStationResult[1].StationInfo);
$("#station").html(stationIdHtml);
} else if ($(this).val() == "水利站") {
var stationIdHtml = template("stationId", stationResult.PartStationResult[2].StationInfo);
$("#station").html(stationIdHtml);
} else if ($(this).val() == "大气成分站") {
var stationIdHtml = template("stationId", stationResult.PartStationResult[3].StationInfo);
$("#station").html(stationIdHtml);
}为什么要写这么简单的问题？首先因为要写的东西都十分简单，没什么营养的新手文。其次，同事写了一种方法 - -，大概如下：
$(".district").click(function () {
$(".district-group").show();
$(".station-group").hide();
$(".landForm-group").hide();
})
$(".station").click(function () {
$(".station-group").show();
$(".landForm-group").hide();
$(".district-group").hide();
})
$(".landForm").click(function () {
$(".station-group").hide();
$(".landForm-group").show();
$(".district-group").hide();
})写了3个下拉框，点击单选按钮，隐藏不需要的两个。然后在查询数据的时候一层层的判断。。。
分区类型的选项由站点类型和单选的类型决定。
问题二解决：
因为数据获取中也要获取“年月日”的选择，所以我设置了一个全局变量num，在点击不同选项时，num的数值也会变化。
然后根据num的数值来进行对时间选择框的改变。代码如下：
$(".getTime").on('focus', function () {
if (num == 0) {
window.WdatePicker({
dateFmt: 'yyyy-M-dd',
skin: 'default',
onpicked: function (dp) {
}
});
} else if (num == 1) {
window.WdatePicker({
dateFmt: 'yyyy-M-1',
skin: 'default',
onpicked: function (dp) {
}
});
//$(".getTime").on("focus", function () {
// WdatePicker({ el: this, dateFmt: 'yyyy-M-1', maxDate: '%y-%M' })
//})
} else {
window.WdatePicker({
dateFmt: 'yyyy-1',
skin: 'default',
onpicked: function (dp) {
}
});在这里我犯了一个毛病，我触发该时间的方式一直是click，然后一直出现触发上的一些问题，很是尴尬。
问题三解决：
由于显示的数据量比较大，所以要实现table表格的横向的滑动，方便查看数据。实现方法是在Table表格的外边的div中设置overflow：auto，这样当表格过长时会出现横向的滑轮。
同时为了方便查看数值对应的属性，所以要实现要素的那一栏在滑轮横向滑动时要固定在左侧,fixed。原计划自己去写这种方法，但发现实现起来的效果比较差劲，所以改用layui表格来实现。
但由于layui表格的动态生成所需要的的数据有相应的格式，而后台传给我的数据格式和需求不同，所以只能用和API文档中不同的方法去实现数据的绑定。
https://blog.csdn.net/qq_42610806/article/details/81295930
这是之前写的解决方法，这里不再重写。简单的说就是自己用组装数组去对应需求。
但在对td点击触发背景色改变(装成已经被选取的样式)的时候发现固定列总是不会触发tr的事件(this.addClass("active"))；
后来发现layui生成的表格有两层，一层是非固定列，就是目前点击的表格，包括全套的表格内容，一层是只有固定列的表格。每次点击td or tr时，只能触发同一个表格中tr class的变化，所以如果要实现我想要的结果，就需要将相应的时间分别在固定列表格和非固定列存在的表格中写一遍 - - ，这里再帮自己记个小知识点：动态生成的标签、元素无法触发JS中以$(select).click()方式触发的事件。因为当动态生成的标签、元素生成时，该事件绑定遍历已经结束了，所以不会被绑定该click的事件。可以使用$(selsect).on("click",function(){})的方式为动态生成的元素绑定事件。
问题四解决：
这是要实现的效果，简单说明下，点击Table中要素tr行，在highchart中渲染出该要素的对应的线图。
具体要求，要生成对对应图线，对应图线要生成相对应的Y轴，且“雨量”的要以柱状图显示，对应的Y轴要在图表的左侧，且默认显示。
大概的方法之前写在https://blog.csdn.net/qq_42610806/article/details/81299099。现在具体讲讲思想和步骤。
绘制的步骤：
1.首页页面进来就要在图表中存在雨量的柱状图。
2.点击表格中的要素时，要给tr附加selected样式，然后在图表中渲染该要素的数据，生成对应Y轴。
3.点击selected样式的tr时，取消样式，且消除其数据在图表的渲染。
4.查询新日期或站点时，图表和表格恢复默认，即该搜索站点在在搜索时刻的数据及雨量在图表中的渲染。
绘制思想：
根据表格中存在selected的tr进行绘制图表，就是说要依次判定表格中tr的class，若存在相应class则绘制该段数据。
但在绘制之前，我们需要做的是将先前所有绘制的图表数据清除，也就是说每次触发判定事件时，都是对图表的重绘。
所以我们首先要清除图表，代码如下:
var slength = chart.series.length;
for (var i = 0; i < slength; i++) {
chart.series[0].remove();
};这里有个点，series为数组，每次移除首项时，后一项都会重新填入[0]，变成新的首项 - -，数组啊数组。
上述方法只是清除图表中的数据绘制的曲线，但未清除相应的Y轴，所以我们需要继续清除Y轴，代码如下:
for (var i = 0; i < info.length; i++) {
chart.get(info[i].name).remove();
}清除Y轴的方法是根据该Y轴的name来清除的，即ichart.get(name).remove()；所以我们就需要一个数组来保存我们之前绘制Y轴和图像的数据。这里我设置为Info。全局变量。在这个数组中，需要保存的有name属性（绘制Y轴），type属性(绘制图表类型),data（绘制图表所需要的的数据）。
接下来就是遍历tr，存在selected样式的tr则为Info[]填入相应数据。代码如下：
info = new Array();
var index = 0;
for (var i = 0; i < 7; i++) {
var chartData = new Array();
if ($(".layui-table-main tbody tr:eq(" + i + ")").hasClass("trselect")) {
for (var item in data[i].DataList) {
chartData.push(parseFloat(data[i].DataList[item]))
}
if (data[i].ElementName == "雨量") {
info[index] = {
name: data[i].ElementName,
type: 'column',
data: chartData,
}
} else {
info[index] = {
name: data[i].ElementName,
type: 'spline',
data: chartData
}
}
index++;
}Info=new Array()是因为上一次的图表结果已经被删除了，现在需要一个新的数组保存需要的数据。同时也可以在填入数据时判定是否是"雨量"，如果是的话，可以改变type的赋值。index是新Info数组的索引。每次添加数据完毕后需要+1，为后来数据腾出空间。.接下来就可以根据之前链接中写的方法添加图像个Y轴了。
上述所有的方法都是在tr被点击时触发的，也就是说每当tr被点击时，都要清空图表数据，Y轴，清空Info中的数据，为Info添加新数据，根据Info中的数据重新绘制图表。
chart.xAxis[0].setCategories(chartX);这个是绘制坐标轴的。
接下来就是解决默认图表数据的显示问题：
var chartData = new Array();
for (var item in data[0].DataList) {
chartData.push(parseFloat(data[0].DataList[item]))
};这个方法是写在查询数据的方法里面的，页面载入时和点击查询时会触发该方法，这样chartData就能获取到data[0]中的数据，即雨量数据。绘制chart的方法是写在上述所有使用到chart的方法的后面，所以可以在绘制chart时
series: [
{
name: data[0].ElementName,
type: 'column',
data: chartData
},
]填入默认的雨量数据，点击查询是也会触发。然后就是在查询方法内添加对应雨量tr的selected样式。OK~
问题五解决:
问题五解决的方法使用到了layui的弹出框和静态表格方法。所以要熟悉layui了。。。
首先layui.use。。。声明你要用到的模块，这里是layer。
然后是弹出框的写法：
layer.open({
title: title
, type: 1
, content: $("#tableThree"),
area: ['60%', '45%']
});title对应的是该弹出框的标题，type是弹出方式，动画，area对应长宽，最重要的content。
一：可以自己写内容，比如'Hello World！'。
二：你可以写content:'<label>Hello World!</label><br><p style="color:red">Red</p>'。HTML
三：$(select)。DOM
选择DOM时，比如$("#tableOne"),那么该table在开始时在页面上是不会出现的，当弹出框弹出时会在弹出框内显示，关闭弹出框时，table会显示在页面上。
那么我们需要做的就是动态添加一个Table，用append（）方法在HTML中添加一个table，然后用artTemplate方法绑定数据，然后弹出显示该table，然后在弹窗关闭后将该table从HTML中删除。
问题都解决了，记录一下，方便以后回顾。