<html>
    <head>
        <meta charset="utf-8">
        <script src="../common/jquery.min.js"></script>
        <script src="../common/echarts.min.js"></script>
        <script src="../common/prettify/prettify.js"></script>
        <script src="../common/showCode.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
        <link rel="stylesheet" href="../common/prettify/prettify.css">
        <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
        <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
    </head>
    <body>

        <div id="main">
            <pre class="prettyprint" style="font-size: 16px;">
option = {
    ...,
    series: [{ // 浪高
        type: 'line',
        yAxisIndex: 1
    }, { // 风向箭头
        type: 'custom',
        renderItem: renderArrow,
        encode: {
            x: dims.time,
            y: dims.windSpeed
        },
        data: data,
        z: 10
    }, { // 风速虚线
        type: 'line',
        symbol: 'none',
        encode: {
            x: dims.time,
            y: dims.windSpeed
        },
        data: data
    }, { // 天气图标
        type: 'custom',
        renderItem: renderWeather,
        data: weatherData
    }],
    visualMap: {
        seriesIndex: 1,
        dimension: 1,
        ...
    }
}

// 绘制风向箭头
function renderArrow(param, api) {
    var point = api.coord([
        api.value(dims.time),
        api.value(dims.windSpeed)
    ]);

    return {
        type: 'path',
        shape: {
            pathData: 'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
        },
        rotation: directionMap[api.value(dims.R)],
        position: point,
        style: api.style({
            stroke: '#555',
            lineWidth: 1
        })
    };
}

// 绘制天气图标
function renderWeather(param, api) {
    var point = api.coord([
        api.value(dims.time) +  + 3600 * 24 * 1000 / 2,
        0
    ]);

    return {
        type: 'group',
        children: [{
            type: 'image',
            style: {
                image: api.value(dims.weatherIcon),
                x: -weatherIconSize / 2,
                y: -weatherIconSize / 2,
                width: weatherIconSize,
                height: weatherIconSize
            },
            position: [point[0], 110]
        }, {
            type: 'text',
            style: {
                text: api.value(dims.minTemp) + ' - ' + api.value(dims.maxTemp) + '°',
                textFont: api.font({fontSize: 14}),
                textAlign: 'center'
            },
            position: [point[0], 80]
        }]
    };
}

            </pre>
            <div id="chart"></div>
        </div>


        <script>


        $.getJSON('../data/wind-barb-hobart.json', function (rawData) {

            var weatherIcons = {
                'Showers': '../data/weather/showers_128.png',
                'Sunny': '../data/weather/sunny_128.png',
                'Cloudy': '../data/weather/cloudy_128.png'
            };

            var directionMap = {};
            echarts.util.each(
                ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'],
                function (name, index) {
                    directionMap[name] = Math.PI / 8 * index;
                }
            );

            var data = echarts.util.map(rawData.data, function (entry) {
                return [entry.time, entry.windSpeed, entry.R, entry.waveHeight];
            });
            var weatherData = echarts.util.map(rawData.forecast, function (entry) {
                return [entry.localDate, 0, weatherIcons[entry.skyIcon], entry.minTemp, entry.maxTemp];
            });

            var dims = {
                time: 0,
                windSpeed: 1,
                R: 2,
                waveHeight: 3,
                weatherIcon: 2,
                minTemp: 3,
                maxTemp: 4
            };
            var arrowSize = 18;
            var weatherIconSize = 45;

            function renderArrow(param, api) {
                var point = api.coord([
                    api.value(dims.time),
                    api.value(dims.windSpeed)
                ]);

                return {
                    type: 'path',
                    shape: {
                        pathData: 'M31 16l-15-15v9h-26v12h26v9z',
                        x: -arrowSize / 2,
                        y: -arrowSize / 2,
                        width: arrowSize,
                        height: arrowSize
                    },
                    rotation: directionMap[api.value(dims.R)],
                    position: point,
                    style: api.style({
                        stroke: '#555',
                        lineWidth: 1
                    })
                };
            }

            function renderWeather(param, api) {
                var point = api.coord([
                    api.value(dims.time) +  + 3600 * 24 * 1000 / 2,
                    0
                ]);

                return {
                    type: 'group',
                    children: [{
                        type: 'image',
                        style: {
                            image: api.value(dims.weatherIcon),
                            x: -weatherIconSize / 2,
                            y: -weatherIconSize / 2,
                            width: weatherIconSize,
                            height: weatherIconSize
                        },
                        position: [point[0], 110]
                    }, {
                        type: 'text',
                        style: {
                            text: api.value(dims.minTemp) + ' - ' + api.value(dims.maxTemp) + '°',
                            textFont: api.font({fontSize: 14}),
                            textAlign: 'center'
                        },
                        position: [point[0], 80]
                    }]
                };
            }

            option = {
                backgroundColor: '#eee',
                title: {
                    text: '天气 风向 风速 海浪 预报',
                    subtext: '示例数据源于 www.seabreeze.com.au',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return [
                            echarts.format.formatTime('yyyy-MM-dd', params[0].value[dims.time])
                            + ' ' + echarts.format.formatTime('hh:mm', params[0].value[dims.time]),
                            '风速：' + params[0].value[dims.windSpeed],
                            '风向：' + params[0].value[dims.R],
                            '浪高：' + params[0].value[dims.waveHeight]
                        ].join('<br>');
                    }
                },
                grid: {
                    top: 160,
                    bottom: 125
                },
                xAxis: {
                    type: 'time',
                    maxInterval: 3600 * 1000 * 24,
                    splitLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    }
                },
                yAxis: [{
                    name: '风速（节）',
                    nameLocation: 'middle',
                    nameGap: 35,
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    }
                }, {
                    name: '浪高（米）',
                    nameLocation: 'middle',
                    nameGap: 35,
                    max: 6,
                    axisLine: {
                        lineStyle: {
                            color: '#015DD5'
                        }
                    },
                    splitLine: {show: false}
                }, {
                    axisLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {show: false},
                    splitLine: {show: false}
                }],
                visualMap: {
                    type: 'piecewise',
                    // show: false,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 10,
                    pieces: [{
                        gte: 17,
                        color: '#18BF12',
                        label: '大风（>=17节）'
                    }, {
                        gte: 11,
                        lt: 17,
                        color: '#f4e9a3',
                        label: '中风（11  ~ 17 节）'
                    }, {
                        lt: 11,
                        color: '#D33C3E',
                        label: '微风（小于 11 节）'
                    }],
                    seriesIndex: 1,
                    dimension: 1
                },
                dataZoom: [{
                    type: 'inside',
                    xAxisIndex: 0,
                    minSpan: 5
                }, {
                    type: 'slider',
                    xAxisIndex: 0,
                    minSpan: 5,
                    height: 20,
                    bottom: 50,
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '120%'
                }],
                series: [{
                    type: 'line',
                    yAxisIndex: 1,
                    showSymbol: false,
                    hoverAnimation: false,
                    symbolSize: 10,
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(88,160,253,1)'
                                }, {
                                    offset: 0.5, color: 'rgba(88,160,253,0.7)'
                                }, {
                                    offset: 1, color: 'rgba(88,160,253,0)'
                                }]
                            }
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'rgba(88,160,253,1)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(88,160,253,1)'
                        }
                    },
                    encode: {
                        x: dims.time,
                        y: dims.waveHeight
                    },
                    data: data,
                    z: 2
                }, {
                    type: 'custom',
                    renderItem: renderArrow,
                    encode: {
                        x: dims.time,
                        y: dims.windSpeed
                    },
                    data: data,
                    z: 10
                }, {
                    type: 'line',
                    symbol: 'none',
                    encode: {
                        x: dims.time,
                        y: dims.windSpeed
                    },
                    lineStyle: {
                        normal: {
                            color: '#aaa',
                            type: 'dotted'
                        }
                    },
                    data: data,
                    z: 1
                }, {
                    type: 'custom',
                    renderItem: renderWeather,
                    data: weatherData,
                    tooltip: {
                        trigger: 'item',
                        formatter: function (param) {
                            return param.value[dims.time] + ': '
                                + param.value[dims.minTemp] + ' - ' + param.value[dims.maxTemp] + '°';
                        }
                    },
                    yAxisIndex: 2,
                    z: 11
                }]
            };

            initShowCode(option, {codeWidth: 400});
        });


        </script>
    </body>
</html>