123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <template>
- <div>
- <!-- Chart container -->
- <div ref="radarChart" style="width: 100%; height: 400px"></div>
- <!-- Button to trigger dynamic chart update -->
- </div>
- </template>
- <script>
- import Plotly from "plotly.js-dist-min";
- export default {
- props: {
- chartData: {
- type: Object,
- default: {},
- },
- },
- data() {
- return {
- // chartData: {
- // Qp: "87955465.05833334",
- // Thc: "2094.177739484127",
- // Rdr: "12",
- // Qdr: "-87955465.05833334",
- // fs: "12333",
- // },
- };
- },
- mounted() {
- if (this.chartData) {
- this.drawRadarChart();
- }
- },
- 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)
- );
- // 构造 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: "多边形雷达图",
- marker: {
- color: "#636efc",
- },
- line: {
- color: "#636efc", // 多边形边框颜色
- width: 2, // 边框宽度
- },
- };
- // 雷达图布局
- const layout = {
- polar: {
- radialaxis: {
- visible: true,
- range: [Math.min(...values) * 1.1, Math.max(...values) * 1.1], // 设置范围
- },
- angularaxis: {
- showline: false, // 隐藏 `angularaxis` 线
- showticklabels: true, // 隐藏角度标签
- ticks: "", // 隐藏刻度
- },
- },
- showlegend: false, // 隐藏图例
- title: "多边形雷达图",
- };
- // 渲染图表
- Plotly.react(this.$refs.radarChart, [trace], layout);
- },
- },
- };
- </script>
|