123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <div>
- <div v-loading="loading" :id="`plotDiv-${inds}`" style="width: 100%; height: 550px">
- <el-empty v-if="isError" description="请求失败"></el-empty>
- </div>
- </div>
- </template>
- <script>
- import Plotly from "plotly.js-dist";
- import axios from "axios";
- import { myMixin } from "@/mixins/chartRequestMixin";
- export default {
- props: {
- fileAddr: {
- default: "",
- type: String,
- },
- inds: {
- type: [Number, String],
- default: 1,
- },
- },
- mixins: [myMixin],
- data() {
- return {
- // 数据结构
- chartData: {},
- };
- },
- watch: {
- chartData: {
- deep: true,
- handler(v) {
- if (v) {
- this.renderChart();
- }
- },
- },
- },
- mounted() {
- this.getData();
- },
- methods: {
- async getData() {
- if (this.fileAddr !== "") {
- try {
- this.loading = true
- this.cancelToken = axios.CancelToken.source();
- console.log(this.cancelToken)
- const resultChartsData = await axios.get(this.fileAddr, {
- cancelToken: this.cancelToken.token
- });
- console.log(resultChartsData)
- this.chartData = resultChartsData.data;
- this.renderChart();
- this.isError = false
- this.loading = false
- } catch (error) {
- this.isError = true
- this.loading = false
- }
- }
- },
- renderChart() {
- const { axes, data, analysisTypeCode } = this.chartData;
- // 从数据中提取 windSpeedRange 和动态生成 speedLabels 和 colorscale
- const windSpeedRanges = new Set();
- data.forEach((engine) => {
- engine.windRoseData.forEach((item) => {
- windSpeedRanges.add(item.windSpeedRange);
- });
- });
- const speedLabels = Array.from(windSpeedRanges).sort(); // 动态范围值
- const colors = [
- "#FBFDD4",
- "#C0E2BA",
- "#57A3BF",
- "#1A2971",
- "#FF6F61",
- "#FFC300",
- "#6A0572",
- ]; // 可扩展颜色列表
- const colorscale = {};
- speedLabels.forEach((label, index) => {
- colorscale[label] = colors[index % colors.length];
- });
- // 定义风向的 16 等分
- const windDirections = Array.from({ length: 16 }, (_, i) => i * 22.5);
- // 数据聚合
- const counts = {};
- speedLabels.forEach((speedLabel) => {
- counts[speedLabel] = Array(windDirections.length).fill(0);
- });
- data.forEach((engine) => {
- engine.windRoseData.forEach((item) => {
- const { windDirection, windSpeedRange } = item;
- const index = windDirections.findIndex(
- (dir, i) =>
- windDirection >= dir && windDirection < windDirections[i + 1]
- );
- if (index !== -1 && counts[windSpeedRange]) {
- counts[windSpeedRange][index] += item.frequency;
- }
- });
- });
- // 构建 traces
- const traces = speedLabels.map((speedLabel) => {
- const percentage = counts[speedLabel];
- return {
- r: percentage,
- theta: windDirections,
- name: speedLabel,
- type: "barpolar",
- marker: {
- color: colorscale[speedLabel],
- line: {
- color: "white",
- width: 1,
- },
- },
- };
- });
- // 图表布局
- const layout = {
- title: `${analysisTypeCode} - ${data[0]?.enginName} `,
- plot_bgcolor: "#e5ecf6",
- polar: {
- bgcolor: "#e5ecf6",
- radialaxis: {
- title: { text: axes.radial },
- gridcolor: "rgb(255,255,255)",
- showgrid: true,
- linecolor: "rgb(255,255,255)",
- },
- angularaxis: {
- title: { text: axes.angular },
- tickvals: windDirections,
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- linecolor: "rgb(255,255,255)",
- },
- },
- showlegend: true,
- legend: { title: { text: axes.levelname } },
- };
- Plotly.newPlot(`plotDiv-${this.inds}`, traces, layout);
- },
- },
- };
- </script>
- <style scoped></style>
|