我是靠谱客的博主 醉熏羊,最近开发中收集的这篇文章主要介绍vue中复用echarts,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

问题:同一页面下复用同一个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所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(54)

评论列表共有 0 条评论

立即
投稿
返回
顶部