vue封装的echarts组件被同一个页面多次引用无法正常显示问题（已解决）

问题：第二张图显示空白，折线图并没有展示出来

当我们在封装了echarts组件之后，需要在同一个页面中引入多次时，会出现数据覆盖等一系列问题
当时我是修改了id也无济于事，达不到我需要的效果

解决方案

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

<template>
  <div>
    <div class="chart" ref="Echart">div>
  div>
template>
1
2
3
4
5

初始化时我们将

this.charts = echarts.init(document.getElementById(echarts));
1

更改为

 // 创建 echarts 实例。
  this.myChartOne = echarts.init(this.$refs.Echart);
1
2

然后就可以在页面中重复引入啦

正确显示：

完整代码：

echarts组件：

<template>
  <div
    class="chart"
    ref="Echart"
    :style="{ width: '240px', height: '200px' }"
  >div>
template>

<script>
export default {
  name: "lineChart",
  props: {
    //接受父组件传递来的数据
    labelList: Array,
    xAxisList: Array,
  },
  data() {
    return {};
  },
  watch: {
    labelList: function (newQuestion, oldQuestion) {
      this.initChart();
    },
  },
  mounted() {
    this.init();
    this.initChart();
  },
  methods: {
    init() {
      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = self.$echarts.init(self.$refs.Echart);
          self.chart.resize();
        });
      }, 10);
    },
    initChart() {
      // 创建 echarts 实例。
      var myChartOne = this.$echarts.init(this.$refs.Echart);
      myChartOne.setOption({
        //直角坐标系内绘图网格
        grid: {
          top: "5%",
          left: "3%", //grid 组件离容器左侧的距离
          right: "4%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
        xAxis: {
          type: "category",
          data: this.xAxisList,
          name: "data",
          axisLine: {
            show: false, //隐藏x轴线
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏x轴刻度
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
            },
          },
        },
        series: [
          {
            data: this.labelList,
            type: "line",
            // smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              normal: {
                color: "#FDE708", //改变折线点的颜色
                lineStyle: {
                  color: "#FDE708", //改变折线颜色
                },
              },
            },
          },
        ],
      });
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

页面引入及使用

        
          <div class="bkChart">
            <lineChart :labelList="labelList" :xAxisList="xAxiscoldAreaList" />
          div>
        
          <div class="bkChart">
            <lineChart :labelList="labelList" :xAxisList="xAxisHotAreaList" />
          div>
1
2
3
4
5
6
7
8

因为重复使用的两次echarts数据不同，data中我写入两组数据

<script>
import lineChart from "../../../components/Echarts/lineChart.vue";
export default {
  components: {
    lineChart,
  },
   data() {
    return {
      xAxiscoldAreaList: ["2", "4", "6", "8", "10", "12"],
      xAxisHotAreaList: ["2", "4", "6", "8", "10", "12"],
      coldAreaList: ["3", "5", "7", "10", "4", "6"],
      hotAreaList: ["6", "3", "5", "8", "10", "6"],
    };
  },
 } 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这样就可以在同一个页面中重复多次的引入封装的echarts组件啦！！！