|
@@ -127,119 +127,90 @@ export default {
|
|
|
|
|
|
// 绘制箱线图
|
|
|
drawBoxPlot() {
|
|
|
- const chartContainer = this.$refs[`plotlyChart-${this.index}`];
|
|
|
- const { data, xaixs, yaixs, analysisTypeCode } = this.chartData;
|
|
|
-
|
|
|
- // 过滤数据,根据选定的日期范围
|
|
|
- const filteredData = data.map(this.filterData);
|
|
|
-
|
|
|
- // 创建图表数据
|
|
|
- const traces = [];
|
|
|
- const medianMarkers = [];
|
|
|
-
|
|
|
- filteredData.forEach((group) => {
|
|
|
- traces.push({
|
|
|
- x: group.xData,
|
|
|
- y: group.yData,
|
|
|
- type: "box",
|
|
|
- name: group.title,
|
|
|
- marker: {
|
|
|
- color: "#263649",
|
|
|
- },
|
|
|
- line: {
|
|
|
- width: 0.8, // 这里设置线条粗细(默认是 2)
|
|
|
- },
|
|
|
- fillcolor: "#458EF7", // 设置箱线图填充颜色,带透明度
|
|
|
- boxpoints: false, // 是否显示异常值
|
|
|
- boxmean: true, // 是否显示均值
|
|
|
- hovertemplate: (data) => {
|
|
|
- // 获取箱线图的统计数据
|
|
|
- const max = data.max; // 最大值
|
|
|
- const min = data.min; // 最小值
|
|
|
- const q1 = data.q1; // 下四分位数
|
|
|
- const q3 = data.q3; // 上四分位数
|
|
|
- const median = data.median; // 中位数
|
|
|
- const mean = data.mean; // 均值
|
|
|
- const iqr = q3 - q1; // 四分位距(IQR)
|
|
|
- const outliers = data.outliers || "无"; // 异常值(如果没有异常值,则显示“无”)
|
|
|
-
|
|
|
- return (
|
|
|
- `${xaixs}: %{x}<br>` + // 显示类别
|
|
|
- `<b>最大值</b>: ${max}<br>` + // 最大值
|
|
|
- `<b>最小值</b>: ${min}<br>` + // 最小值
|
|
|
- `<b>上四分位数 (Q3)</b>: ${q3}<br>` + // 上四分位数
|
|
|
- `<b>中位数 (Median)</b>: ${median}<br>` + // 中位数
|
|
|
- `<b>下四分位数 (Q1)</b>: ${q1}<br>` + // 下四分位数
|
|
|
- `<b>四分位距 (IQR)</b>: ${iqr}<br>` + // 四分位距
|
|
|
- `<b>均值 (Mean)</b>: ${mean}<br>` + // 均值
|
|
|
- `<b>异常值</b>: ${outliers}<br>` + // 异常值
|
|
|
- "<extra></extra>" // 额外的文本(可以留空)
|
|
|
- );
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- // 如果有中位点数据且中位点数据不为空,添加中位点
|
|
|
- if (group.medians && group.medians.x.length > 0) {
|
|
|
- medianMarkers.push({
|
|
|
- x: group.medians.x,
|
|
|
- y: group.medians.y,
|
|
|
- mode: "markers",
|
|
|
- marker: {
|
|
|
- color: "#f00",
|
|
|
- size: 3,
|
|
|
- },
|
|
|
- name: `${group.title} - 中位点`,
|
|
|
- type: "scatter",
|
|
|
- hovertemplate: `${xaixs}: %{x} <br> ${yaixs}: %{y} <br><b>中位点</b>: %{y}<br><extra></extra>`,
|
|
|
- });
|
|
|
- }
|
|
|
+ const chartContainer = this.$refs[`plotlyChart-${this.index}`];
|
|
|
+ const { data, xaixs, yaixs, analysisTypeCode } = this.chartData;
|
|
|
+
|
|
|
+ const filteredData = data.map(this.filterData);
|
|
|
+
|
|
|
+ const traces = [];
|
|
|
+ const medianMarkers = [];
|
|
|
+
|
|
|
+ filteredData.forEach((group) => {
|
|
|
+ traces.push({
|
|
|
+ x: group.xData,
|
|
|
+ y: group.yData,
|
|
|
+ type: 'box',
|
|
|
+ name: group.title,
|
|
|
+ marker: { color: '#263649' },
|
|
|
+ line: { width: 0.8 },
|
|
|
+ fillcolor: '#458EF7',
|
|
|
+ boxpoints: false, // 不显示异常值
|
|
|
+ boxmean: true, // 显示均值
|
|
|
+ hovertemplate:
|
|
|
+ `<b>${xaixs}</b>: %{x}<br>` +
|
|
|
+ `<b>最大值</b>: %{upperfence}<br>` +
|
|
|
+ `<b>上四分位数 (Q3)</b>: %{q3}<br>` +
|
|
|
+ `<b>中位数 (Median)</b>: %{median}<br>` +
|
|
|
+ `<b>下四分位数 (Q1)</b>: %{q1}<br>` +
|
|
|
+ `<b>最小值</b>: %{lowerfence}<br>` +
|
|
|
+ `<b>均值</b>: %{mean}<br>` +
|
|
|
+ `<extra></extra>`,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (group.medians && group.medians.x.length > 0) {
|
|
|
+ medianMarkers.push({
|
|
|
+ x: group.medians.x,
|
|
|
+ y: group.medians.y,
|
|
|
+ mode: 'markers',
|
|
|
+ marker: { color: '#f00', size: 3 },
|
|
|
+ name: `${group.title} - 中位点`,
|
|
|
+ type: 'scatter',
|
|
|
+ hovertemplate: `<b>${xaixs}</b>: %{x} <br> <b>${yaixs}</b>: %{y} <br><b>中位点</b>: %{y}<br><extra></extra>`,
|
|
|
});
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- const layout = {
|
|
|
- title: {
|
|
|
- text: analysisTypeCode + data[0].engineName,
|
|
|
- font: {
|
|
|
- size: 16,
|
|
|
- weight: "bold",
|
|
|
- },
|
|
|
- }, // 图表标题
|
|
|
-
|
|
|
- xaxis: {
|
|
|
- title: xaixs,
|
|
|
- type: "date",
|
|
|
- tickformat: "%Y-%m-%d",
|
|
|
- gridcolor: "rgb(255,255,255)",
|
|
|
- tickcolor: "rgb(255,255,255)",
|
|
|
- backgroundcolor: "#e5ecf6",
|
|
|
- },
|
|
|
- yaxis: {
|
|
|
- title: yaixs,
|
|
|
- gridcolor: "rgb(255,255,255)",
|
|
|
- tickcolor: "rgb(255,255,255)",
|
|
|
- backgroundcolor: "#e5ecf6",
|
|
|
- },
|
|
|
- plot_bgcolor: "#e5ecf6",
|
|
|
- gridcolor: "#fff",
|
|
|
- bgcolor: "#e5ecf6", // 设置背景颜色
|
|
|
- showlegend: true,
|
|
|
- };
|
|
|
- const getChartSetUp = (axisTitle) => {
|
|
|
- return this.setUpImgData.find((item) => item.text.includes(axisTitle));
|
|
|
- };
|
|
|
- // 更新x轴和y轴的范围与步长
|
|
|
- const xChartSetUp = getChartSetUp(layout.xaxis.title);
|
|
|
- if (xChartSetUp) {
|
|
|
- layout.xaxis.dtick = xChartSetUp.dtick;
|
|
|
- layout.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
|
|
|
- }
|
|
|
- const yChartSetUp = getChartSetUp(layout.yaxis.title);
|
|
|
- if (yChartSetUp) {
|
|
|
- layout.yaxis.dtick = yChartSetUp.dtick;
|
|
|
- layout.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
|
|
|
- }
|
|
|
-
|
|
|
- Plotly.newPlot(chartContainer, [...traces, ...medianMarkers], layout);
|
|
|
+ const layout = {
|
|
|
+ title: {
|
|
|
+ text: analysisTypeCode + data[0].engineName,
|
|
|
+ font: { size: 16, weight: 'bold' },
|
|
|
+ },
|
|
|
+ xaxis: {
|
|
|
+ title: xaixs,
|
|
|
+ type: 'date',
|
|
|
+ tickformat: '%Y-%m-%d',
|
|
|
+ gridcolor: 'rgb(255,255,255)',
|
|
|
+ tickcolor: 'rgb(255,255,255)',
|
|
|
+ backgroundcolor: '#e5ecf6',
|
|
|
},
|
|
|
+ yaxis: {
|
|
|
+ title: yaixs,
|
|
|
+ gridcolor: 'rgb(255,255,255)',
|
|
|
+ tickcolor: 'rgb(255,255,255)',
|
|
|
+ backgroundcolor: '#e5ecf6',
|
|
|
+ },
|
|
|
+ plot_bgcolor: '#e5ecf6',
|
|
|
+ showlegend: true,
|
|
|
+ };
|
|
|
+
|
|
|
+ const getChartSetUp = (axisTitle) => {
|
|
|
+ return this.setUpImgData.find((item) => item.text.includes(axisTitle));
|
|
|
+ };
|
|
|
+
|
|
|
+ const xChartSetUp = getChartSetUp(layout.xaxis.title);
|
|
|
+ if (xChartSetUp) {
|
|
|
+ layout.xaxis.dtick = xChartSetUp.dtick;
|
|
|
+ layout.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
|
|
|
+ }
|
|
|
+ const yChartSetUp = getChartSetUp(layout.yaxis.title);
|
|
|
+ if (yChartSetUp) {
|
|
|
+ layout.yaxis.dtick = yChartSetUp.dtick;
|
|
|
+ layout.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
|
|
|
+ }
|
|
|
+
|
|
|
+ Plotly.newPlot(chartContainer, [...traces, ...medianMarkers], layout);
|
|
|
+},
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|