From d2332b7fbcfc618506514a277fe1b17e134eb8c5 Mon Sep 17 00:00:00 2001
From: qinbo <qinbo@shsening.com>
Date: 星期二, 15 二月 2022 15:37:34 +0800
Subject: [PATCH] echart bug fix
---
widgetsTS/widget_detail/view.js | 714 +++++++++++++++++++++--------------------------------------
1 files changed, 252 insertions(+), 462 deletions(-)
diff --git a/widgetsTS/widget_detail/view.js b/widgetsTS/widget_detail/view.js
index 52315ad..2826ee0 100644
--- a/widgetsTS/widget_detail/view.js
+++ b/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锛�
- x: 'center',
- // y 璁剧疆鍨傜洿瀹夋斁浣嶇疆锛岄粯璁ゅ叏鍥鹃《绔紝鍙�夊�硷細'top' 娄 'bottom' 娄 'center' 娄 {number}锛坹鍧愭爣锛屽崟浣峱x锛�
- y: 'top',
- textStyle: { //鍥句緥鏂囧瓧鐨勬牱寮�
- color: '#87CEFA',
- },
- data: legendData,
- selected:legendData_selected,
- color: 'white'
- },
-
- // 鍥捐〃璺濊竟妗嗙殑璺濈,鍙�夊�硷細'鐧惧垎姣�'娄 {number}锛堝崟浣峱x锛�
- 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: {
- // 绫诲瀷鍒囨崲鏃讹紝涓嬭堪閰嶇疆椤瑰皢琚玬erge鍒板搴旂被鍨嬬殑鍥捐〃 series 涓�
- line: { smooth: true },
- bar: { label: { show: true } }
- }
- },
- }
- },
- xAxis: {
- name: '鏃堕棿',
- type: 'category',
- // 璁剧疆X杞存暟鎹棆杞�炬枩
- axisLabel: {
- color: '#87CEFA', //鍧愭爣鐨勫瓧浣撻鑹�
- interval: 5 //璁剧疆X杞存暟鎹棿闅斿嚑涓樉绀轰竴涓紝涓�0琛ㄧず閮芥樉绀�
-
- },
- // boundaryGap鍊间负false鐨勬椂鍊欙紝鎶樼嚎绗竴涓偣鍦▂杞翠笂
- 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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
+ var miniView = tmpQueryParams.datatype == 'day' ? 'month' : 'day';
+ $(beginSelector).datetimepicker({
+ bootcssVer: 3, //bootstrap-datetimepicker锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
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, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
+ todayHighlight: 1, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
+ })
+ $(endSelector).datetimepicker({
+ bootcssVer: 3, //bootstrap-datetimepicker锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
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, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
+ todayHighlight: 1, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
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瀵硅薄鐨勬瘡涓猭ey/value瀵�,p涓簁ey
- 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瀵硅薄鐨勬瘡涓猭ey/value瀵�,p涓簁ey
+ 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: {
// 绫诲瀷鍒囨崲鏃讹紝涓嬭堪閰嶇疆椤瑰皢琚玬erge鍒板搴旂被鍨嬬殑鍥捐〃 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鐨勬椂鍊欙紝鎶樼嚎绗竴涓偣鍦▂杞翠笂
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;
- }
-
}
\ No newline at end of file
--
Gitblit v1.9.1