天气 风向 风速 海浪 预报echarts 配置项内容和展示
示例数据源于 www.seabreeze.com.au
配置项如下
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 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
})
};
}
option = {
"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],
].join('<br>');
}
},
"visualMap": [{
"show": false,
"dimension": 0,
"seriesIndex": 1,
"pieces": [{
"lte": 10,
"color": "#259e72"
}, {
"gt": 10,
"color": "#51d9a7"
}]
}],
"grid": {
"top": 160,
"bottom": 125
},
"xAxis": {
"type": "time",
"maxInterval": 86400000,
"splitLine": {
"lineStyle": {
"color": "#ddd"
}
}
},
"yAxis": [{
"name": "风速（节）",
"nameLocation": "middle",
"nameGap": 35,
"axisLine": {
"lineStyle": {
"color": "#666"
}
},
"splitLine": {
"lineStyle": {
"color": "#ddd"
}
}
}],
"visualMap": {
"type": "piecewise",
"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": 0,
"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": "custom",
renderItem: renderArrow,
"encode": {
"x": 0,
"y": 1
},
"data": [
["2017-06-27T11:00:00.000Z", 9, "NNW", 2.64],
["2017-06-27T12:30:00.000Z", 10, "NNW", 2.57],
["2017-06-27T14:00:00.000Z", 12, "NNW", 2.49],
["2017-06-27T15:30:00.000Z", 12, "NNW", 2.44],
["2017-06-27T17:00:00.000Z", 11, "NNW", 2.38],
["2017-06-27T18:30:00.000Z", 10, "NNW", 2.34],
["2017-06-27T20:00:00.000Z", 10, "N", 2.3],
["2017-06-27T21:30:00.000Z", 11, "NNW", 2.26],
["2017-06-27T23:00:00.000Z", 12, "NNW", 2.22],
["2017-06-28T00:30:00.000Z", 12, "N", 2.18],
["2017-06-28T02:00:00.000Z", 12, "N", 2.13],
["2017-06-28T03:30:00.000Z", 12, "N", 2.09],
["2017-06-28T05:00:00.000Z", 12, "NNE", 2.04],
["2017-06-28T06:30:00.000Z", 10, "N", 2.01],
["2017-06-28T08:00:00.000Z", 9, "N", 1.99],
["2017-06-28T09:30:00.000Z", 8, "NNW", 2],
["2017-06-28T11:00:00.000Z", 8, "NW", 2.01],
["2017-06-28T12:30:00.000Z", 8, "NW", 2.06],
["2017-06-28T14:00:00.000Z", 9, "WNW", 2.12],
["2017-06-28T15:30:00.000Z", 10, "WNW", 2.19],
["2017-06-28T17:00:00.000Z", 11, "WNW", 2.27],
["2017-06-28T18:30:00.000Z", 12, "WNW", 2.33],
["2017-06-28T20:00:00.000Z", 13, "NW", 2.39],
["2017-06-28T21:30:00.000Z", 13, "NW", 2.43],
["2017-06-28T23:00:00.000Z", 14, "NW", 2.46],
["2017-06-29T00:30:00.000Z", 16, "NW", 2.48],
["2017-06-29T02:00:00.000Z", 18, "NNW", 2.49],
["2017-06-29T03:30:00.000Z", 20, "WNW", 2.53],
["2017-06-29T05:00:00.000Z", 22, "W", 2.58],
["2017-06-29T06:30:00.000Z", 26, "WSW", 2.89],
["2017-06-29T08:00:00.000Z", 30, "WSW", 3.21],
["2017-06-29T09:30:00.000Z", 30, "SW", 3.58],
["2017-06-29T11:00:00.000Z", 29, "SW", 3.94],
["2017-06-29T12:30:00.000Z", 29, "SW", 4.08],
["2017-06-29T14:00:00.000Z", 29, "SW", 4.22],
["2017-06-29T15:30:00.000Z", 28, "SW", 4.25],
["2017-06-29T17:00:00.000Z", 28, "SW", 4.28],
["2017-06-29T18:30:00.000Z", 29, "SSW", 4.37],
["2017-06-29T20:00:00.000Z", 30, "SSW", 4.45],
["2017-06-29T21:30:00.000Z", 29, "SSW", 4.45],
["2017-06-29T23:00:00.000Z", 27, "SSW", 4.45],
["2017-06-30T00:30:00.000Z", 26, "SSW", 4.32],
["2017-06-30T02:00:00.000Z", 25, "SSW", 4.2],
["2017-06-30T03:30:00.000Z", 22, "SSW", 4.01],
["2017-06-30T05:00:00.000Z", 20, "SSW", 3.82],
["2017-06-30T06:30:00.000Z", 19, "SSW", 3.66],
["2017-06-30T08:00:00.000Z", 19, "SSW", 3.51],
["2017-06-30T09:30:00.000Z", 17, "SSW", 3.37],
["2017-06-30T11:00:00.000Z", 14, "SSW", 3.22],
["2017-06-30T12:30:00.000Z", 12, "SSW", 3.09],
["2017-06-30T14:00:00.000Z", 10, "SW", 2.96],
["2017-06-30T15:30:00.000Z", 9, "WSW", 2.83],
["2017-06-30T17:00:00.000Z", 9, "W", 2.7],
["2017-06-30T18:30:00.000Z", 10, "W", 2.58],
["2017-06-30T20:00:00.000Z", 10, "WNW", 2.45],
["2017-06-30T21:30:00.000Z", 10, "WNW", 2.33],
["2017-06-30T23:00:00.000Z", 10, "WNW", 2.21],
["2017-07-01T00:30:00.000Z", 10, "NW", 2.13],
["2017-07-01T02:00:00.000Z", 10, "NW", 2.05],
["2017-07-01T03:30:00.000Z", 10, "NNW", 2.02],
["2017-07-01T05:00:00.000Z", 10, "N", 2],
["2017-07-01T06:30:00.000Z", 10, "N", 2],
["2017-07-01T08:00:00.000Z", 10, "N", 1.99],
["2017-07-01T09:30:00.000Z", 10, "N", 1.98],
["2017-07-01T11:00:00.000Z", 10, "N", 1.96],
["2017-07-01T12:30:00.000Z", 10, "N", 1.94],
["2017-07-01T14:00:00.000Z", 11, "N", 1.93],
["2017-07-01T15:30:00.000Z", 11, "N", 1.93],
["2017-07-01T17:00:00.000Z", 11, "NNW", 1.93],
["2017-07-01T18:30:00.000Z", 10, "NNW", 1.94],
["2017-07-01T20:00:00.000Z", 10, "NNW", 1.96],
["2017-07-01T21:30:00.000Z", 10, "NNW", 1.97],
["2017-07-01T23:00:00.000Z", 10, "NNW", 1.97],
["2017-07-02T00:30:00.000Z", 10, "N", 1.96],
["2017-07-02T02:00:00.000Z", 11, "N", 1.94],
["2017-07-02T03:30:00.000Z", 11, "N", 1.91],
["2017-07-02T05:00:00.000Z", 10, "N", 1.88],
["2017-07-02T06:30:00.000Z", 10, "N", 1.84],
["2017-07-02T08:00:00.000Z", 10, "N", 1.8],
["2017-07-02T09:30:00.000Z", 11, "N", 1.78],
["2017-07-02T11:00:00.000Z", 11, "N", 1.76],
["2017-07-02T12:30:00.000Z", 12, "N", 1.76],
["2017-07-02T14:00:00.000Z", 13, "N", 1.77],
["2017-07-02T15:30:00.000Z", 14, "N", 1.81],
["2017-07-02T17:00:00.000Z", 15, "N", 1.85],
["2017-07-02T18:30:00.000Z", 14, "N", 1.86],
["2017-07-02T20:00:00.000Z", 13, "N", 1.87],
["2017-07-02T21:30:00.000Z", 13, "N", 1.88],
["2017-07-02T23:00:00.000Z", 13, "N", 1.9],
["2017-07-03T00:30:00.000Z", 13, "N", 1.91],
["2017-07-03T02:00:00.000Z", 13, "N", 1.93],
["2017-07-03T03:30:00.000Z", 13, "N", 1.96],
["2017-07-03T05:00:00.000Z", 13, "NNE", 1.99],
["2017-07-03T06:30:00.000Z", 12, "NNE", 2.03],
["2017-07-03T08:00:00.000Z", 11, "NNE", 2.08],
["2017-07-03T09:30:00.000Z", 11, "N", 2.12],
["2017-07-03T11:00:00.000Z", 11, "NNW", 2.16],
["2017-07-03T12:30:00.000Z", 15, "N", 2.22],
["2017-07-03T14:00:00.000Z", 20, "N", 2.27],
["2017-07-03T15:30:00.000Z", 20, "N", 2.33],
["2017-07-03T17:00:00.000Z", 19, "N", 2.39],
["2017-07-03T18:30:00.000Z", 17, "N", 2.44],
["2017-07-03T20:00:00.000Z", 15, "N", 2.49],
["2017-07-03T21:30:00.000Z", 16, "NNW", 2.49],
["2017-07-03T23:00:00.000Z", 17, "WNW", 2.49],
["2017-07-04T00:30:00.000Z", 18, "W", 2.47],
["2017-07-04T02:00:00.000Z", 20, "SW", 2.44],
["2017-07-04T03:30:00.000Z", 21, "SW", 2.5],
["2017-07-04T05:00:00.000Z", 21, "WSW", 2.56],
["2017-07-04T06:30:00.000Z", 22, "WSW", 2.69],
["2017-07-04T08:00:00.000Z", 22, "WSW", 2.83],
["2017-07-04T09:30:00.000Z", 23, "WSW", 2.94],
["2017-07-04T11:00:00.000Z", 23, "WSW", 3.06],
["2017-07-04T12:30:00.000Z", 24, "WSW", 3.06],
["2017-07-04T14:00:00.000Z", 24, "SW", 3.06],
["2017-07-04T15:30:00.000Z", 25, "SW", 3.04],
["2017-07-04T17:00:00.000Z", 25, "SW", 3.03],
["2017-07-04T18:30:00.000Z", 26, "SW", 3],
["2017-07-04T20:00:00.000Z", 26, "SW", 2.97]
],
"z": 10
}, {
"type": "line",
"data": [
["2017-06-27T11:00:00.000Z", 9, "NNW"],
["2017-06-27T12:30:00.000Z", 10, "NNW"],
["2017-06-27T14:00:00.000Z", 12, "NNW"],
["2017-06-27T15:30:00.000Z", 12, "NNW"],
["2017-06-27T17:00:00.000Z", 11, "NNW"],
["2017-06-27T18:30:00.000Z", 10, "NNW"],
["2017-06-27T20:00:00.000Z", 10, "N"],
["2017-06-27T21:30:00.000Z", 11, "NNW"],
["2017-06-27T23:00:00.000Z", 12, "NNW"],
["2017-06-28T00:30:00.000Z", 12, "N"],
["2017-06-28T02:00:00.000Z", 12, "N"],
["2017-06-28T03:30:00.000Z", 12, "N", 2.09],
["2017-06-28T05:00:00.000Z", 12, "NNE", 2.04],
["2017-06-28T06:30:00.000Z", 10, "N", 2.01],
["2017-06-28T08:00:00.000Z", 9, "N", 1.99],
["2017-06-28T09:30:00.000Z", 8, "NNW", 2],
["2017-06-28T11:00:00.000Z", 8, "NW", 2.01],
["2017-06-28T12:30:00.000Z", 8, "NW", 2.06],
["2017-06-28T14:00:00.000Z", 9, "WNW", 2.12],
["2017-06-28T15:30:00.000Z", 10, "WNW", 2.19],
["2017-06-28T17:00:00.000Z", 11, "WNW", 2.27],
["2017-06-28T18:30:00.000Z", 12, "WNW", 2.33],
["2017-06-28T20:00:00.000Z", 13, "NW", 2.39],
["2017-06-28T21:30:00.000Z", 13, "NW", 2.43],
["2017-06-28T23:00:00.000Z", 14, "NW", 2.46],
["2017-06-29T00:30:00.000Z", 16, "NW", 2.48],
["2017-06-29T02:00:00.000Z", 18, "NNW", 2.49],
["2017-06-29T03:30:00.000Z", 20, "WNW", 2.53],
["2017-06-29T05:00:00.000Z", 22, "W", 2.58],
["2017-06-29T06:30:00.000Z", 26, "WSW", 2.89],
["2017-06-29T08:00:00.000Z", 30, "WSW", 3.21],
["2017-06-29T09:30:00.000Z", 30, "SW", 3.58],
["2017-06-29T11:00:00.000Z", 29, "SW", 3.94],
["2017-06-29T12:30:00.000Z", 29, "SW", 4.08],
["2017-06-29T14:00:00.000Z", 29, "SW", 4.22],
["2017-06-29T15:30:00.000Z", 28, "SW", 4.25],
["2017-06-29T17:00:00.000Z", 28, "SW", 4.28],
["2017-06-29T18:30:00.000Z", 29, "SSW", 4.37],
["2017-06-29T20:00:00.000Z", 30, "SSW", 4.45],
["2017-06-29T21:30:00.000Z", 29, "SSW", 4.45],
["2017-06-29T23:00:00.000Z", 27, "SSW", 4.45],
["2017-06-30T00:30:00.000Z", 26, "SSW", 4.32],
["2017-06-30T02:00:00.000Z", 25, "SSW", 4.2],
["2017-06-30T03:30:00.000Z", 22, "SSW", 4.01],
["2017-06-30T05:00:00.000Z", 20, "SSW", 3.82],
["2017-06-30T06:30:00.000Z", 19, "SSW", 3.66],
["2017-06-30T08:00:00.000Z", 19, "SSW", 3.51],
["2017-06-30T09:30:00.000Z", 17, "SSW", 3.37],
["2017-06-30T11:00:00.000Z", 14, "SSW", 3.22],
["2017-06-30T12:30:00.000Z", 12, "SSW", 3.09],
["2017-06-30T14:00:00.000Z", 10, "SW", 2.96],
["2017-06-30T15:30:00.000Z", 9, "WSW", 2.83],
["2017-06-30T17:00:00.000Z", 9, "W", 2.7],
["2017-06-30T18:30:00.000Z", 10, "W", 2.58],
["2017-06-30T20:00:00.000Z", 10, "WNW", 2.45],
["2017-06-30T21:30:00.000Z", 10, "WNW", 2.33],
["2017-06-30T23:00:00.000Z", 10, "WNW", 2.21],
["2017-07-01T00:30:00.000Z", 10, "NW", 2.13],
["2017-07-01T02:00:00.000Z", 10, "NW", 2.05],
["2017-07-01T03:30:00.000Z", 10, "NNW", 2.02],
["2017-07-01T05:00:00.000Z", 10, "N", 2],
["2017-07-01T06:30:00.000Z", 10, "N", 2],
["2017-07-01T08:00:00.000Z", 10, "N", 1.99],
["2017-07-01T09:30:00.000Z", 10, "N", 1.98],
["2017-07-01T11:00:00.000Z", 10, "N", 1.96],
["2017-07-01T12:30:00.000Z", 10, "N", 1.94],
["2017-07-01T14:00:00.000Z", 11, "N", 1.93],
["2017-07-01T15:30:00.000Z", 11, "N", 1.93],
["2017-07-01T17:00:00.000Z", 11, "NNW", 1.93],
["2017-07-01T18:30:00.000Z", 10, "NNW", 1.94],
["2017-07-01T20:00:00.000Z", 10, "NNW", 1.96],
["2017-07-01T21:30:00.000Z", 10, "NNW", 1.97],
["2017-07-01T23:00:00.000Z", 10, "NNW", 1.97],
["2017-07-02T00:30:00.000Z", 10, "N", 1.96],
["2017-07-02T02:00:00.000Z", 11, "N", 1.94],
["2017-07-02T03:30:00.000Z", 11, "N", 1.91],
["2017-07-02T05:00:00.000Z", 10, "N", 1.88],
["2017-07-02T06:30:00.000Z", 10, "N", 1.84],
["2017-07-02T08:00:00.000Z", 10, "N", 1.8],
["2017-07-02T09:30:00.000Z", 11, "N", 1.78],
["2017-07-02T11:00:00.000Z", 11, "N", 1.76],
["2017-07-02T12:30:00.000Z", 12, "N", 1.76],
["2017-07-02T14:00:00.000Z", 13, "N", 1.77],
["2017-07-02T15:30:00.000Z", 14, "N", 1.81],
["2017-07-02T17:00:00.000Z", 15, "N", 1.85],
["2017-07-02T18:30:00.000Z", 14, "N", 1.86],
["2017-07-02T20:00:00.000Z", 13, "N", 1.87],
["2017-07-02T21:30:00.000Z", 13, "N", 1.88],
["2017-07-02T23:00:00.000Z", 13, "N", 1.9],
["2017-07-03T00:30:00.000Z", 13, "N", 1.91],
["2017-07-03T02:00:00.000Z", 13, "N", 1.93],
["2017-07-03T03:30:00.000Z", 13, "N", 1.96],
["2017-07-03T05:00:00.000Z", 13, "NNE", 1.99],
["2017-07-03T06:30:00.000Z", 12, "NNE", 2.03],
["2017-07-03T08:00:00.000Z", 11, "NNE", 2.08],
["2017-07-03T09:30:00.000Z", 11, "N", 2.12],
["2017-07-03T11:00:00.000Z", 11, "NNW", 2.16],
["2017-07-03T12:30:00.000Z", 15, "N", 2.22],
["2017-07-03T14:00:00.000Z", 20, "N", 2.27],
["2017-07-03T15:30:00.000Z", 20, "N", 2.33],
["2017-07-03T17:00:00.000Z", 19, "N", 2.39],
["2017-07-03T18:30:00.000Z", 17, "N", 2.44],
["2017-07-03T20:00:00.000Z", 15, "N", 2.49],
["2017-07-03T21:30:00.000Z", 16, "NNW", 2.49],
["2017-07-03T23:00:00.000Z", 17, "WNW", 2.49],
["2017-07-04T00:30:00.000Z", 18, "W", 2.47],
["2017-07-04T02:00:00.000Z", 20, "SW", 2.44],
["2017-07-04T03:30:00.000Z", 21, "SW", 2.5],
["2017-07-04T05:00:00.000Z", 21, "WSW", 2.56],
["2017-07-04T06:30:00.000Z", 22, "WSW", 2.69],
["2017-07-04T08:00:00.000Z", 22, "WSW", 2.83],
["2017-07-04T09:30:00.000Z", 23, "WSW", 2.94],
["2017-07-04T11:00:00.000Z", 23, "WSW", 3.06],
["2017-07-04T12:30:00.000Z", 24, "WSW", 3.06],
["2017-07-04T14:00:00.000Z", 24, "SW", 3.06],
["2017-07-04T15:30:00.000Z", 25, "SW", 3.04],
["2017-07-04T17:00:00.000Z", 25, "SW", 3.03],
["2017-07-04T18:30:00.000Z", 26, "SW", 3],
["2017-07-04T20:00:00.000Z", 26, "SW", 2.97]
],
"z": 1
}]
}
截图如下
