一些问题3——引入echarts（父子组件形式并利用websocket接收数据）

weixin_58412143

已于 2022-03-24 09:34:13 修改

阅读量1.2k

点赞数

文章标签： vue echarts

于 2022-03-24 09:30:40 首次发布

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

版权

本文介绍了如何在Vue项目中通过父子组件形式结合WebSocket来实现实时数据更新，展示Echarts图表。首先，详细讨论了父组件如何创建WebSocket连接并传递数据到子组件。接着，讲述了子组件如何接收来自父组件的数据，并用Echarts进行渲染。最后，提到了当Echarts的series包含多个对象值时的处理策略。

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

1、父组件

<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
//子组件中需要用到的数组
        lineData:  [],
        Search:[],
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    this.setData();
   
  },
  methods: {
    // 根据自己的业务情况修改
    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 id="chartLineBox">
    <Echart :options="options" id="bottomLeftChart" height="350px" width="100%"></Echart>
  </div>
</template>

<script>
  import Echart from "@/common/echart";
  export default {
props:['themetype'],
    data() {
      return {
        options: {},
        //websocket 地址
       a: "/****/"，
      };
    },
    inject: ['reload'], // 使用reload()
    components: {
      Echart,
    },
//接收父组件值
    props: {
      cdata: {
        type: Object,
        default: () => ({}),
      },
    },
    mounted() {
//自适应
      this.$nextTick(() => {
        this.initEcharts1()
      })
    },
    created() {
      this.getWebSocketVal2()
    },
    methods: {
      initEcharts1() {
        let myCharts = document.getElementById("bottomLeftChart");
        myCharts.style.width = 29 + "rem";
        myCharts.style.height = 25 + "rem";
        this.myCharts = this.$echarts.init(myCharts);
        this.myCharts.setOption(this.options);
        this.myCharts.resize();
        let self = this;
        window.addEventListener("resize", () => { // 通过resize方法来重设图表宽度
          let myCharts = document.getElementById("bottomLeftChart");
          myCharts.style.width = 29 + "rem";
          myC