vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）

最新推荐文章于 2024-05-20 16:13:36 发布

我只叫又青

最新推荐文章于 2024-05-20 16:13:36 发布

阅读量996

点赞数 2

分类专栏： vue+echarts 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_48990643/article/details/116271633

版权

本文展示了如何在Vue中使用Echarts进行父子组件间的数据传递，以及如何在同一页面上复用组件绘制多个不同的图表。关键在于通过v-bind:id绑定不同的图表ID和ref绑定data，确保每个图表的唯一性。同时，通过按需引入Echarts组件，实现了资源的高效利用。

摘要由CSDN通过智能技术生成

vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）

最终的效果图，还需要做一些视觉效果，只需要在子组件里面编写就可以
最终效果

子组件内容

v-bind:id就是绑定id，从父组件获得不同的id，不然id相同echarts画图时无法识别图表就显示不出来。ref绑定data用于同一个页面可以重复调用子组件，以便获得不同的data。

<!-- 子组件.vue -->
<template>
  <div class="echarts">
    <!-- 子组件需要得到的值id和data-->
    <div v-bind:id=id ref="data" :style="{width: '100%', height: '338px'}" ></div>
  </div>
</template>

按需引入必需组件

<!-- 子组件.vue -->
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

<!-- 子组件.vue -->
props:["id","data"],    // 接收从父组件传回的值
    //实时监听父组件传过来的值
    //然后执行drawLine方法 重新绘制折线图
watch: {
   
      data: {
   
        handler(value) {
   
          this.drawLine(value)
        },
        deep: true//深度监听
      }
    },
mounted() {
   
     this.drawLine(this.data