<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
//rawData为demo数据,waveHeight属性无用。
var rawData = [{"time":"2017-06-27T11:00:00.000Z","windSpeed":9,"windDirection":"NNW","waveHeight":2.64},{"time":"2017-06-27T12:30:00.000Z","windSpeed":10,"windDirection":"NNW","waveHeight":2.57},{"time":"2017-06-27T14:00:00.000Z","windSpeed":12,"windDirection":"NNW","waveHeight":2.49},{"time":"2017-06-27T15:30:00.000Z","windSpeed":12,"windDirection":"NNW","waveHeight":2.44},{"time":"2017-06-27T17:00:00.000Z","windSpeed":11,"windDirection":"NNW","waveHeight":2.38},{"time":"2017-06-27T18:30:00.000Z","windSpeed":10,"windDirection":"NNW","waveHeight":2.34},{"time":"2017-06-27T20:00:00.000Z","windSpeed":10,"windDirection":"N","waveHeight":2.3},{"time":"2017-06-27T21:30:00.000Z","windSpeed":11,"windDirection":"NNW","waveHeight":2.26},{"time":"2017-06-27T23:00:00.000Z","windSpeed":12,"windDirection":"NNW","waveHeight":2.22},{"time":"2017-06-28T00:30:00.000Z","windSpeed":12,"windDirection":"N","waveHeight":2.18},{"time":"2017-06-28T02:00:00.000Z","windSpeed":12,"windDirection":"N","waveHeight":2.13},{"time":"2017-06-28T03:30:00.000Z","windSpeed":12,"windDirection":"N","waveHeight":2.09},{"time":"2017-06-28T05:00:00.000Z","windSpeed":12,"windDirection":"NNE","waveHeight":2.04},{"time":"2017-06-28T06:30:00.000Z","windSpeed":10,"windDirection":"N","waveHeight":2.01},{"time":"2017-06-28T08:00:00.000Z","windSpeed":9,"windDirection":"N","waveHeight":1.99},{"time":"2017-06-28T09:30:00.000Z","windSpeed":8,"windDirection":"NNW","waveHeight":2},{"time":"2017-06-28T11:00:00.000Z","windSpeed":8,"windDirection":"NW","waveHeight":2.01},{"time":"2017-06-28T12:30:00.000Z","windSpeed":8,"windDirection":"NW","waveHeight":2.06},{"time":"2017-06-28T14:00:00.000Z","windSpeed":9,"windDirection":"WNW","waveHeight":2.12},{"time":"2017-06-28T15:30:00.000Z","windSpeed":10,"windDirection":"WNW","waveHeight":2.19},{"time":"2017-06-28T17:00:00.000Z","windSpeed":11,"windDirection":"WNW","waveHeight":2.27},{"time":"2017-06-28T18:30:00.000Z","windSpeed":12,"windDirection":"WNW","waveHeight":2.33},{"time":"2017-06-28T20:00:00.000Z","windSpeed":13,"windDirection":"NW","waveHeight":2.39},{"time":"2017-06-28T21:30:00.000Z","windSpeed":13,"windDirection":"NW","waveHeight":2.43},{"time":"2017-06-28T23:00:00.000Z","windSpeed":14,"windDirection":"NW","waveHeight":2.46},{"time":"2017-06-29T00:30:00.000Z","windSpeed":16,"windDirection":"NW","waveHeight":2.48},{"time":"2017-06-29T02:00:00.000Z","windSpeed":18,"windDirection":"NNW","waveHeight":2.49},{"time":"2017-06-29T03:30:00.000Z","windSpeed":20,"windDirection":"WNW","waveHeight":2.53},{"time":"2017-06-29T05:00:00.000Z","windSpeed":22,"windDirection":"W","waveHeight":2.58},{"time":"2017-06-29T06:30:00.000Z","windSpeed":26,"windDirection":"WSW","waveHeight":2.89}];
function createWindDemo(rawData) {
//将风向标识,N/W/S/E等转换为风向数值
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, function(entry) {
return [entry.time, entry.windSpeed, entry.windDirection];
});
//定义各属性所在data中数组的位置
var dims = {
time: 0,
windSpeed: 1,
windDirection: 2
};
//默认风向杆图形大小
var arrowSize = 18;
/* 风的等级 */
function windLevel(windSpeed){
var windSpeedLevels = ['0.0-0.2','0.3-1.5','1.6-3.3','3.4-5.4','5.5-7.9','8.0-10.7','10.8-13.8','13.9-17.1','17.2-20.7','20.8-24.4','24.5-28.4','28.5-32.6','32.6-'];
var windSpeedLevelsLength = windSpeedLevels.length;
var level = 0;
for(var i = 0;i < windSpeedLevelsLength;i++){
windSpeedMin = windSpeedLevels[i].split('-')[0];
windSpeedMax = windSpeedLevels[i].split('-')[1];
if(i!=windSpeedLevelsLength){
if(windSpeed>=windSpeedMin&&windSpeed<=windSpeedMax){
level = i;
}
}else{
if(windSpeed>windSpeedMin){
level = i;
}
}
}
return level;
};
/* 风等级图标 */
function windArrowPath(level) {
var path;
path = [
'M', 0, -10,
'L', -1.5, 5
];
if(level<8){
if (level === 0) {
path = [];
}
if (level === 1) {
path.push('M', 0, -10, 'L', 4, -10); // 短线
} else if (level >= 2) {
path.push('M',0, -10, 'L', 8, -10); // 长线
}
if (level === 3) {
path.push('M', 0, -7, 'L', 4, -7);
} else if (level >= 4) {
path.push('M', 0, -7, 'L', 8, -7);
}
if (level === 5) {
path.push('M', 0, -4, 'L', 4, -4);
} else if (level >= 6) {
path.push('M', 0, -4, 'L', 8, -4);
}
if (level === 7) {
path.push('M', 0, -1, 'L', 4, -1);
}
}else{
path.push('M', 0, -10, 'L', 8, -7, 'L', 0, -4);
}
return path;
};
//渲染风向杆
function renderArrow(param, api) {
//该point对应折线图上的位置，x,y，若需要显示在风速折线图上，可使用该point
var point = api.coord([
api.value(dims.time),
api.value(dims.windSpeed)
]);
/*var point = api.coord([
api.value(dims.time),
-4 //这里固定在Y轴上显示的位置
]);*/
var level = windLevel(api.value(dims.windSpeed));
var windPath = windArrowPath(level);
windPath = windPath.join(" ");
return {
type: 'path',
shape: {
//pathData: 'M0 0 L0 400 L200 400 M0 300 L200 300',//风向杆图形路径
pathData:windPath,
x: -arrowSize / 2,
y: -arrowSize / 2,
width: arrowSize,
height: arrowSize
},
rotation: directionMap[api.value(dims.windDirection)],//如果风向为数值，则不需要此处转换
position: point,
style: api.style({
stroke: '#111',
fill: null,
lineWidth: 2
})
};
}
option = {
title: {
text: '风向风速echart',
subtext: '测试demo',
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.windDirection]
].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'
}
}
}, {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}],
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
minSpan: 5
}],
series: [{
type: 'custom',
renderItem: renderArrow,
encode: {
x: dims.time,
y: dims.windSpeed
},
data: data,
z: 10
},
//�
