echarts 报表通过组件传递 父组件通过 props 向子组件赋值

 子组件 echarts报表

<template>
  <div id="chart1" style="width:600px;height: 400px"></div>
</template>

<script>

import * as echarts from "echarts";

export default {
  name: "chart1",
  data(){
    return{
    }
  },
  props:[
    "seriesData"
  ],
  methods:{
     initData(){
     option:{
        xAxis:{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis:{
          type: 'value'
        },
        series:[
          {
            name: '销量',
            data: this.seriesData,
            type: 'line'
          }
        ],
      }
    // 基于准备好的dom，初始化echarts实例
    const chartDom = document.getElementById('chart1')
    // 初始化echarts的DOM
    const myChart1 = echarts.init(chartDom);
    //绘制图标
    myChart1.setOption(option)
  }
 }
},
  // DOM 渲染完成触发 钩子函数
  mounted() {
   this.initData();
},
watch(){
    seriesData(){
        this.initData();
    }
}

</script>
<style scoped>
</style>

mounted()，vue中的钩子函数，‌mounted()钩子是一个理想的地方来执行DOM操作，‌因为在这个阶段，‌组件已经被挂载到DOM树上，‌你可以安全地访问和操作其DOM元素。‌意思是组件在被创建的时候就已经加载完毕。

option 是报表的一些基本信息，watch() 监听 props 值是否发生改变 如果发生改变则重新加载echarts

父组件

<template>
  <div>
    <h1>Hello World！</h1>
    <chart1 v-bind:series-data="seriesData"></chart1>
    <chart2></chart2>
    <chart3></chart3>
  </div>
</template>

<script>
import Chart1 from "@/views/charts/chart1.vue";
import Chart2 from "@/views/charts/chart2.vue";
import Chart3 from "@/views/charts/chart3.vue";

export default {
  name: "index",
  components: {Chart3, Chart2, Chart1},
  data(){
    return{
      seriesData:[150, 230, 224, 218, 135, 147, 260]
    }
  },
  created() {
  }
}
</script>

<style scoped>

</style>

父组件中通过 v-bind 属性名:"属性值"  向子组件传递数据  子组件通过  props:[] 接收父组件传递的数据    这里的属性名要和子组件props中的数据对应  属性值实在父组件中维护的数据 可以自定义

最终效果如图：