數據格式1效果
數據格式2效果
數據格式2 真實數據（每半小時一個數據）效果
vue.js項目該部分源代碼：
<div id="windspeedandDirection" style="width:100%"></div> this.initWindspeedandDirection("windspeedandDirection",data); initWindspeedandDirection(id,data){ let chartElement = document.getElementById(id); chartElement.style.height = '260px'; let chart = echarts.init(chartElement); chart.dispose(); chart = echarts.init(chartElement); //數據格式1 // var data2 = [ // [ // 1483488000000, //時間戳 // 6.19,//風速 // 159.4 //角度 // ], // [ // 1483574400000, // 6.19, // 8.31 // ], // [ // 1483660800000, // 3.19, // 37.77 // ], // [ // 1483747200000, // 6.19, // 340 // ], // [ // 1483833600000, // 6.19, // 79.235 // ], // [ // 1483920000000, // 11.19, // 286.8 // ], // [ // 1484006400000, // 17.19, // 193.71 // ] // ]; //數據格式2 // var data2 = [ // [ // '2020-9-1 13:15:31', //年月日時分秒 // 6.19,//風速 // 159.4 //角度 // ], // [ // '2020-9-1 14:15:31', // 6.19, // 8.31 // ], // [ // '2020-9-1 15:15:31', // 3.19, // 37.77 // ], // [ // '2020-9-1 16:15:31', // 6.19, // 340 // ], // [ // '2020-9-1 17:15:31', // 6.19, // 79.235 // ], // [ // '2020-9-1 18:15:31', // 11.19, // 286.8 // ], // [ // '2020-9-1 19:15:31', // 17.19, // 193.71 // ] // ]; console.log('data',data) //只顯示小時和分鐘數據 方式1 同時設置xAxis type: 'category' let data2 =data.map(function (item) { return [util.formatTime (new Date(item['TIMESTAMP'])),item['WS_Avg'],item['WD']]; }); //只顯示小時和分鐘數據 方式2 同時設置xAxis type: 'time', tooltip-formatter方法,缺點是X軸時間格式無法控制。 // let data2 =data.map(function (item) { // return [item['TIMESTAMP'],item['WS_Avg'],item['WD']]; // }); console.log('data2',data2) //dims對象保存數組的維度，方便從data數組中取數據 var dims = { time: 0, //時間的維度是0 windSpeed: 1,//風速的維度是1 R: 2 //角度（0-360）的維度是2 }; let that=this; var option = { 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>'); // } formatter: function (params) { return [ params[0].value[dims.time], '風速(m/s)：' + params[0].value[dims.windSpeed], '風向(度)：' + params[0].value[dims.R], '風向：' + util.formatWindDirection(params[0].value[dims.R]) ].join('<br>'); } // formatter(data) { // return that.tooltipFormatter(data,""); // } }, grid: { top: 50, left: 45, right: '4%', bottom: '2%', containLabel: true }, xAxis: { /* ecnarts文檔-配置項： xAxis. type 座標軸類型。 可選： 'value' 數值軸，適用於連續數據。 'category' 類目軸，適用於離散的類目數據。爲該類型時類目數據可自動從 series.data 或 dataset.source 中取，或者可通過 xAxis.data 設置類目數據。 'time' 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。 'log' 對數軸。適用於對數數據。 */ //type: 'value', type: 'category', //type: 'time', //data: xAxisData, splitLine:{ show:false//去掉網格中的垂直線 }, }, yAxis: [{ name: '風速（m/s）', }], series: [{ /*echarts文檔-配置項： series-custom custom 系列需要開發者自己提供圖形渲染的邏輯。這個渲染邏輯一般命名爲 renderItem */ type: 'custom', renderItem: this.renderArrow, /*echarts文檔-配置項：series-line.encode 可以定義 data 的哪個維度被編碼成什麼。比如： encode: { x: [3, 1, 5], // 表示維度 3、1、5 映射到 x 軸。 y: 2, // 表示維度 2 映射到 y 軸。 tooltip: [3, 2, 4] // 表示維度 3、2、4 會在 tooltip 中顯示。 } */ encode: { x: dims.time, y: dims.windSpeed }, data: data2, /* series-custom. z 自定義圖組件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。 z相比zlevel優先級更低，而且不會創建新的 Canvas。 */ z: 10 }, { type: 'line', symbol: 'none', //不顯示點 encode: { x: dims.time, y: dims.windSpeed }, lineStyle: { normal: { color: 'rgb(148, 192, 90)', //type: 'dotted' } }, data: data2, z: 1 }] }; console.log('option',option); chart.setOption(option); chart.resize(); this[id] = chart; }, onresizeAir(){ let idArr=['windspeedandDirection']; for(let i=0;i<idArr.length;i++){ let id=idArr[i]; let chartElement = document.getElementById(id); chartElement.style.height = (window.innerHeight -139)/3+'px'; //window.innerHeight瀏覽器高度 this.resizeChart(this[id]); // console.log('ceshi1',(window.innerHeight -123)/3); // console.log('chartElement',chartElement) // console.log('that[id]',that[id]) } }, mounted () { let that=this; setTimeout(function(){ that.onresizeAir(); }, 400); window.addEventListener('resize', () => { that.onresizeAir(); }, false) },
xAxis formatter 沒有嘗試成功，目前不能直接改變X軸時間的顯示樣式。若大家有更好的方法請留言。
renderArrow(param, api) {
/*
echarts文檔-配置項： series-custom. renderItem
對於 data 中的每個數據項（爲方便描述，這裏稱爲 dataItem)，會調用此 renderItem 函數。
renderItem 函數提供了兩個參數：
params：包含了當前數據信息和座標系的信息。
api：是一些開發者可調用的方法集合。
renderItem 函數須返回根據此 dataItem 繪製出的圖形元素的定義信息，參見 renderItem.return。
一般來說，renderItem 函數的主要邏輯，是將 dataItem 裏的值映射到座標系上的圖形元素。這一般需要用到 renderItem.arguments.api 中的兩個函數：
api.value(...)，意思是取出 dataItem 中的數值。例如 api.value(0) 表示取出當前 dataItem 中第一個維度的數值。
api.coord(...)，意思是進行座標轉換計算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的數值轉換成座標系上的點。
有時候還需要用到 api.size(...) 函數，表示得到座標系上一段數值範圍對應的長度。
返回值中樣式的設置可以使用 api.style(...) 函數，他能得到 series.itemStyle 中定義的樣式信息，以及視覺映射的樣式信息。也可以用這種方式覆蓋這些樣式信息：api.style({fill: 'green', stroke: 'yellow'})。
*/
//數據參數順序
var dims = {
time: 0,
windSpeed: 1,
R: 2
};
var arrowSize = 12;
var point = api.coord([
api.value(dims.time),
api.value(dims.windSpeed)
]);
let rotationData= api.value(dims.R);
// console.log('param',param);
// console.log('api',api);
// console.log('point',point);
let obj={
type: 'path',
shape: {
pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//繪製圖形
//'M31 16l-15-15v9h-26v12h26v9z',
x: -arrowSize / 2,
y: -arrowSize / 2,
width: arrowSize,
height: arrowSize
},
rotation: -rotationData*(Math.PI/180),
//echarts文檔-配置項： series-custom.renderItem.return_path. rotation
//旋轉（rotation）：默認值是 0。表示旋轉的弧度值。正值表示逆時針旋轉。
//1) 角度轉換爲弧度公式：弧度=角度*(π /180 )
//2)弧度轉換爲角度公式： 角度=弧度*（180/π）
//平移（position）：默認值是 [0, 0]。表示 [橫向平移的距離, 縱向平移的距離]。右和下爲正值。
position: point,
style: api.style({
stroke: 'rgb(102, 0, 204)',//圖形顏色
lineWidth: 1
})
};
//console.log('obj',obj);
return obj
},
一些格式轉換方法（時間轉換、風速轉風力、風向度數轉文字、四捨五入保留2位小數）util.formatDate = function (date) { if (date) { if (typeof (date) === 'string') { date = new Date(date.replace(/-/g, '/')); } const y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; return y + '-' + m + '-' + d; } else { return null; } }; util.formatDateTime = function (date) { //console.log('formatDateTime',date) if (date) { if (typeof (date) === 'string') { date = new Date(date.replace(/-/g, '/')); } const y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(); h = h < 10 ? '0' + h : h; let mi = date.getMinutes(); mi = mi < 10 ? '0' + mi : mi; return y + '-' + m + '-' + d + ' ' + h + ':' + mi; } else { return null; } }; util.formatHourMinutes = function (date) { if (date) { if (typeof (date) === 'string') { date = new Date(date.replace(/-/g, '/')); } const y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(); h = h < 10 ? '0' + h : h; let mi = date.getMinutes(); mi = mi < 10 ? '0' + mi : mi; return h + ':' + mi; } else { return null; } }; util.formatTime = function (date) { if (date) { if (typeof (date) === 'string') { date = new Date(date.replace(/-/g, '/')); } const y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(); h = h < 10 ? '0' + h : h; let mi = date.getMinutes(); mi = mi < 10 ? '0' + mi : mi; return h + ':' + mi; } else { return null; } }; util.formatTwoDecimalPlaces= function (val) { if (val==undefined||val==null||typeof (val) !== 'number'){ return null; } let v2=100; return Math.round(val * v2) / v2; }; /** * 根據日期字符串獲取星期幾 * @param dateString 日期字符串（如：2020-05-02） * @returns {String|Null} */ util.formatWeek= function(dateString) { //dateString="2020-11-27 10:10:03.378"; if(dateString){ let date = new Date(dateString); //console.log('getWeek',date,dateString, date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds(),date.getDay()) return "周" + "日一二三四五六".charAt(date.getDay()); }else{ return null; } }; /** * 風向 角度轉文字 * @param data 向角（如：1.34） * @returns {Number} */ util.formatWindDirection= function(data) { if(data){ let val =parseInt((data/22.5)+0.5) //let arr= ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"] let arr2=["北","東北偏北","東北","東北偏東","東","東南偏東", "東南", "東南偏南","南","西南偏南","西南","西南偏西","西","西北偏西","西北","西北偏北"] let name= arr2[(val % 16)]; //console.log('name',name); return name; }else{ return null; } }; /** * 風力 m/s轉等級 * @param data 向角（如：1.34） * @returns {Number} */ util.formatWindGrades= function(data) { if(data){ let arr=["無風","軟風","輕風","微風","和風","清風","強風","勁風（疾風）","大風","烈風","狂風","暴風","颱風","颱風","強颱風","強颱風","超強颱風","超強颱風","超強颱風","超強颱風"]; let gradeArr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]; let arr2=[0.3,1.6,3.4,5.5,8.0,10.8,13.9,17.2,20.8,24.5,28.5,32.7,37.9,41.5,46.2,51.0,56.1,61.3,69.4]; let name= ""; let grade=""; if(data<arr2[0]){ name=arr[0]; grade=gradeArr[0]; }else if(data<arr2[1]){ name=arr[1]; grade=gradeArr[1]; }else if(data<arr2[2]){ name=arr[2]; grade=gradeArr[2]; }else if(data<arr2[3]){ name=arr[3]; grade=gradeArr[3]; }else if(data<arr2[4]){ name=arr[4]; grade=gradeArr[4]; }else if(data<arr2[5]){ name=arr[5]; grade=gradeArr[5]; }else if(data<arr2[6]){ name=arr[6]; grade=gradeArr[6]; }else if(data<arr2[7]){ name=arr[7]; grade=gradeArr[7]; }else if(data<arr2[8]){ name=arr[8]; grade=gradeArr[8]; }else if(data<arr2[9]){ name=arr[9]; grade=gradeArr[9]; }else if(data<arr2[10]){ name=arr[10]; grade=gradeArr[10]; }else if(data<arr2[11]){ name=arr[11]; grade=gradeArr[11]; }else if(data<arr2[12]){ name=arr[12]; grade=gradeArr[12]; }else if(data<arr2[13]){ name=arr[13]; grade=gradeArr[13]; }else if(data<arr2[14]){ name=arr[14]; grade=gradeArr[14]; }else if(data<arr2[15]){ name=arr[15]; grade=gradeArr[15]; }else if(data<arr2[16]){ name=arr[16]; grade=gradeArr[16]; }else if(data>=arr2[17]){ name=arr[17]; grade=gradeArr[17]; } //console.log('name',name); return {name:name,grade:grade}; }else{ return null; } }; export default util;
參考來源：
https://www.cnblogs.com/w2011/p/11277147.html
從該文檔知道怎麼做，但很多地方沒註釋不明白意思。
http://www.weather.com.cn/weather1d/101121201.shtml
中國天氣網 F12 獲取繪製箭頭圖形的編碼和顏色
