概述
问题:同一页面下复用同一个echarts组件,会发生覆盖,然后只渲染了一个echarts出来。
答:echarts使用id来初始化组件,故要复用的话,id要动态传入子组件。
子组件
<div class="Echarts">
<div :id="barChartId" style="width: 100%;height: 400px"></div>
</div>
<script>
props: {
barChartId: {
type: String,
default: "main"
}
}
var myChart = echarts.init(document.getElementById(that.barChartId));
</script>
父组件
<bar-chart :bar-chart-id="barChartId1" :ctext="ctext1" :cdata="cdata1" style="background-color: #fff"></bar-chart>
最后
以上就是醉熏羊为你收集整理的vue中复用echarts的全部内容,希望文章能够帮你解决vue中复用echarts所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复