vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)

一.echarts组件封装调用

1.单个组件封装调用，用下面这个

  var myChart = echarts.init(document.getElementById("main_basicLine"));

2.多个组件封装调用，用下面这个

var myChart = echarts.init(this.$refs.echarts);
  this.$nextTick(() => {
    myChart.resize();
  });`

二.echarts组件封装调用，自适应

1. 单个图表自适应，用下面这个

   window.onresize = myChart.resize;
      // .resize后不用加括号哦，一般如果window resize的时候不设置其他，可以这样写

2. 多个图表同时自适应 使用监听事件，最后还要移除一下，参数一样，用下面这个

window.addEventListener("resize", function () {
    myChart.resize();
  });

父组件源码homeBase.vue

<template>
  <div class="box">
        <!-- 首页 父组件！！！！！！！！！！！！  -->
        <!-- //:chartData 为自定义名称   chartdata1为数据data名称 -->
        <!-- basicLine 里面可以设置宽高，引进了的是百分比，设置固定高度px,宽度可以百分比布局，引进来之后自动撑满 -->
        <basicLine style="width:30%;height:350px;" :chartData="chartdata1" />  
        <basicLine style="width:30%;height:350px;" :chartData="chartdata2" />
  </div>
</template>

<script>
import basicLine from "../../views/klinecharts/BasicLine.vue";  //  这里是引入折线图组件挂载到首页

export default {
  components: {
    basicLine,
  },
  data() {
    return {
      chartdata1: [                                 //  这里也可以从接口获取数据展示效果
        123,456,678,890,435,23,567,789,980
      ],
       chartdata2: [
        567,345,67867,56,7,67,867,8,678,678,56
      ],
    };
  },
};
</script>

子组件源码BasicLine.vue

<template>
  <div class="page_basicLine">
    <!-- 这个是子组件  -->
    <!-- 这里要注意用百分比一般，才能设置自适应方法 -->
    <div
      id="main_basicLine"
      style="width: 100%; height: 100%"
      ref="echarts"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartData"],
  mounted() {
    this.getEha();
  },
  methods: {
    getEha() {
      // 一.echarts组件封装调用
      // 1.单个组件封装调用，用下面这个
      // var myChart = echarts.init(document.getElementById("main_basicLine"));
      // 2.多个组件封装调用，用下面这个
      var myChart = echarts.init(this.$refs.echarts);
      this.$nextTick(() => {
        myChart.resize();
      });
      // 二.echarts组件封装调用，自适应
      // 1.   单个图表自适应，用下面这个
      // window.onresize = myChart.resize;
      // .resize后不用加括号哦，一般如果window resize的时候不设置其他，可以这样写
      // 2.  多个图表同时自适应    使用监听事件，最后还要移除一下，参数一样，用下面这个
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      var option = {
        title: {
          text: "添加标题",
          subtext: "副标题",
          left: "left",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],// 数据
            data: this.chartData,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  beforeDestroy() {
    //在组件生命周期结束的时候销毁。  removeEventListener和addEventListener中对应的参数要一致。
    window.removeEventListener("resize", function () {
      myChart.resize();
    });
  },
};
</script>

<style scoped>
</style>

如下图:

1.

2.

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！