vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题

由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示解决办法

ChangYan.

3016人浏览 · 2022-08-04 12:08:21

ChangYan. · 2022-08-04 12:08:21 发布

由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示，如图
在这里插入图片描述
最后发现我是通过id绑定的组件进行初始化，那么2个折线图就会使用同一个id，导致页面只渲染一个id，

正确的做法应该绑定ref进行初始化
正确代码如下：

  <div ref="LineChart" style="width: 100%; height: 25rem"></div>

使用this.$refs.LineChart进行获取

this.chart = echarts.init(this.$refs.LineChart)

展示结果正确！
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^