同级、兄弟之前传输值

同级、兄弟之前传输值

signRelease 给 pieChartRate 传值。

步骤：
1、新建一个js作为桥梁。即创建一个Vue实例。

eventBus.js

import Vue from 'vue'
export default new Vue;

2、两个兄弟组件都需引入该js，引入为bus
3、signRelease 定义一个事件，点击或者是数据改变。我的是@change。
4、signRelease 中$emit进行传值。bus.$emit(‘sendByBus’,传输的数据)，sendByBus自行定义，两个兄弟组件需一致。
5、pieChartRate 中$on进行接收值。

代码

1、signRelease.vue作为传值者

<template>
    <div  @change="sendToMessage">
    <el-row :gutter="40" class="panel-group">
        <el-col :xs="24" :sm="24" :lg="6" class="card-panel-col">
            <div class="content">
                <div class="_content_title">标题</div>
                <div class="description">
                    <div class="_content_iteam">{{signReleaseData.noReleaseConfirmNum}}</div>
                </div>
            </div>
        </el-col>
    </el-row>
    </div>
</template>

<script>
import bus from '../../../../api/fault/eventBus';
import {getReleaseStatistics} from "@/api/fault/faultFlightDynamic";

export default {
    data(){
        return{
            signReleaseData:"",
        }
    },
    created(){
        this.getSignReleaseData();
    },
    methods:{
        //获取数据
        getSignReleaseData(){
            getReleaseStatistics().then((response) => {
                console.log("---接口返回--------", response);
                if (response.code == 0) {
                    this.signReleaseData = response.data;
                    console.log("---框框组件的值--------", this.signReleaseData);
		//调用该方法传值
                    this.sendToMessage();
                }
            });
        },
        sendToMessage(){
            bus.$emit('sendByBus',this.signReleaseData);
        },
    },
}

</script>

<style>
</style>

2、pieChartRate.vue，作为接收者

<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
    import echarts from "echarts";
    require("echarts/theme/dark"); // echarts theme
    import resize from "./mixins/resize";
    import bus from '../../../../api/fault/eventBus';
    
    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: "chart",
            },
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "300px",
            },

        },
        data() {
            return {
                chart: null,
                chartData: {},
            };
        },
        mounted() {
			//获取到传递过来的值
            bus.$on('sendByBus',data =>{
                console.log("同级组件传过来的值：",data);
                this.chartData = data;
                this.$nextTick(() => {
                    this.initChart();
                });

            });

        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, "white");
                // this.chart = echarts.init(this.$el, "dark");

                this.chart.setOption({
                    title:[{
                        text: '进度\n' +this.chartData.percentage,
                        left: 'center',
                        top: 'center',
                        },
                        {
                        text: '进度统计表',
                        top: '1%',
                        // left:'30%',
                        textStyle:{
                            color:'black',
                            fontWeight:'346',
                            fontFamily:'sans-serif',
                            fontSize: 15
                        }
                    }
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center',
                    },
                    series: [
                        {
                            color:[
                                '#0066FF',
                                '#cccccc',
                            ],
                            // name: 'Access From',
                            type: 'pie',
                            radius: ['60%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'right',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: this.chartData.releaseConfirmNum, name: '已完成' },
                                { value: this.chartData.noReleaseConfirmNum, name: '未完成' },
                            ]
                        }
                    ]
                });
            },
        },
    };
</script>
<style>
</style>

浏览器打印结果：