echarts渲染⼀个风向图
今天给⼤家说⼀个⽤echarts渲染⼀个风向图，这⾥图上其实有三个要素，风向，风级和能见度，主要还是讲讲代码⾥⾯的坑
1.风向图标⽅向修改以及设置
var ownData = echarts.util.map(windGrade, function (item, index) {
return {
value: windGrade[index],
symbolRotate:360-windDir[index]};
});
这⾥的ownData 包括了⼀个value和symbolRotate，第⼀个是风级的数值，第⼆个则是⾓度，官⽅说symbolRotate:windDir[index]，但是会发现图标的⽅向不对，于是⾃⼰根据实际展⽰需要做了调整，前⾯⽤360来减去对应的⾓度值
echarts官⽅是再series中的markPoint设置
symbol:'image://wind.png',
symbolSize:'26',，但是发现并不起作⽤，⽽是直接再series下进⾏symbol和symbolSize的设置
2.⾃定义tooltip显⽰内容
tooltip: {
formatter: function(params) {
这⾥的params，可以alert⼀下，看看具体值
//alert(JSON.stringify(params));
return '<p>时间：'+params[0].name+'</p><p><p>能见度：'+params[2].value+'</p><p>风级：'+params[1].value+'</p><p>风
向：'+params[0].value+'</p>';
},
trigger: 'axis',
axisPointer: {
animation: false
}
},
3.禁⽌图标拖拽操作
将dataZoom设置取消，因为会发现设置之后，对应值会报错，说value未到，并且上下的数据横轴对应不齐
4.所有节点数据都显⽰出来
echarts默认会根据div的宽度来展⽰数据节点名称，如果向全部显⽰，再series设置showAllSymbol: true，即可
最近再⼀次遇到了做风向图的需求，不过还添加了更多要显⽰的元素，⽐如温度，降⽔，能见度，不过我发现我之前的⽅法有个问题，就是tooltip显⽰有问题,⿏标划到风级tooltip显⽰正常，但是划到能见度那块⼉，tooltip显⽰的不对，元素和数据会错位，于是⾃⼰在此基础上，做了⼀个完美的改善⽅案，并且还可以设置dataZoom来拖拽，代码如下，这⾥我只写渲染代码，数据的话，⾃⼰处理后传⼊即可！
其中daytu就是要传⼊的数据，包含了温度，降⽔，能见度，风向，风速5个元素的值，可能⼤家的数据返回和我的不⼀样，这个⾃⼰针对⾃
⼰的数据处理即可，重点在如何渲染Echarts图上
function drawEcharts(daytu) {
var myEcharts = echarts.ElementById('box'));
var timeData = [],windSpeed = [],opacity = [],windDir = [],rainArr = [],temp = []; for(var i=0; i<daytu.length; i++) {
//横轴数据处理
timeData.push(daytu[i][0].vla.substring(0,daytu[i][0].vla.length-3));
//风向数据处理
windDir.push(daytu[i][3].vla);
//风速数据处理
windSpeed.push(daytu[i][2].vla);
//能见度数据处理
opacity.push(parseInt(daytu[i][6].vla/1000));
//降⾬数据处理
rainArr.push(daytu[i][5].vla);
//温度数据处理
temp.push(parseInt(daytu[i][1].vla));
};
var tempArr = new Array(windSpeed.length).fill('0');
var ownData = echarts.util.map(tempArr, function (item, index) {
在这⾥不需要显⽰风向的tooltip，所以全部给它赋值为0
return {
value: tempArr[index],
symbolRotate:405-windDir[index]};
});
var option = {
color: ['#44A1A9','#FEDC29','#FFB67C','#D72A26'],
title: {
text: val.c2 + '城市预报',
x: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data: ['能见度','风速','降⽔','温度'],
x: 'left'
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
axisPointer: {
link: {
xAxisIndex: 'all'
}
},
dataZoom:{
type: 'inside',
realtime: true,
start: 0,
end: 50,
xAxisIndex: [0, 1]
},
grid: [ {
left: 50,
right: 86,
height: '35%'
},
{
left: 50,
right: 86,
height: '35%',
top: '55%'
}],
xAxis: [
{
gridIndex: 1,
type: 'category', boundaryGap: false, axisLine: { onZero: true
},
offset: 10,
data: timeData
},
{
show:false,
type: 'category', boundaryGap: false, axisLine: { onZero: true
},
data: timeData, position: 'bottom'
}
],
yAxis: [
{ nameLocation: 'end', gridIndex: 1, name: '风速',
type: 'value', nameTextStyle: { padding: [0, 60, -10, 6] }
},
{ nameLocation: 'end', name: '能见度(Km)', type: 'value', position: 'left', offset: 10, splitLine: {
show: false
}
//是否是反向坐标轴//inverse: true
},
{ nameLocation: 'end', name: '降⽔(mm)', type: 'value', position:'right', offset: 9, splitLine: {
show: false
}
},
{ nameLocation: 'end',
name: '温度(℃)',
type: 'value',
position:'right',
offset: 54,
splitLine: {
show: false
}
}
],
series: [
{
name: '风速',
type: 'line',
hoverAnimation: false,
data: windSpeed,
xAxisIndex: 0
},
{
// name: '风向',
type: 'line',
symbol:'image://plug-in/util/assets/image/wind.png', symbolSize:'26',
hoverAnimation: false,
xAxisIndex: 0,
data: ownData,
showAllSymbol: true,
// 设置tooltip不显⽰
tooltip: {
trigger: 'item'
}
/* markLine: {
silent: true,
data: [{
yAxis: 1
}, {
yAxis: 3
}]
} */
},
{
name: '能见度',
type: 'line',
xAxisIndex: 1,
setoptionyAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
//全部显⽰所有数据点
showAllSymbol: true,
data: opacity
/* markLine: {
silent: true,
data: [{
yAxis: 1200
}, {
yAxis: 3000
}]
} */
},
{
name: '降⽔',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
symbolSize: 8,
hoverAnimation: false,
//全部显⽰所有数据点
showAllSymbol: true,
data: rainArr
},
{
name: '温度',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 2,
symbolSize: 8, hoverAnimation: false,
//全部显⽰所有数据点showAllSymbol: true,
data: temp
}
]
};
myEcharts.setOption(option);
};
效果图如下：
⼤家如果有不清楚的随时留⾔讨论！