/** * 天气图表 * Created by Administrator on 2017/11/2. */ define(['meteoDir/other/echarts'], function (ec) { meteo.c.chart = { chart1: null, count: 0, hourDay: null, color_TT: '#af381e', color_PR: '#1b37ff', color_RH: '#49a12d', color_WS: '#ffc937', color_VIS: '#1687ff', color_RN: '#006F00', color_TT_D: '#af381e', color_TT_N: '#2d51ff', color_RN_D: '#49a12d', color_RN_N: '#1d6f37', getChart: function (id) { return ec.init(document.getElementById(id)); }, getChartOption: function (json, title) { // meteo.c.chart.count = json.length; // 整理数据 var wth = []; var tt = []; var pr = []; var rh = []; var ws = []; var wd = []; var vis = []; var rn = []; var time = []; var ot = null; var prMax = 0; var prMin = 9999; var rnMin = 9999; for (var i = 0; i < json.length; i++) { // wth.push([json[i].wth, i]); wth.push([0, i]); tt.push(json[i].tt); pr.push(json[i].pr); prMax = prMax > json[i].pr ? prMax : json[i].pr; prMin = prMin < json[i].pr ? prMin : json[i].pr; rh.push(json[i].rh); ws.push(json[i].ws); wd.push(json[i].wd); if (json[i].vis > 100) { vis.push(((json[i].vis / 1000) >> 0)); } else { vis.push(json[i].vis); } rnMin = rnMin < json[i].rn ? rnMin : json[i].rn; rn.push(json[i].rn); if (!ot || ot > json[i].ldate.split("/")[1]) { time.push(json[i].ldate.split("/")[0] + "日" + json[i].ldate.split("/")[1] + "时"); } else { time.push(json[i].ldate.split("/")[1] + "时"); } ot = json[i].ldate.split("/")[1]; } if (rnMin == 0 || rnMin == 9999 || rnMin == 0.1) rnMin = 10; prMax = 10 - prMax % 10 + prMax; prMin = prMin - prMin % 10; // var ipr = prMax - prMin; // if (ipr < 12) prMin = prMin - (12 - ipr); //echart数据 var option = { // title: { // text: title // }, tooltip: { show: false }, grid: { // left: '20%', left: '10', right: '10', top: '100', bottom: '40' }, // toolbox: { //右上角功能 // feature: { // dataView: {show: true, readOnly: false}, // restore: {show: true}, // saveAsImage: {show: true} // } // }, legend: { data: ['气温(℃)', '海平面气压(hPa)', '湿度(%)', '风速(m/s)', '能见度(km)', '降水(mm)'] // data: ['气温', '海平面气压', '湿度', '风速(m/s)', '能见度', '降水'] }, xAxis: { data: time, axisLabel: { interval: 0 }, axisTick: { alignWithLabel: true }, splitLine: { show: true } }, yAxis: [{ // name: "", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }, { // name: "", max: prMax, min: prMin, axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }, { // name: "", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }, { // name: "", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }, { // name: "", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }, { // name: "", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, // nameTextStyle: { // color: meteo.c.chart.color_TT // }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }], series: [ { name: '气温(℃)', type: 'line', label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_TT, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_TT, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_TT } }, data: tt, }, { name: '海平面气压(hPa)', type: 'line', yAxisIndex: 1, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_PR, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_PR, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_PR } }, data: pr, }, { name: '湿度(%)', type: 'line', yAxisIndex: 2, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_RH, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_RH, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_RH } }, data: rh, }, { name: '风速(m/s)', type: 'line', yAxisIndex: 3, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_WS, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_WS, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_WS } }, data: ws, }, { name: '能见度(km)', type: 'line', yAxisIndex: 4, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_VIS, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_VIS, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_VIS } }, data: vis, }, { name: '降水(mm)', type: 'bar', yAxisIndex: 5, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_RN, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_RN, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_RN } }, data: rn, }, { name: '天气现象', type: 'custom', renderItem: function (parma, api) { // 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。 // (但是注意,并不一定是按照 data 的顺序调用) // 这里进行一些处理,例如,坐标转换。 // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var url = api.value(0); if (!url) return; var index = api.value(1); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。 // 这里返回为这个 dataItem 构建的图形元素定义。 var coordSys = parma.coordSys; var width = coordSys.x; var height = coordSys.y; var left = coordSys.x; var right = coordSys.width + coordSys.x; // var tr = (right - left) / meteo.c.chart.count; var tr = (right - left) / parma.dataInsideLength; // var tr = coordSys.width / 8; var positionx = width + (width + tr - width) / 2 + tr * index; // var ix = (width - height) / 2 var wthp = meteo.c.wth.weatherId[url]; if (url < 10) url = "0" + url; url = 'images/meteo/weatherImage/cww' + url + '.png'; return { type: 'group', children: [{ type: 'image', style: { image: url, x: -20, y: -20, width: 40, height: 40 }, position: [positionx, 60] }, { type: 'text', style: { text: wthp, textFont: api.font({fontSize: 14}), fill: 'black', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 40] }] } }, data: wth } ] } return option; }, /* *地面站-逐时 */ getSurfHourChartOption: function (json, title) { meteo.c.chart.hourDay = null; // 整理数据 var wth = [];//天气现象 var tt = []; //温度 var pr = []; //气压 var rh = []; //湿度 var ws = []; //风速 var wd = []; //风向 var vis = []; //能见度 var rn = []; //降水量 var time = []; //时间 var ot = null; // var prMax = 0; var prMin = 9999; var rnMin = 9999; var count; for (var i = 0; i < json.length; i++) { count = json.length - 1; // wth.push([json[i].wth, i]); wth.push([json[i].wth, i, json[i].ldate, json[i].tt, json[i].ws, json[i].wd]); tt.push(json[i].tt); pr.push(json[i].pr); prMax = prMax > json[i].pr ? prMax : json[i].pr; prMin = prMin < json[i].pr ? prMin : json[i].pr; rh.push(json[i].rh); ws.push(json[i].ws); wd.push(json[i].wd); if (json[i].vis > 100) { vis.push(((json[i].vis / 1000) >> 0)); } else { vis.push(json[i].vis); } rnMin = rnMin < json[i].rn ? rnMin : json[i].rn; rn.push(json[i].rn); if (!ot || ot > json[i].ldate.split("/")[1]) { time.push(json[i].ldate.split("/")[0] + "日" + json[i].ldate.split("/")[1] + "时"); } else { time.push(json[i].ldate.split("/")[1] + "时"); } ot = json[i].ldate.split("/")[1]; } if (rnMin == 0 || rnMin == 9999 || rnMin == 0.1) rnMin = 10; //echart数据 var option = { // title: { // text: title // }, tooltip: { show: false }, grid: { // left: '20%', left: '10', right: '10', top: '30', bottom: '160' }, xAxis: { data: time, axisLabel: { interval: 0 }, splitLine: { show: true }, show: false }, yAxis: [ { show: false, name: "气温", axisLabel: { formatter: '{value}\n', inseide: true, color: meteo.c.chart.color_TT }, splitLine: { show: true } }], series: [ { name: '气温(℃)', type: 'line', // showSymbol:false, label: { normal: { show: true, formatter: '{c}℃', color: 'rgba(88,160,253,1)' } }, smooth: true, symbolSize: 8, hoverAnimation: true, /*areaStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(88,160,253,1)' }, { offset: 1, color: 'rgba(88,160,253,0)' }] } } },*/ lineStyle: { normal: { color: 'rgba(88,160,253,1)' } }, itemStyle: { normal: { color: 'rgba(88,160,253,1)' } }, data: tt, }, { name: '天气现象', type: 'custom', data: wth, renderItem: function (parma, api) { // 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。 // (但是注意,并不一定是按照 data 的顺序调用) // 这里进行一些处理,例如,坐标转换。 // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var url = api.value(0); var index = api.value(1); var ldate = api.value(2); var tt = api.value(3) + "℃"; var ws = getWsToSpeedLevel(api.value(4)); var wd = getWdImageUrl(api.value(5)); var date = ""; var day = ""; var hour; if (ldate != null) { date = ldate.split("/")[0] + "日" + ldate.split("/")[1] + "时"; day = ldate.split("/")[0]; hour = ldate.split("/")[1]; } else { date = "缺测"; } var rcolor = '#ffffff'; if (day != meteo.c.chart.hourDay) { rcolor = "#f1f1f1" } meteo.c.chart.hourDay = ldate.split('/')[0]; // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。 // 这里返回为这个 dataItem 构建的图形元素定义。 var coordSys = parma.coordSys; var width = coordSys.x; var height = coordSys.y; var left = coordSys.x; var right = coordSys.width + coordSys.x; var tr = (right - left) / parma.dataInsideLength; var positionx = width + tr / 2 + tr * index; var wthp; var dayAndNightImageId = meteo.c.wth.dayAndNightImageId; if (url != null && url != "999999") { wthp = meteo.c.wth.weatherSurfId[url]; // if (meteo.c.chart.arrayContains(dayAndNightImageId, url) && (hour == '20' || hour == '23' || hour == '02')) { // if (url < 10) url = "0" + url; // url = 'images/meteo/weatherIcon/cww' + url + 'n.png'; // } else { if (url < 10) url = "0" + url; url = 'images/meteo/weather_surf/cww' + url + '.png'; // } } else { url = "缺测"; wthp = "缺测"; } var wdUrl; if (wd != null) { wdUrl = 'images/meteo/windD/windd' + wd + '.png'; } var x1 = positionx + tr / 2; var y1 = 130; var x2 = positionx + tr / 2; var y2 = 232; if (index == count) { x1 = positionx - tr / 2; x2 = positionx - tr / 2; } var rx = positionx - tr / 2; var ry = 5; return { type: 'group', children: [ { type: 'rect', shape: { x: rx, y: ry, width: tr, height: 235 }, style: { fill: rcolor } }, { type: 'text', style: { text: date, textFont: api.font({fontSize: 12}), fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 140] }, { type: 'image', style: { image: url, x: -20 - 5, y: -20, width: 50, height: 50 }, position: [positionx, 170] }, { type: 'text', style: { text: wthp, textFont: api.font({fontSize: 14}), fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 210] }, { type: 'image', style: { image: wdUrl, x: -20 - 2, y: -20 + 5, width: 16, height: 16 }, position: [positionx, 230] }, { type: 'text', style: { text: ws, textFont: api.font({fontSize: 10}), fill: '#71B4F8', fontSize: 10, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx + 2, 230] }, { type: 'line', shape: { x1: x1, y1: y1, x2: x2, y2: y2 }, style: { stroke: '#E4EDF6' } } ] } } } ] } return option; }, /* *地面站-七天 */ getSurfDaysChartOption: function (json, title) { // 整理数据 var wth = [];//天气现象 var time = []; //时间 var ot = null; // var count; for (var i = 0; i < json.length; i++) { count = json.length - 1; wth.push([json[i].wth, i, json[i].ldate, json[i].tt, json[i].ws, json[i].wd]); if (!ot || ot > json[i].ldate.split("/")[1]) { time.push(json[i].ldate.split("/")[0] + "日" + json[i].ldate.split("/")[1] + "时"); } else { time.push(json[i].ldate.split("/")[1] + "时"); } } //echart数据 var option = { tooltip: { show: false }, grid: { // left: '20%', left: '10', right: '10', top: '100', bottom: '40' }, xAxis: { data: time, axisLabel: { interval: 0 }, splitLine: { show: true }, show: false }, yAxis: [ { show: false, name: "气温", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false } }], series: [ { name: '天气现象', type: 'custom', data: wth, renderItem: function (parma, api) { // 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。 // (但是注意,并不一定是按照 data 的顺序调用) // 这里进行一些处理,例如,坐标转换。 // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var url = api.value(0); // if (!url) return; var index = api.value(1); var ldate = api.value(2); var tt = api.value(3) + "℃"; var ws = getWsToSpeedLevel(api.value(4)); var wd = getWdImageUrl(api.value(5)); var date = ""; var hour; if (ldate != null) { date = ldate.split("/")[0] + "日" + ldate.split("/")[1] + "时"; hour = ldate.split("/")[1]; } else { date = "缺测"; } // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。 // 这里返回为这个 dataItem 构建的图形元素定义。 var coordSys = parma.coordSys; var width = coordSys.x; var height = coordSys.y; var left = coordSys.x; var right = coordSys.width + coordSys.x; var tr = (right - left) / parma.dataInsideLength; var positionx = width + tr / 2 + tr * index; var wthp = meteo.c.wth.weatherId[url]; var dayAndNightImageId = meteo.c.wth.dayAndNightImageId; if (meteo.c.chart.arrayContains(dayAndNightImageId, url) && hour == '20') { if (url < 10) url = "0" + url; url = 'images/meteo/weatherIcon/cww' + url + 'n.png'; } else { if (url < 10) url = "0" + url; url = 'images/meteo/weatherIcon/cww' + url + '.png'; } var wdUrl; if (wd != null) { wdUrl = 'images/meteo/windD/windd' + wd + '.png'; } else { } var x1 = positionx + tr / 2; var y1 = 30; var x2 = positionx + tr / 2; var y2 = 202; if (index == count) { x1 = positionx - tr / 2; x2 = positionx - tr / 2; } var rx = positionx - tr / 2; var ry = 20; var rcolor = '#ffffff'; if (ldate.split("/")[1] == "08") { rcolor = '#f1f1f1'; } return { type: 'group', children: [ { type: 'rect', shape: { x: rx, y: ry, width: tr, height: 220 }, style: { fill: rcolor } }, { type: 'text', style: { text: date, textFont: api.font({fontSize: 12}), fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 40] }, { type: 'image', style: { image: url, x: -20 - 5, y: -20, width: 50, height: 50 }, position: [positionx, 70] }, { type: 'text', style: { text: wthp, textFont: api.font({fontSize: 16}), fill: '#71B4F8', fontSize: 14, textWeight: 1, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 120] }, { type: 'text', style: { text: tt, textFont: api.font({fontSize: 30}), textWeight: 2, fontSize: 18, fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 160] }, { type: 'image', style: { image: wdUrl, x: -20 - 4, y: -20 + 5, width: 16, height: 16 }, position: [positionx, 200] }, { type: 'text', style: { text: ws, textFont: api.font({fontSize: 10}), fill: '#71B4F8', fontSize: 10, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx + 4, 200] }, { type: 'line', shape: { x1: x1, y1: y1, x2: x2, y2: y2 }, style: { stroke: '#E4EDF6' } }, ] } } } ] } return option; }, /* *全球站-七天 */ getGlobalDaysChartOption: function (json, title) { var wth = [];// var time = []; //时间 var count; for (var i = 0; i < json.length; i++) { count = json.length - 1; wth.push([i, json[i].ttDay, json[i].ttNight, json[i].wthDay, json[i].wthNight, json[i].wdDay, json[i].wdNight, json[i].wsDay, json[i].wsNight, json[i].ldate,]); } //echart数据 var option = { // title: { // text: title // }, tooltip: { show: false }, grid: { left: '10', right: '10', top: '100', bottom: '40' }, xAxis: { data: time, axisLabel: { interval: 0 }, splitLine: { show: true }, show: false }, yAxis: [ { name: "气温", axisLine: { lineStyle: { color: meteo.c.chart.color_TT } }, axisLabel: { formatter: '', color: meteo.c.chart.color_TT }, splitLine: { show: false }, show: false }], series: { name: '天气现象', type: 'custom', data: wth, renderItem: function (parma, api) { // 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。 // (但是注意,并不一定是按照 data 的顺序调用) // 这里进行一些处理,例如,坐标转换。 // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 // wth.push([i,json[i].ttDay, json[i].ttNight, json[i].wthDay, json[i].wthNight, // json[i].wdDay,json[i].wdNight,json[i].wsDay,json[i].wsNight,json[i].ldate ]); var index = api.value(0); var ttDay = api.value(1); var ttNight = api.value(2); var wthDay = api.value(3); var wthNight = api.value(4); var wdDay = getWdImageUrl(api.value(5)); var wdNight = getWdImageUrl(api.value(6)); var wsDay = getWsToSpeedLevel(api.value(7)); var wsNight = getWsToSpeedLevel(api.value(8)); var ldate = api.value(9); var tt = ""; if (ttDay != null || ttNight != null) { tt = ttNight + "~" + ttDay + "℃"; } else { tt = "缺测"; } var date = ""; if (ldate != null) { date = ldate.split("/")[0] + "日"; } else { date = "缺测"; } var dayAndNightImageId = meteo.c.wth.dayAndNightImageId; var wthDayUrl; var wthDayp; if (wthDay != null && wthDay != "999999") { wthDayp = meteo.c.wth.weatherId[wthDay]; if (wthDay < 10) wthDay = "0" + wthDay; wthDayUrl = 'images/meteo/weatherIcon/cww' + wthDay + '.png'; } else { wthDayp = "缺测"; wthDayUrl = "缺测"; } var wthNightUrl; var wthNightp; if (wthNight != null && wthNight != "999999") { wthNightp = meteo.c.wth.weatherId[wthNight]; if (meteo.c.chart.arrayContains(dayAndNightImageId, wthNight)) { if (wthNight < 10) wthNight = "0" + wthNight; wthNightUrl = 'images/meteo/weatherIcon/cww' + wthNight + 'n.png'; } else { if (wthNight < 10) wthNight = "0" + wthNight; wthNightUrl = 'images/meteo/weatherIcon/cww' + wthNight + '.png'; } } else { wthNightp = "缺测"; wthNightUrl = "缺测"; } var wdDayUrl; if (wdDay != null) { wdDayUrl = 'images/meteo/windD/windd' + wdDay + '.png'; } else { wdDayUrl = "缺测"; } var wdNightUrl; if (wdNight != null) { wdNightUrl = 'images/meteo/windD/windd' + wdNight + '.png'; } else { wdNightUrl = "缺测"; } var coordSys = parma.coordSys; var width = coordSys.x; var height = coordSys.y; var left = coordSys.x; var right = coordSys.width + coordSys.x; var tr = (right - left) / parma.dataInsideLength; var positionx = width + tr / 2 + tr * index; var x1 = positionx + tr / 2; var y1 = 30; var x2 = positionx + tr / 2; var y2 = 232; if (index == count) { x1 = positionx - tr / 2; x2 = positionx - tr / 2; } return { type: 'group', children: [ { type: 'text', style: { text: date, textFont: api.font({fontSize: 12}), fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 40] }, { type: 'image', style: { image: wthDayUrl, x: -20 - 5, y: -20, width: 50, height: 50 }, position: [positionx, 60] }, { type: 'text', style: { text: wthDayp, textFont: api.font({fontSize: 16}), fill: '#71B4F8', fontSize: 14, textWeight: 1, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 105] }, { type: 'image', style: { image: wdDayUrl, x: -20 - 4, y: -20 + 5, width: 16, height: 16 }, position: [positionx, 130] }, { type: 'text', style: { text: wsDay, textFont: api.font({fontSize: 10}), fill: '#71B4F8', fontSize: 10, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx + 4, 130] }, { type: 'text', style: { text: tt, textFont: api.font({fontSize: 14}), fill: '#71B4F8', textWeight: 2, fontSize: 18, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 160] }, { type: 'image', style: { image: wdNightUrl, x: -20 - 4, y: -20 + 5, width: 16, height: 16 }, position: [positionx, 180] }, { type: 'text', style: { text: wsNight, textFont: api.font({fontSize: 10}), fill: '#71B4F8', fontSize: 10, fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx + 4, 180] }, { type: 'text', style: { text: wthNightp, textFont: api.font({fontSize: 14}), fill: '#71B4F8', fontFamily: 'Arial', textAlign: 'center', textVerticalAlign: 'bottom' }, position: [positionx, 210] }, { type: 'image', style: { image: wthNightUrl, x: -20 - 5, y: -20, width: 50, height: 50 }, position: [positionx, 225] }, { type: 'line', shape: { x1: x1, y1: y1, x2: x2, y2: y2 }, style: { stroke: '#E4EDF6' } } ] }; } } } return option; }, getGlobalData: function (json, title) { // meteo.c.chart.count = json.length; // var chartWidth = meteo.c.chart.count * 60 + 310; // chartWidth = chartWidth < 650 ? 650 : chartWidth; // $("#" + id).css('width', chartWidth); //设置宽度 // var chart = ec.init(document.getElementById(id)); // var wth_D = []; // var wth_N = []; var tt_D = []; var tt_N = []; var rn_D = []; var rn_N = []; var time = []; var rnMax = 0; for (var i = 0; i < json.length; i++) { // wth_D.push([json[i].wth, i]); // wth_N.push([json[i].wth, i]); tt_D.push(json[i].ttDay); tt_N.push(json[i].ttNight); rnMax = rnMax > json[i].rainDay ? rnMax : json[i].rainDay; rnMax = rnMax > json[i].rainNight ? rnMax : json[i].rainNight; rn_D.push(json[i].rainDay); rn_N.push(json[i].rainNight); time.push(json[i].ldate.split("/")[0] + "日" + json[i].ldate.split("/")[1] + "时"); } if (rnMax == 0 || rnMax == 9999 || rnMax == 0.1) rnMax = 10; var option = { // title: { // text: title // }, tooltip: { show: false // show: true }, grid: { // left: '20%', // left: '130', // right: '160', top: '100', bottom: '40' }, legend: { data: ['白天气温', '夜间气温', '白天降水', '夜间降水'] }, xAxis: { data: time, axisLabel: { interval: 0 }, axisTick: { alignWithLabel: true }, splitLine: { show: true } }, yAxis: [{ name: "气温", axisLine: { lineStyle: { color: meteo.c.chart.color_TT_D } }, nameTextStyle: { color: meteo.c.chart.color_TT_D }, axisLabel: { formatter: '{value}℃', color: meteo.c.chart.color_TT_D }, splitLine: { show: false } }, { name: "降水", position: 'right', max: rnMax, axisLine: { lineStyle: { color: meteo.c.chart.color_RN_D } }, nameTextStyle: { color: meteo.c.chart.color_RN_D }, axisLabel: { formatter: '{value}mm', color: meteo.c.chart.color_RN_D }, splitLine: { show: false } }], series: [ { name: '白天气温', type: 'line', label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_TT_D, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_TT_D, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_TT_D } }, data: tt_D, }, { name: '夜间气温', type: 'line', label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_TT_N, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_TT_N, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_TT_N } }, data: tt_N, }, { name: '白天降水', type: 'bar', yAxisIndex: 1, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_RN_D, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_RN_D, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_RN_D } }, data: rn_D, }, { name: '夜间降水', type: 'bar', yAxisIndex: 1, label: { normal: { //普通文字标记 show: true, position: 'top', color: meteo.c.chart.color_RN_N, fontStyle: 'normal', fontSize: 12, } }, lineStyle: { normal: { color: meteo.c.chart.color_RN_N, width: 2, type: 'solid', } }, itemStyle: { normal: { color: meteo.c.chart.color_RN_N } }, data: rn_N, }, // { // name: '天气现象', // type: 'custom', // yAxisIndex: 2, // renderItem: function (parma, api) { // // 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。 // // (但是注意,并不一定是按照 data 的顺序调用) // // // 这里进行一些处理,例如,坐标转换。 // // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 // var url = api.value(0); // var index = api.value(1); // // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 // // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。 // // 这里返回为这个 dataItem 构建的图形元素定义。 // var coordSys = parma.coordSys; // var width = coordSys.x; // var height = coordSys.y; // var left = coordSys.x; // var right = coordSys.width + coordSys.x; // // // var tr = (right - left) / meteo.c.chart.count; // var tr = (right - left) / parma.dataInsideLength; // // var tr = coordSys.width / 8; // var positionx = width + (width + tr - width) / 2 + tr * index; // // var ix = (width - height) / 2 // var wthp = url; // if (url < 10) url = "0" + url; // url = 'images/meteo/weatherImage/cww' + url + '.png'; // // return { // type: 'group', // children: [{ // type: 'image', // style: { // image: url, // x: -20, // y: -20, // width: 40, // height: 40 // }, // position: [positionx, 60] // }, { // type: 'text', // style: { // text: wthp, // textFont: api.font({fontSize: 14}), // fill: '#f00', // textAlign: 'center', // textVerticalAlign: 'bottom' // }, // position: [positionx, 40] // }] // } // }, // data: wth // } ] } return option; chart.resize(); chart.setOption(option); $(".content_scrollx").mCustomScrollbar('update'); }, arrayContains: function (arr, obj) { var i = arr.length; while (i--) { if (arr[i] == obj) { return true; } } return false; }, } return meteo.c.chart; }); /* * 通过风向wd获取风向的url */ function getWdImageUrl(str) { if (str == null) { str = null; return; } str = str > 360 ? str % 360 : str; str = str < 0 ? (str + 360) : str; str = (str - 22.5) / 45; str = str < 0 ? '00' : //北 str < 1 ? '01' : //东北 str < 2 ? '02' : //东 str < 3 ? '03' : //东南 str < 4 ? '04' : //南 str < 5 ? '05' : //西南 str < 6 ? '06' : //西 str < 7 ? '07' : //西北 '00'; // 北 return str; } //通过风速ws求风级 function getWsToSpeedLevel(value) { var str; if (value == null) { str = "缺测"; return str; } str = value <= 0.2 ? '无风' : value <= 1.5 ? '1' : value <= 3.3 ? '2' : value <= 5.4 ? '3' : value <= 7.9 ? '4' : value <= 10.7 ? '5' : value <= 13.8 ? '6' : value <= 17.1 ? '7' : value <= 20.7 ? '8' : value <= 24.4 ? '9' : value <= 28.4 ? '10' : value <= 32.6 ? '11' : value <= 36.9 ? '12' : '特'; str = str == "无风" ? str : str + '级'; return str; }