一些问题4——Vue+websocket下的风向风速图（极坐标系下的堆叠柱状图）

本文链接：https://blog.csdn.net/weixin_58412143/article/details/123702988

本文介绍如何使用Vue.js与WebSocket技术，结合Echarts库在极坐标系下绘制堆叠柱状的风向风速图表，涵盖了父组件与子组件的交互过程。

摘要由CSDN通过智能技术生成

1、父组件

<template>
  <div style="width: 920px;height: 26.875rem;">
    <Chart :cdata="cdata" ref="ActualWindchart" :message="message"/>
  </div>
</template>

<script>
  import Chart from './chart.vue'
  export default {
    name: 'ActualWind',
    props: ['messagedaughter'],
    data() {
      return {
        cdata: {
          Wind_Direction_2 : [],
          Wind_Speed_2 : [],
          obj:[],
          legendData:[],
          valData:[]
        },
        message: '',
      };
    },
    components: {
      Chart,
    },
    mounted() {
      this.setData();
    },
    methods: {
//别的页面传过来的一些值（对象）并传给子组件
      getData(data) {
        this.message = data
        this.$refs.ActualWindchart.getData(data);
      },
      // 根据自己的业务情况修改
      setData() {
        for (let i = 0; i < this.cdata.barData.length - 1; i++) {
          let rate = this.cdata.barData[i] / this.cdata.lineData[i];
          this.cdata.rateData.push(rate.toFixed(2));
        }
      },
    }
  };
</script>

<style lang="scss" scoped>

</style>

2、子组件

<template>
  <div class="body">
    <Echart style="position: relative;" :options="options" id="topRightChart" height="100%" width="100%"></Echart>
  </div>
</template>
<script>
  import Echart from "@/common/echart";
  export default {
    data() {
      return {
        options: {},
        WS_2Url: "/接口地址/",
        message: '',
        form: {
          taskSerialNumber: '',
        },
        legend: [
          '24.5-28.4',
          '20.8-24.4',
          '17.2-20.7',
          '13.9-17.1',
          '10.8-13.8',
          '8.0-10.7',
          '5.5-7.9',
          '3.4-5.4',
          '1.6-3.3',
          '0.3-1.5',
          '0.0-0.2',
        ],
        list: [//单纯的展示后台应该返回的数据格式
          [
            1, 2, 3, 4, 3, 5, //0-5   北风六条数据
            1, 2, 3, 4, 3, 5, //6-11  东风六条数据
            1, 2, 3, 4, 3, 5, //12-17 南风六条数据
            1, 2, 3, 4, 3, 2, //18-23 西风六条数据
          ], // 风速 0.0-0.2m/s 数组
          [
            2, 3, 4, 3, 5, 6, //0-5   北风六条数据
            2, 3, 4, 3, 5, 6, //6-11  东风六条数据
            2, 3, 4, 3, 5, 6, //12-17 南风六条数据
            2, 3, 4, 4, 3, 2, //18-23 西风六条数据
          ], // 风速 0.3-1.5m/s 数组
          // ……
        ],
        WS_2websocket: undefined
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({}),
      },
    },
    created() {
      this.