echart bug fix

qinbo

2022-02-15 d2332b7fbcfc618506514a277fe1b17e134eb8c5

 widgetsTS/widget_detail/view.js

@@ -7,359 +7,30 @@
//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;
 
  //开始查询历史数据
  $("#startQueryHistory").click(function () {

    //开始查询历史数据
    $("#startQueryHistory").click(function () {
        queryEchartDataByTimePeriod();
    });
}

function queryEchartDataByTimePeriod() {
    if (myCharts) {
        $('#echart').removeAttr('_echarts_instance_');
    }
    queryEchartDataByTimePeriod();
    
});

}
function queryEchartDataByTimePeriod(){
    
    var backend_url = tmpQueryParams.nodejs_url_predix + "dataapi/Bdata?bid=get_" + tmpQueryParams.layerid + "_single_path&datatype=" + tmpQueryParams.datatype + "&siteid=" + tmpQueryParams.siteid + "&datatime1=" + tmpQueryParams.appDateHourStart + "&datatime2=" + tmpQueryParams.appDateHourEnd+ "&count=10";
    var backend_url = tmpQueryParams.nodejs_url_predix + "dataapi/Bdata?bid=get_" + tmpQueryParams.layerid + "_single_path&datatype=" + tmpQueryParams.datatype + "&siteid=" + tmpQueryParams.siteid + "&datatime1=" + tmpQueryParams.appDateHourStart + "&datatime2=" + tmpQueryParams.appDateHourEnd + "&count=10";
    // all 1006xx layer has the same legend ！！
    var layerid = tmpQueryParams.layerid+"";

    var legendData = all_layer_legends[layerid.substring(0,4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element==tmpQueryParams.selected_qindex.toLowerCase()){
            legendData_selected[element] =true;
        }else{
            legendData_selected[element] =false;
        }
    });
    
    if (legendData == null || legendData.length < 1) {
        return;
    }

    var colorData = echart_lines_color_list[tmpQueryParams.layerid];
    var myItemStyle = {
        normal: {
            // 拐点上显示数值
            label: {
                show: true
            },
            borderColor: 'red', // 拐点边框颜色
            lineStyle: {
                width: 2, // 设置线宽
                type: 'solid' //'dotted'虚线 'solid'实线
            }
        }
    };
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        url: backend_url,
        success: function (data) {
            console.log(data);
            var tableData = data.data.result;
            if (tableData != null && tableData.length > 0) {
                var seriesObj = {};
                var seriesData = [];
                var timeLineData = [];
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var sdata = {};
                    sdata.name = singleLegend;
                    sdata.data = [];
                    sdata.type = 'line';
                    sdata.symbolSize = 8;
                    if (singleLegend.toUpperCase()=='CO'){
                        sdata.yAxisIndex =1;
                    }
                    sdata.itemStyle = myItemStyle;
                    seriesObj[singleLegend] = sdata;
                }
                for (var i = 0; i < tableData.length; i++) {
                    var indexObj = tableData[i];
                    timeLineData.push(shortenLegendTimeString(tmpQueryParams.queryDataType, indexObj.datatime));
                    for (var j = 0; j < legendData.length; j++) {
                        var singleLegend = legendData[j];
                        var sdata = seriesObj[singleLegend];
                        sdata.data.push(indexObj[singleLegend])
                    }
                }
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var mySeries = seriesObj[singleLegend];
                    seriesData.push(mySeries);
                }

                options = {
                    title: {
                        text: tableData[0]["name"],
                        textStyle: {
                            color: '#87CEFA', //颜色
                        },
                        top: '20px',
                        x: 'center'
                    },
                    
                    dataZoom: [
                        {
                            type: 'inside',
                            xAxisIndex: [0],
                            start: 0,
                            end: 100
                        }
                    ],
                    
                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: 'top',
                        textStyle: { //图例文字的样式
                            color: '#87CEFA',
                        },
                        data: legendData,
                        selected:legendData_selected,
                        color: 'white'
                    },

                    //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                    grid: {
                        top: '20%', // 等价于 y: '16%'
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },

                    // 提示框
                    tooltip: {
                        trigger: 'axis'
                    },

                    toolbox:{
                        feature: {
                            saveAsImage: { type:'jpeg'},
                            dataView: {},
                            magicType: {
                                type: ['line', 'bar'],
                                option: {
                                    // 类型切换时，下述配置项将被merge到对应类型的图表 series 中
                                    line: { smooth: true },
                                    bar: { label: { show: true } }
                                }
                            },
                        }
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 5 //设置X轴数据间隔几个显示一个，为0表示都显示
                           
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
                        data: timeLineData,
                        axisLine: {
                            symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                            symbolOffset: [0, 8], //箭头段移动8个像素
                            lineStyle: {
                                // 设置x轴颜色
                                color: '#87CEFA'
                            }
                        }
                    },
                    yAxis: [{
                        name: '指标(μg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine :{    //网格线
                            lineStyle:{
                                type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show:true //隐藏或显示
                        
                        },
                    },{
                        name: 'CO(mg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#8700FA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine :{    //网格线
                            lineStyle:{
                                type:'solid',    //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show:true //隐藏或显示
                        
                        },
                    }],
                    series: seriesData,
                    color: colorData
                };
                console.log(timeLineData);
                console.log(seriesData);

                //转换角标
                var newData = legendData;
                for (var i=0; i<newData.length; i++){
                    if(newData[i] == "pm25"){
                        newData[i] = "PM₂.₅";
                    }
                    if(newData[i] == "pm10"){
                        newData[i] = "PM₁₀";
                    }
                    if(newData[i] == "no"){
                        newData[i] = "NO";
                    }
                    if(newData[i] == "nox"){
                        newData[i] = "NOₓ";
                    } 
                    if(newData[i] == "no2"){
                        newData[i] = "NO₂";
                    } 
                    if(newData[i] == "co"){
                        newData[i] = "CO";
                    } 
                    if(newData[i] == "so2"){
                        newData[i] = "SO₂";
                    } 
                    if(newData[i] == "o3"){
                        newData[i] = "O₃";
                    } 
                    if(newData[i] == "o31"){
                        newData[i] = "O₃₁";
                    } 
                    if(newData[i] == "o38"){
                        newData[i] = "O₃₈";
                    } 
                    if(newData[i] == "aqi"){
                        newData[i] = "AQI";
                    } 
                    if(newData[i] == "tsp"){
                        newData[i] = "TSP";
                    }
                };

                options.legend.data = newData;
                options.series.forEach((item,index)=>{item.name = legendData[index]});

                //转换options下面selected里的角标
                options.legend.selected['PM₂.₅'] = options.legend.selected['pm25'] ;
                delete options.legend.selected['pm25'];
                options.legend.selected['PM₁₀'] = options.legend.selected['pm10'] ;
                delete options.legend.selected['pm10'];
                options.legend.selected['NO'] = options.legend.selected['no'] ;
                delete options.legend.selected['no'];
                options.legend.selected['NOₓ'] = options.legend.selected['nox'] ;
                delete options.legend.selected['nox'];
                options.legend.selected['NO₂'] = options.legend.selected['no2'] ;
                delete options.legend.selected['no2'];
                options.legend.selected['CO'] = options.legend.selected['co'] ;
                delete options.legend.selected['co'];
                options.legend.selected['SO₂'] = options.legend.selected['so2'] ;
                delete options.legend.selected['so2'];
                options.legend.selected['O₃'] = options.legend.selected['o3'] ;
                delete options.legend.selected['o3'];
                options.legend.selected['O₃₁'] = options.legend.selected['o31'] ;
                delete options.legend.selected['o31'];
             options.legend.selected['O₃₈'] = options.legend.selected['o38'] ;
                delete options.legend.selected['o38'];
                options.legend.selected['AQI'] = options.legend.selected['aqi'] ;
                delete options.legend.selected['aqi'];
                options.legend.selected['TSP'] = options.legend.selected['tsp'] ;
                delete options.legend.selected['tsp'];
            
                
                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
                    myCharts.resize();                
                };
                
                // 还原角标
                var RestoreData = newData;
                for (var i=0; i<RestoreData.length; i++){
                    if(RestoreData[i] == "PM₂.₅"){
                        RestoreData[i] = "pm25";
                    }
                    if(RestoreData[i] == "PM₁₀"){
                        RestoreData[i] = "pm10";
                    }
                    if(RestoreData[i] == "NO"){
                        RestoreData[i] = "no";
                    }
                    if(RestoreData[i] == "NOₓ"){
                        RestoreData[i] = "nox";
                    } 
                    if(RestoreData[i] == "NO₂"){
                        RestoreData[i] = "no2";
                    } 
                    if(RestoreData[i] == "CO"){
                        RestoreData[i] = "co";
                    } 
                    if(RestoreData[i] == "SO₂"){
                        RestoreData[i] = "so2";
                    } 
                    if(RestoreData[i] == "O₃"){
                        RestoreData[i] = "o3";
                    } 
                    if(RestoreData[i] == "O₃₁"){
                        RestoreData[i] = "o31";
                    } 
                    if(RestoreData[i] == "O₃₈"){
                        RestoreData[i] = "o38";
                    } 
                    if(RestoreData[i] == "AQI"){
                        RestoreData[i] = "aqi";
                    } 
                    if(RestoreData[i] == "TSP"){
                        RestoreData[i] = "tsp";
                    }
                };
 
                options.legend.data = RestoreData;
                options.series.forEach((item,index)=>{item.name = legendData[index]});

            }else{
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
    console.log(tmpQueryParams)
    echart_show(backend_url,tmpQueryParams)
}

function DatePicker(beginSelector, endSelector) {

    var dateFormat = tmpQueryParams.queryDataType=='day'?'yyyy-mm-dd':'yyyy-mm-dd hh:00:00';
    var dateFormat = tmpQueryParams.datatype == 'day' ? 'yyyy-mm-dd' : 'yyyy-mm-dd hh:00:00';

    var miniView = tmpQueryParams.queryDataType=='day'?'month':'day';
    $(beginSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
    var miniView = tmpQueryParams.datatype == 'day' ? 'month' : 'day';
    $(beginSelector).datetimepicker({
        bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
@@ -369,20 +40,19 @@
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1,  //如果为true, 高亮当前日期
        todayHighlight: 1, //如果为true, 高亮当前日期
        endDate: new Date()
      }).on('changeDate', function (ev) {
    }).on('changeDate', function (ev) {
        if (ev.date) {
          $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
            $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
          $(endSelector).datetimepicker('setStartDate', null);
            $(endSelector).datetimepicker('setStartDate', null);
        }
        console.log($(beginSelector).val())
        tmpQueryParams.appDateHourStart = $(beginSelector).val();
      })
    $(endSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
    })
    $(endSelector).datetimepicker({
        bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
@@ -392,39 +62,36 @@
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1,  //如果为true, 高亮当前日期
        todayHighlight: 1, //如果为true, 高亮当前日期
        endDate: new Date()
      }).on('changeDate', function (ev) {
    }).on('changeDate', function (ev) {
        console.log($(endSelector).val())
        tmpQueryParams.appDateHourEnd = $(endSelector).val();
      })
  }
    })
}

function reloadData(params) {

    tmpQueryParams = params;

    DatePicker("#appDateHourStart", '#appDateHourEnd');
    $("#appDateHourStart").datetimepicker("setDate", new Date(params.appDateHourStart));
    $('#appDateHourEnd').datetimepicker('setDate', new Date(params.appDateHourEnd));
    //loadLineChartbySiteid(params);
    queryEchartDataByTimePeriod();
   if(tmpQueryParams.layerid == 3001 || tmpQueryParams.layerid == 3002 || tmpQueryParams.layerid == 3003 || tmpQueryParams.layerid == 3000){
    loadDetailedInfobyGrid(params) 
   }else{
    loadDetailedInfobySiteid(params);
   }
   

    if (tmpQueryParams.layerid == 3001 || tmpQueryParams.layerid == 3002 || tmpQueryParams.layerid == 3003 || tmpQueryParams.layerid == 3000) {
        loadDetailedInfobyGrid(params)
    } else {
        loadDetailedInfobySiteid(params);
    }
}

function loadDetailedInfobySiteid(params) {
    $("#indexTb").empty();
    var backend_url = params.nodejs_url_predix+"dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
@@ -438,30 +105,30 @@
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>3</td><td>时间</td><td>" + topObj.datatime + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>4</td><td>经度</td><td>" + topObj.lon + "</td><td>/</td></tr>"
                    $("#indexTb").append(_tr);
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>5</td><td>纬度</td><td>" + topObj.lat + "</td><td>/</td></tr>"
                    $("#indexTb").append(_tr);
                $("#indexTb").append(_tr);
                var tmp_index = 6;
                for(var p in topObj){//遍历json对象的每个key/value对,p为key
                    if (p!=='code' && p!=='name' && p!=='datatime' && p!=='lon' && p!=='lat'){
                        _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>"+tmp_index+"</td><td>"+p+"</td><td>" + topObj[p] + "</td><td>"+getUnitByqindex(p)+"</td></tr>"
                        $("#indexTb").append(_tr);   
                        tmp_index++;      
                    }                   
                  };
                  $("#indexTb").find("td:contains(pm25)").text("PM₂.₅");
                  $("#indexTb").find("td:contains(pm10)").text("PM₁₀");
                  $("#indexTb").find("td:contains(no2)").text("NO₂");
                  $("#indexTb").find("td:contains(co)").text("CO");
                  $("#indexTb").find("td:contains(nox)").text("NOₓ");
                  $("#indexTb").find("td:contains(so2)").text("SO₂");
                  $("#indexTb").find("td:contains(o31)").text("O₃₁");
                  $("#indexTb").find("td:contains(o38)").text("O₃₈");
                  $("#indexTb").find("td:contains(o3)").text("O₃");
                  $("#indexTb").find("td:contains(no)").text("NO");
                  $("#indexTb").find("td:contains(aqi)").text("AQI");
                  $("#indexTb").find("td:contains(tsp)").text("TSP");
            }else{
                for (var p in topObj) { //遍历json对象的每个key/value对,p为key
                    if (p !== 'code' && p !== 'name' && p !== 'datatime' && p !== 'lon' && p !== 'lat') {
                        _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>" + tmp_index + "</td><td>" + p + "</td><td>" + topObj[p] + "</td><td>" + getUnitByqindex(p) + "</td></tr>"
                        $("#indexTb").append(_tr);
                        tmp_index++;
                    }
                };
                $("#indexTb").find("td:contains(pm25)").text("PM₂.₅");
                $("#indexTb").find("td:contains(pm10)").text("PM₁₀");
                $("#indexTb").find("td:contains(no2)").text("NO₂");
                $("#indexTb").find("td:contains(co)").text("CO");
                $("#indexTb").find("td:contains(nox)").text("NOₓ");
                $("#indexTb").find("td:contains(so2)").text("SO₂");
                $("#indexTb").find("td:contains(o31)").text("O₃₁");
                $("#indexTb").find("td:contains(o38)").text("O₃₈");
                $("#indexTb").find("td:contains(o3)").text("O₃");
                $("#indexTb").find("td:contains(no)").text("NO");
                $("#indexTb").find("td:contains(aqi)").text("AQI");
                $("#indexTb").find("td:contains(tsp)").text("TSP");
            } else {
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
@@ -474,25 +141,25 @@
function loadDetailedInfobyGrid(params) {
    $("#indexTb").empty();
    $("#headInfo").empty();
    var backend_url = params.nodejs_url_predix+"dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            tableData = data.data.result;
            var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' class='headerInfo'><td>" + '序' + "</td><td onclick='locateAndShowDetail(this)'>" + "road_id" + "</td><td>" + "道路路段(区-街道)" + "</td><td>"+ "PM<sub>2.5</sub>"+ "</td><td>" + "PM<sub>10</sub>"+ "</td><td>" + "NO"+ "</td><td>" + "NO<sub>x</sub>"+ "</td><td>" + "NO<sub>2</sub>"+ "</td><td>" + "CO" +"</td></tr>"
            var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' class='headerInfo'><td>" + '序' + "</td><td onclick='locateAndShowDetail(this)'>" + "road_id" + "</td><td>" + "道路路段(区-街道)" + "</td><td>" + "PM<sub>2.5</sub>" + "</td><td>" + "PM<sub>10</sub>" + "</td><td>" + "NO" + "</td><td>" + "NO<sub>x</sub>" + "</td><td>" + "NO<sub>2</sub>" + "</td><td>" + "CO" + "</td></tr>"
            $("#indexTb").append(_tr);

            if (tableData != null && tableData.length > 0) {
                for (var i = 0; length = tableData.length, i < length; i++) {
                    var j = i + 1;
                    var topObj = tableData[i]; 
                    var topObj = tableData[i];
                    topObj = changeNullAndundefinedToEmpty(topObj);
                    var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.road_id + "</td><td>" + topObj.name + "</td><td>"+ topObj.pm25 + "</td><td>" + topObj.pm10 + "</td><td>" + topObj.no + "</td><td>" + topObj.nox + "</td><td>" + topObj.no2 + "</td><td>" + topObj.co +"</td></tr>"
                    var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.road_id + "</td><td>" + topObj.name + "</td><td>" + topObj.pm25 + "</td><td>" + topObj.pm10 + "</td><td>" + topObj.no + "</td><td>" + topObj.nox + "</td><td>" + topObj.no2 + "</td><td>" + topObj.co + "</td></tr>"
                    $("#indexTb").append(_tr);
                }
            } else {
@@ -502,20 +169,22 @@
        error: function (request, textStatus) {
            haoutil.msg("系统后台错误，请联系管理员处理！");
        }
         

    });
}
function getUnitByqindex(qindex){

function getUnitByqindex(qindex) {
    qindex = qindex.toUpperCase();
    if (qindex=='PM25' || qindex=='PM10' || qindex=='NO'|| qindex=='NO2'|| qindex=='NOX' || qindex=='SO2' || qindex == "O31" || qindex == "O38"){
    if (qindex == 'PM25' || qindex == 'PM10' || qindex == 'NO' || qindex == 'NO2' || qindex == 'NOX' || qindex == 'SO2' || qindex == "O31" || qindex == "O38" || qindex == "O3") {
        return 'μg/m³';
    }else if (qindex=='CO'){
    } else if (qindex == 'CO' || qindex == "TSP") {
        return 'mg/m³';
    }else {
    } else if(qindex == "speed"){
        return 'km/h';
    }else{
        return '/';
    }
}


function over(obj) {
    $('#indexTb tr').removeClass("over_tr");
@@ -533,18 +202,32 @@
    }
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_history&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime + "&count=10";
    // all 1006xx layer has the same legend ！！
    var layerid = params.layerid+"";
    echart_show(backend_url, params.datatype,params)
}

    var legendData = all_layer_legends[layerid.substring(0,4)];

function shortenLegendTimeString(datatype, full_time_str) {
    if (datatype == 'hour') {
        return full_time_str.substring(8, 10) + '日' + "\n" + full_time_str.substring(11, 13) + '时';
    } else if (datatype == 'day') {
        return full_time_str.substring(8, 10) + '日';
    } else {
        return full_time_str;
    }
}

function echart_show(backend_url,params) {
    var layerid = params.layerid + "";
    var legendData = all_layer_legends[layerid.substring(0, 4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element==params.selected_qindex.toLowerCase()){
            legendData_selected[element] =true;
        }else{
            legendData_selected[element] =false;
        if (element == params.selected_qindex.toLowerCase()) {
            legendData_selected[element] = true;
        } else {
            legendData_selected[element] = false;
        }
    });
    

    if (legendData == null || legendData.length < 1) {
        return;
    }
@@ -566,7 +249,7 @@
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
@@ -581,8 +264,8 @@
                    sdata.data = [];
                    sdata.type = 'line';
                    sdata.symbolSize = 8;
                    if (singleLegend.toUpperCase()=='CO'){
                        sdata.yAxisIndex =1;
                    if (singleLegend.toUpperCase() == 'CO') {
                        sdata.yAxisIndex = 1;
                    }
                    sdata.itemStyle = myItemStyle;
                    seriesObj[singleLegend] = sdata;
@@ -601,7 +284,6 @@
                    var mySeries = seriesObj[singleLegend];
                    seriesData.push(mySeries);
                }

                options = {
                    title: {
                        text: tableData[0]["name"],
@@ -611,15 +293,14 @@
                        top: '20px',
                        x: 'center'
                    },
                    dataZoom: [ 
                        {
                            type: 'inside',
                            xAxisIndex: [0],
                            start: 30,
                            end: 50
                        }
                    ],
                    

                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    }],

                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
@@ -631,7 +312,7 @@
                            color: '#87CEFA',
                        },
                        data: legendData,
                        selected:legendData_selected,
                        selected: legendData_selected,
                        color: 'white'
                    },

@@ -649,31 +330,35 @@
                        trigger: 'axis'
                    },

                    toolbox:{
                    toolbox: {
                        feature: {
                            saveAsImage: { type:'jpeg'},
                            saveAsImage: {
                                type: 'jpeg'
                            },
                            dataView: {},
                            magicType: {
                                type: ['line', 'bar'],
                                option: {
                                    // 类型切换时，下述配置项将被merge到对应类型的图表 series 中
                                    line: { smooth: true },
                                    bar: { label: { show: true } }
                                    line: {
                                        smooth: true
                                    },
                                    bar: {
                                        label: {
                                            show: true
                                        }
                                    }
                                }
                            },
                        }
                    },
                    xAxis: {
                        show :true,
                        name: '时间',
                        type: 'category',
                        // 设置X轴数据旋转倾斜
                        interval: 5, //设置X轴数据间隔几个显示一个，为0表示都显示
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 5 //设置X轴数据间隔几个显示一个，为0表示都显示
                            // formatter:  (value)=> {
                            //     return value.substring(0,2)+'日'+"\n"+value.substring(3,5)+'时';
                            // }
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
@@ -698,15 +383,15 @@
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine :{    //网格线
                            lineStyle:{
                                type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                        splitLine: { //网格线
                            lineStyle: {
                                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show:true //隐藏或显示
                        
                        },                       
                    },{
                            show: true //隐藏或显示

                        },
                    }, {
                        name: 'CO(mg/m³)',
                        type: 'value',
                        axisLine: {
@@ -717,25 +402,146 @@
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine :{    //网格线
                            lineStyle:{
                                type:'solid',    //设置网格线类型 dotted：虚线   solid:实线
                        splitLine: { //网格线
                            lineStyle: {
                                type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show:true //隐藏或显示
                        
                            show: true //隐藏或显示

                        },
                    }],
                    series: seriesData,
                    color: colorData
                };
                // console.log(timeLineData);
                // console.log(seriesData);

                //转换角标
                var newData = legendData;
                for (var i = 0; i < newData.length; i++) {
                    if (newData[i] == "pm25") {
                        newData[i] = "PM₂.₅";
                    }
                    if (newData[i] == "pm10") {
                        newData[i] = "PM₁₀";
                    }
                    if (newData[i] == "no") {
                        newData[i] = "NO";
                    }
                    if (newData[i] == "nox") {
                        newData[i] = "NOₓ";
                    }
                    if (newData[i] == "no2") {
                        newData[i] = "NO₂";
                    }
                    if (newData[i] == "co") {
                        newData[i] = "CO";
                    }
                    if (newData[i] == "so2") {
                        newData[i] = "SO₂";
                    }
                    if (newData[i] == "o3") {
                        newData[i] = "O₃";
                    }
                    if (newData[i] == "o31") {
                        newData[i] = "O₃₁";
                    }
                    if (newData[i] == "o38") {
                        newData[i] = "O₃₈";
                    }
                    if (newData[i] == "aqi") {
                        newData[i] = "AQI";
                    }
                    if (newData[i] == "tsp") {
                        newData[i] = "TSP";
                    }
                };

                options.legend.data = newData;
                options.series.forEach((item, index) => {
                    item.name = legendData[index]
                });

                //转换options下面selected里的角标
                options.legend.selected['PM₂.₅'] = options.legend.selected['pm25'];
                delete options.legend.selected['pm25'];
                options.legend.selected['PM₁₀'] = options.legend.selected['pm10'];
                delete options.legend.selected['pm10'];
                options.legend.selected['NO'] = options.legend.selected['no'];
                delete options.legend.selected['no'];
                options.legend.selected['NOₓ'] = options.legend.selected['nox'];
                delete options.legend.selected['nox'];
                options.legend.selected['NO₂'] = options.legend.selected['no2'];
                delete options.legend.selected['no2'];
                options.legend.selected['CO'] = options.legend.selected['co'];
                delete options.legend.selected['co'];
                options.legend.selected['SO₂'] = options.legend.selected['so2'];
                delete options.legend.selected['so2'];
                options.legend.selected['O₃'] = options.legend.selected['o3'];
                delete options.legend.selected['o3'];
                options.legend.selected['O₃₁'] = options.legend.selected['o31'];
                delete options.legend.selected['o31'];
                options.legend.selected['O₃₈'] = options.legend.selected['o38'];
                delete options.legend.selected['o38'];
                options.legend.selected['AQI'] = options.legend.selected['aqi'];
                delete options.legend.selected['aqi'];
                options.legend.selected['TSP'] = options.legend.selected['tsp'];
                delete options.legend.selected['tsp'];


                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
                    myCharts.resize();                
                }
            }else{
                window.onresize = function () {
                    myCharts.resize();
                };

                // 还原角标
                var RestoreData = newData;
                for (var i = 0; i < RestoreData.length; i++) {
                    if (RestoreData[i] == "PM₂.₅") {
                        RestoreData[i] = "pm25";
                    }
                    if (RestoreData[i] == "PM₁₀") {
                        RestoreData[i] = "pm10";
                    }
                    if (RestoreData[i] == "NO") {
                        RestoreData[i] = "no";
                    }
                    if (RestoreData[i] == "NOₓ") {
                        RestoreData[i] = "nox";
                    }
                    if (RestoreData[i] == "NO₂") {
                        RestoreData[i] = "no2";
                    }
                    if (RestoreData[i] == "CO") {
                        RestoreData[i] = "co";
                    }
                    if (RestoreData[i] == "SO₂") {
                        RestoreData[i] = "so2";
                    }
                    if (RestoreData[i] == "O₃") {
                        RestoreData[i] = "o3";
                    }
                    if (RestoreData[i] == "O₃₁") {
                        RestoreData[i] = "o31";
                    }
                    if (RestoreData[i] == "O₃₈") {
                        RestoreData[i] = "o38";
                    }
                    if (RestoreData[i] == "AQI") {
                        RestoreData[i] = "aqi";
                    }
                    if (RestoreData[i] == "TSP") {
                        RestoreData[i] = "tsp";
                    }
                };

                options.legend.data = RestoreData;
                options.series.forEach((item, index) => {
                    item.name = legendData[index]
                });
            } else {
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
@@ -743,20 +549,4 @@
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
}


function shortenLegendTimeString(datatype,full_time_str) {

    if (datatype == 'hour') {
        
        return full_time_str.substring(8, 10)+'日'+"\n"+full_time_str.substring(11,13)+'时';

    } else if (datatype == 'day') {
        return full_time_str.substring(8, 10) +'日';

    } else {
        return full_time_str;
    }

}