自己怎么建个网站赚钱吗,阿里云免费网站备案,做宾馆网站好,wordpress影视站主题在数据处理和可视化领域#xff0c;我们经常需要对一系列数据点进行分析。本文将介绍如何在给定的数据点中找到对应于特定Y值的X值#xff0c;并设置标线起始点标记在ECharts图表中#xff0c;效果图如下#xff1a; 实现步骤
1、数据准备
let seriesData [// 提供日期…在数据处理和可视化领域我们经常需要对一系列数据点进行分析。本文将介绍如何在给定的数据点中找到对应于特定Y值的X值并设置标线起始点标记在ECharts图表中效果图如下 实现步骤
1、数据准备
let seriesData [// 提供日期字符串ECharts 将自动解析[1672531200000, 220],[1672617600000, 0],[1672704000000, 901],[1672790400000, 1330],[1672876800000, 1630],[1672963200000, 430],[1673049600000, 250]]
2、计算阈值Y值
假设Y值为最大值的90%
let maxDataValue seriesData.reduce((max, item) Math.max(max, item[1]), 0);
let thresholdValue maxDataValue * 0.9;3、查找对应的X值
function findXByY(dataPoints, givenY) {// 遍历数据点数组for (let i 0; i dataPoints.length - 1; i) {// 获取当前点和下一个点的坐标const [x1, y1] dataPoints[i];const [x2, y2] dataPoints[i 1];// 判断给定Y值是否在当前点和下一个点之间if (y1 givenY givenY y2) {// 计算并返回对应的X值return x1 (givenY - y1) * (x2 - x1) / (y2 - y1);}}// 如果给定Y值不在任何两个点之间返回undefinedreturn undefined;
}const xValue findXByY(seriesData, thresholdValue);4、在ECharts图表中标记
option {// ECharts配置项xAxis: {type: time,splitLine: {show: false}},yAxis: {type: value},series: [{data: seriesData,type: line,markLine: {symbol: [none, none],data: [// 根据xValue添加垂直于X轴的虚线[{xAxis: xValue,yAxis: 0}, {xAxis: xValue,yAxis: thresholdValue}],// 其他标记线// ...]}}]
}完整代码
templatedivdiv idmyEcharts classcharts/div/div
/templatescript
import * as echarts from echarts;
export default {data() {return {};},mounted() {this.seriesData [[0, 1733286720001],[30, 1733286721001],[40, 1733286722001],[60, 1733286723001],[100, 1733286724001],[100, 1733286725001],[200, 1733286726001],[200, 1733286727001],[300, 1733286728001],[0, 1733286729001],];this.seriesData this.seriesData.map((pair) [pair[1], pair[0]]);let firstYZero this.seriesData.find((pair) pair[1] 0);let maxDataValue this.seriesData.reduce((max, item) Math.max(max, item[1]),0);let thresholdValue maxDataValue * 0.9;const xValue this.findXByY(this.seriesData, thresholdValue);let option {xAxis: {type: time, // 使用时间轴name:日期,splitLine: {show: false,},axisLabel: {interval: 0, },},yAxis: {type: value,},series: [{data: this.seriesData,type: line,// smooth: true,markLine: {symbol: [none, none], // 线两端无箭头data: [// 垂直于X轴的虚线[{xAxis: xValue, // 使用日期字符串yAxis: 0,lineStyle: {color: #000,}},{xAxis: xValue,yAxis: thresholdValue,},],[{xAxis: firstYZero[0], // 使用日期字符串yAxis: 0,lineStyle: {color: #000,}},{xAxis: firstYZero[0],yAxis: thresholdValue,},],// 垂直于Y轴的虚线[{xAxis: xValue, // 使用日期字符串yAxis: thresholdValue,label: {formatter: 响应时间,position: middle, // 标签位置},lineStyle: {color: #000,}},{xAxis: firstYZero[0],yAxis: thresholdValue,},],[{type: max,lineStyle: {color: red,},},{xAxis: min,yAxis: max,},],{yAxis: 250,label: {formatter: 标准线,position: end,},lineStyle: {color: #00B79D,},},],},},],};let chartDom document.getElementById(myEcharts);let myChart echarts.init(chartDom);myChart.setOption(option);},methods: {findXByY(dataPoints, givenY) {for (let i 0; i dataPoints.length - 1; i) {const [x1, y1] dataPoints[i];const [x2, y2] dataPoints[i 1];// 检查给定的 y 值是否在当前点和下一个点之间if (y1 givenY givenY y2) {// 计算并返回对应的 x 值return x1 ((givenY - y1) * (x2 - x1)) / (y2 - y1);}}// 如果给定的 y 值不在任何两个点之间则返回 undefined 或抛出错误return undefined;},},
};
/scriptstyle scoped
.charts {width: 100%;height: 600px;
}
/style
