TDataView_ui/scripts/meteo/c/weatherChart.js

/**
 * 天气图表
 * 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;

}