// 多图表配置 const ecoption = { type: 'winds10', title: '10m风速风向（m/s）', series: { type: 'line', color: '#F49729' }, }; // 数据 const resdata = { date:["08日\n17时","08日\n18时","08日\n19时","08日\n20时","08日\n21时","08日\n22时","08日\n23时","09日\n00时","09日\n01时","09日\n02时","09日\n03时","09日\n04时","09日\n05时","09日\n06时","09日\n07时","09日\n08时","09日\n09时","09日\n10时","09日\n11时","09日\n12时","09日\n13时","09日\n14时","09日\n15时","09日\n16时","09日\n17时","09日\n18时","09日\n19时","09日\n20时","09日\n21时","09日\n22时","09日\n23时","10日\n00时","10日\n01时","10日\n02时","10日\n03时","10日\n04时","10日\n05时","10日\n06时","10日\n07时","10日\n08时","10日\n09时","10日\n10时","10日\n11时","10日\n12时","10日\n13时","10日\n14时","10日\n15时","10日\n16时","10日\n17时","10日\n18时","10日\n19时","10日\n20时","10日\n21时","10日\n22时","10日\n23时"], winds10: ["6.1","6.9","7.0","7.2","6.7","6.6","6.9","6.5","6.6","6.3","6.0","5.6","6.6","6.4","7.0","6.5","6.5","5.7","6.3","6.9","7.0","7.4","7.9","9.0","9.1","9.3","10.6","11.7","11.6","11.4","10.9","10.3","10.2","9.2","9.4","8.3","8.4","8.8","7.1","6.4","5.5","5.2","4.6","3.4","1.9","1.7","4.3","5.2","4.2","3.1","4.7","5.2","4.4","6.0","5.3"], windd10: ["119.5","114.3","113.1","118.6","107.4","100.3","110.4","113.2","116.3","128.8","119.7","113.4","107.6","107.1","101.0","106.9","104.9","108.4","112.3","116.5","120.3","127.9","126.7","134.9","141.3","141.8","143.5","144.6","150.3","148.8","153.7","153.5","150.7","146.5","143.0","147.3","149.6","152.0","148.5","141.8","142.8","138.0","138.5","145.0","183.1","310.5","6.8","26.6","47.7","36.5","343.0","334.8","322.1","321.2","333.1"] }; // 阈值 const _threshold = 6; // 风速无负数 let minValue = calMin(resdata.winds10) < 0 ? 0 : calMin(resdata.winds10); let maxValue = calMax(resdata.winds10); // 间隔 let splitNumber = 5; option = { title: { text: ecoption.title, left: 8, top: 8, textStyle: { color: '#fff', fontSize: 14, fontWeight: 'normal' }, }, grid: { left: '8%', right: '8%', top: 46, bottom: 74, }, dataZoom: [ { type: 'slider', height: 24, bottom: 12, start: 0, end: 100, }, ], xAxis: { type: 'category', boundaryGap: ecoption.boundaryGap || false, axisTick: { show: false }, axisLabel: { textStyle: { color: '#b9b8ce' } }, axisLine: { lineStyle: { color: '#cccccc' } }, data: resdata.date, }, yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, min: minValue, max: maxValue, splitNumber: splitNumber, interval: (maxValue - minValue) / splitNumber, }, visualMap: { show: false, pieces: [ { gt: _threshold, lte: maxValue, color: '#FF6464' }, { value: _threshold, color: '#FF6464' } ], outOfRange: { color: ecoption.series.color }, }, series: [ { name: ecoption.series.title, type: ecoption.series.type, smooth: true, color: ecoption.series.color, showAllSymbol: false, // 随主轴标签间隔隐藏策略 label: { show: true, position: 'top', textStyle: { color: 'inherit' }, // 设置为 'inherit'，则为视觉映射得到的颜色，如系列色。 }, markLine: { data: [ { name: '阈值', yAxis: _threshold, lineStyle: { color: '#FF6464' }, label: { color: '#FF6464' }, }, ], }, data: getWindSeries(resdata.winds10, resdata.windd10), }, ], }; // 计算最大值 function calMax(arr) { let min = Math.min.apply(null, arr); let max = Math.max.apply(null, arr); let interval = (max - min) / 5; // 平均值 max = Math.ceil(max + interval); // 向上取整 // console.log(min, max, interval); return max; } // 计算最小值 function calMin(arr) { let min = Math.min.apply(null, arr); let max = Math.max.apply(null, arr); let interval = (max - min) / 5; // 平均值 min = min === 0 ? min : Math.floor(min - interval); // 向下取整 // console.log(min, max, interval); return min; } function getWindSeries(winds, windd) { let windSeries = []; for (let i = 0; i < winds.length; i++) { windSeries.push({ value: parseFloat(winds[i]), symbol: getWindPic(windd[i]), symbolSize: 15, }); } return windSeries; } function getWindPic(winddirection) { let windPic = ''; //0 45 90 ... 按此为风的中线划分区间 if (winddirection <= 22.5 || winddirection > 337.5) // arrow_north ↓ windPic = 'path://M31.9304 1.13712L17.0147 33.7651L2.99726 1.05765L17.7764 8.44721L18.0074 8.56272L18.2353 8.44118L31.9304 1.13712Z'; else if (22.5 < winddirection && winddirection <= 67.5) // arrow_northeast ↙ windPic = 'path://M34.3599 21.9681L0.741488 34.4926L13.9573 1.45304L19.1825 17.1287L19.2642 17.3737L19.5113 17.4489L34.3599 21.9681Z'; else if (67.5 < winddirection && winddirection <= 112.5) // arrow_east ← windPic = 'path://M33.8629 31.9304L1.23488 17.0147L33.9424 2.99726L26.5528 17.7764L26.4373 18.0074L26.5588 18.2353L33.8629 31.9304Z'; else if (112.5 < winddirection && winddirection <= 157.5) // arrow_southeast ↖ windPic = 'path://M14.0319 34.3599L1.50743 0.741488L34.547 13.9573L18.8713 19.1825L18.6263 19.2642L18.5511 19.5113L14.0319 34.3599Z'; else if (157.5 < winddirection && winddirection <= 202.5) // arrow_south ↑ windPic = 'path://M3.06959 33.8629L17.9853 1.23488L32.0027 33.9424L17.2236 26.5528L16.9926 26.4373L16.7647 26.5588L3.06959 33.8629Z'; else if (202.5 < winddirection && winddirection <= 247.5) // arrow_southwest ↗ windPic = 'path://M1.64007 14.0319L35.2585 1.50743L22.0427 34.547L16.8175 18.8713L16.7358 18.6263L16.4887 18.5511L1.64007 14.0319Z'; else if (247.5 < winddirection && winddirection <= 292.5) // arrow_west → windPic = 'path://M1.13712 3.06959L33.7651 17.9853L1.05765 32.0027L8.44721 17.2236L8.56272 16.9926L8.44118 16.7647L1.13712 3.06959Z'; else if (292.5 < winddirection && winddirection <= 337.5) // arrow_northwest ↘ windPic = 'path://M21.9681 1.64007L34.4926 35.2585L1.45304 22.0427L17.1287 16.8175L17.3737 16.7358L17.4489 16.4887L21.9681 1.64007Z'; return windPic; }

Echarts在线免费图表