vue封装的echarts组件多次被同一个页面调用（带源码）

将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分

<div class="page_basicLine">
    <div
      id="main_basicLine main_basicLine2"
      style="width: 500px; height: 500px"
      ref="echarts"
    ></div>
  </div>

初始化时我们将echarts

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

更改为

  var myChart = echarts.init(this.$refs.echarts);

页面正常引入我们封装的echarts组件

 <div class="box">
      <basicLine :chartData="chartdata1" />
      <basicLine :chartData="chartdata2" />
   </div>

首页js里面的数据，死数据，或者是接口获取数据

<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>

**

之间复制到编译器查看效果，别忘了全局安装echarts

**

1.npm install echarts --save
2.main引入全局// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

父组件源码 （newHome.vue 别忘了配置路由哟！！！）

<template>
  <div class="box">
        <!-- 首页 父组件！！！！！！！！！！！！  -->
        <!-- //:chartData 为自定义名称   chartdata1为数据data名称 -->
        <basicLine  :chartData="chartdata1" />  

        <basicLine :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>
  <!--子组件 page_basicLine这个名称千万不要和父组件最外层形同不然样式,可能变行 -->
  <div class="page_basicLine">
    <!-- 子组件！！！！！！！！！！！！！ -->
    <div
      id="main_basicLine main_basicLine2"
      style="width: 500px; height: 500px"
      ref="echarts"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartData"], //  父组件传过来自定义组件名称
  mounted() {
    this.getEha();
  },
  methods: {
    getEha() {
      var myChart = echarts.init(this.$refs.echarts);
      var option = {
        title: {
          text: "添加标题",
          subtext: "副标题",
          left: "left",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          // splitLine: {
          //   show: true,
          // },
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],// 数据
            // data:this.chartData,
            data: this.chartData, //  父组件传过来自定义组件名称
            type: "line",
          },
        ],
      };
      window.addEventListener("resize", function () {
        charts.resize();
      });
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>

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