|
|
@@ -1,13 +1,12 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <!-- Chart container -->
|
|
|
- <div ref="radarChart" style="width: 100%; height: 400px"></div>
|
|
|
- <!-- Button to trigger dynamic chart update -->
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ ref="radarChart"
|
|
|
+ style="width: 100%; height: 400px; min-width: 400px"
|
|
|
+ ></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Plotly from "plotly.js-dist-min";
|
|
|
+import * as echarts from "echarts";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
@@ -15,86 +14,192 @@ export default {
|
|
|
type: Object,
|
|
|
default: {},
|
|
|
},
|
|
|
+ itemCsvData: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ chartData: {
|
|
|
+ deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ handler() {
|
|
|
+ if (this.chartData && this.itemCsvData.length > 0) {
|
|
|
+ this.calculateValues();
|
|
|
+ this.drawRadarChart();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemCsvData: {
|
|
|
+ handler() {
|
|
|
+ if (this.chartData && this.itemCsvData.length > 0) {
|
|
|
+ this.calculateValues();
|
|
|
+ this.drawRadarChart();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // chartData: {
|
|
|
- // Qp: "87955465.05833334",
|
|
|
- // Thc: "2094.177739484127",
|
|
|
- // Rdr: "12",
|
|
|
- // Qdr: "-87955465.05833334",
|
|
|
- // fs: "12333",
|
|
|
- // },
|
|
|
+ maxValues: [],
|
|
|
+ minValues: [],
|
|
|
+ medianValues: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- if (this.chartData) {
|
|
|
- this.drawRadarChart();
|
|
|
- }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.chartData && this.itemCsvData.length > 0) {
|
|
|
+ this.calculateValues();
|
|
|
+ this.drawRadarChart();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听窗口大小变化，手动调用 resize 方法
|
|
|
+ window.addEventListener("resize", this.resizeChart);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 清除事件监听
|
|
|
+ window.removeEventListener("resize", this.resizeChart);
|
|
|
},
|
|
|
methods: {
|
|
|
- drawRadarChart() {
|
|
|
- console.log("this.chartData 雷达图设置", this.chartData);
|
|
|
- // 获取动态数据的 keys 和 values
|
|
|
- const keys = Object.keys(this.chartData);
|
|
|
- const values = Object.values(this.chartData).map((val) =>
|
|
|
- val === "" ? 0 : parseFloat(val)
|
|
|
+ // 计算最大值、最小值和中位值
|
|
|
+ calculateValues() {
|
|
|
+ const data = this.itemCsvData.map((item) => [
|
|
|
+ item.TurbinePowerRate,
|
|
|
+ item.TurbineRunRate,
|
|
|
+ item.WindSpeedAvr,
|
|
|
+ item.Thi,
|
|
|
+ item.Ws,
|
|
|
+ ]);
|
|
|
+
|
|
|
+ // 计算最大值
|
|
|
+ this.maxValues = data[0].map((_, colIndex) =>
|
|
|
+ Math.max(...data.map((row) => row[colIndex]))
|
|
|
);
|
|
|
|
|
|
- // 构造 Plotly 雷达图数据
|
|
|
- const trace = {
|
|
|
- type: "scatterpolar",
|
|
|
- r: [
|
|
|
- this.chartData.TurbinePowerRate,
|
|
|
- this.chartData.TurbineRunRate,
|
|
|
- this.chartData.WindSpeedAvr,
|
|
|
- this.chartData.Thi,
|
|
|
- this.chartData.Ws,
|
|
|
- ],
|
|
|
- theta: [
|
|
|
- "风机能量利用率",
|
|
|
- "风机可利用率",
|
|
|
- "平均风速",
|
|
|
- "利用小时",
|
|
|
- "功率曲线一致性系数",
|
|
|
- ],
|
|
|
- // r: [...values, values[0]], // 闭合多边形，起点与终点一致
|
|
|
- // theta: [...keys, keys[0]], // 闭合多边形，起点与终点一致
|
|
|
- fill: "toself", // 填充多边形区域
|
|
|
- name: this.chartData.wind_turbine_name + "机组指标",
|
|
|
- marker: {
|
|
|
- color: "#636efc",
|
|
|
+ // 计算最小值
|
|
|
+ this.minValues = data[0].map((_, colIndex) =>
|
|
|
+ Math.min(...data.map((row) => row[colIndex]))
|
|
|
+ );
|
|
|
+
|
|
|
+ // 计算中位值
|
|
|
+ this.medianValues = this.calculateMedian(data);
|
|
|
+ },
|
|
|
+ // 计算每列的中位值
|
|
|
+ calculateMedian(data) {
|
|
|
+ return data[0].map((_, colIndex) => {
|
|
|
+ const columnData = data
|
|
|
+ .map((row) => parseFloat(row[colIndex])) // 将字符串转换为数字
|
|
|
+ .sort((a, b) => a - b); // 数字排序
|
|
|
+ const mid = Math.floor(columnData.length / 2);
|
|
|
+ return columnData.length % 2 === 0
|
|
|
+ ? (columnData[mid - 1] + columnData[mid]) / 2
|
|
|
+ : columnData[mid];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 渲染雷达图
|
|
|
+ drawRadarChart() {
|
|
|
+ // 获取数据
|
|
|
+ const values = [
|
|
|
+ this.chartData.TurbinePowerRate,
|
|
|
+ this.chartData.TurbineRunRate,
|
|
|
+ this.chartData.WindSpeedAvr,
|
|
|
+ this.chartData.Thi,
|
|
|
+ this.chartData.Ws,
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 雷达图的指示器，使用最大值、最小值和中位值来动态设置
|
|
|
+ const indicators = [
|
|
|
+ {
|
|
|
+ name: "风机能量利用率",
|
|
|
+ max: this.maxValues[0],
|
|
|
+ min: this.minValues[0],
|
|
|
},
|
|
|
- line: {
|
|
|
- color: "#636efc", // 多边形边框颜色
|
|
|
- width: 2, // 边框宽度
|
|
|
+ {
|
|
|
+ name: "风机可利用率",
|
|
|
+ max: this.maxValues[1],
|
|
|
+ min: this.minValues[1],
|
|
|
},
|
|
|
- };
|
|
|
+ { name: "平均风速", max: this.maxValues[2], min: this.minValues[2] },
|
|
|
+ { name: "利用小时", max: this.maxValues[3], min: this.minValues[3] },
|
|
|
+ {
|
|
|
+ name: "功率曲线一致性系数",
|
|
|
+ max: this.maxValues[4],
|
|
|
+ min: this.minValues[4],
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
- // 雷达图布局
|
|
|
- const layout = {
|
|
|
- polar: {
|
|
|
- bgcolor: "#e5ecf6", // 设置背景色为黄色
|
|
|
- radialaxis: {
|
|
|
- showline: false,
|
|
|
- visible: false,
|
|
|
- range: [Math.min(...values) * 1.1, Math.max(...values) * 1.1], // 设置范围
|
|
|
- gridcolor: "white", // 设置径向网格线为白色
|
|
|
- },
|
|
|
- gridshape: "linear", //设置形状默认圆形，可以设置为linear多边形
|
|
|
- angularaxis: {
|
|
|
- showline: false, // 隐藏 `angularaxis` 线
|
|
|
- showticklabels: true, // 隐藏角度标签
|
|
|
- ticks: false, // 隐藏刻度
|
|
|
- gridcolor: "white", // 设置角度网格线为白色
|
|
|
+ // 构建 ECharts 配置项
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: this.chartData.wind_turbine_name + "机组指标",
|
|
|
+ left: "center",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ indicator: indicators,
|
|
|
+ center: ["45%", "45%"], // 雷达图的位置
|
|
|
+ radius: "50%", // 设置雷达图的半径
|
|
|
+ splitNumber: 5, // 设置雷达图网格的数量
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: { show: true },
|
|
|
},
|
|
|
},
|
|
|
- showlegend: false, // 隐藏图例
|
|
|
- title: this.chartData.wind_turbine_name + "机组指标",
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: this.chartData.wind_turbine_name + "机组指标",
|
|
|
+ type: "radar",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: values,
|
|
|
+ name: this.chartData.wind_turbine_name + "机组指标",
|
|
|
+ lineStyle: {
|
|
|
+ width: 2, // 边框宽度
|
|
|
+ color: "#636efc", // 边框颜色
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(99, 110, 252, 0.3)", // 填充区域的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "中位值",
|
|
|
+ type: "radar",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this.medianValues,
|
|
|
+ name: "中位值",
|
|
|
+ lineStyle: {
|
|
|
+ width: 2, // 边框宽度
|
|
|
+ color: "#f39c12", // 中位值线条颜色
|
|
|
+ type: "dashed", // 中位值线条类型（虚线）
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(243, 156, 18, 0.3)", // 中位值的填充区域颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
|
|
|
- // 渲染图表
|
|
|
- Plotly.react(this.$refs.radarChart, [trace], layout);
|
|
|
+ // 使用 ECharts 渲染雷达图
|
|
|
+ const chart = echarts.init(this.$refs.radarChart);
|
|
|
+ chart.setOption(option);
|
|
|
+ },
|
|
|
+ // 图表调整大小
|
|
|
+ resizeChart() {
|
|
|
+ const chart = echarts.getInstanceByDom(this.$refs.radarChart);
|
|
|
+ if (chart) {
|
|
|
+ chart.resize();
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
liujiejie