父组件的值传给子组件echarts

已于 2022-03-31 09:46:46 修改
阅读量2.5k 收藏 9
点赞数 2
分类专栏： 前端 文章标签： vue
于 2022-03-31 09:30:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eternal_tc/article/details/123863153
版权

案例为父组件的时间选择框传值给子组件。

一、父组件中

在这里插入图片描述

1、父组件-index.vue： message-data和子组件传值，该值不能用驼峰命名，子组件用驼峰命名接收。

<BarChartTimeOut  :message-data="barChartTimeOut"/>

如：<子组件BarChartTimeOut :message-data=“父组件需传的数据barChartTimeOut”/>

2、js
（1）import 导入子组件
	    import BarChartTimeOut from "./components/BarChartTimeOut";
（2） 子组件注入
        components: {
            BarChartTimeOut,
            TablePeopleChart,
        },

（3）return 中定义父组件需传的数据barChartTimeOut
（4）根据实际情况给父组件需传输的值赋值

二、子组件，是一个柱状图

名字为：barChartTimeOut.vue。messageData该项和父组件上面说明的一致，采用父组件的驼峰命名，如果只是单个单词，用该单词即可。
1、props中接收，测试发现该项不要，首次加载获取不到父组件传过来的值。

messageData:{
    type: undefined, //验证类型，也可以验证其他类型
    default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值
},

2、监听，数据变换时重新实例化图表数据

watch:{
    messageData(n){
        console.log("监听柱状图：",n);
        this.chartTime = n;
        this.getReleaseTimeOut(this.chartTime);
        this.$nextTick(() => {
            this.initChart();
        });
    }
},

3、图表初始化时，把父组件的值传给接口调用

mounted() {
    console.log("柱状图--mounted-：",this.messageData)
    this.chartTime = this.messageData;
    this.getReleaseTimeOut(this.chartTime);
    this.$nextTick(() => {
        this.initChart();
    });
},

三、详细代码

说明父组件为index.vue，两个子组件：一个BarChartTimeOut.vue为柱状图组件，另外TablePeopleChart为一个表格组件（该组件传值没贴代码，其实是一致的）。

1、父组件 index.vue，父组件中包括自定义的当天、当月、当年的快捷时间选择按钮，根据选择的值传给子组件，由子组件调用后台接口。

<template>
    <div class="dashboard-editor-container">
        <el-row>
            <!--放行超时统计-->
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-releaseTimeout">
                    <div class="title_frame">
                        <div class="title">放行超时统计
                            <div class="title_fast">
                                <el-button type="text" plain size="mini" round   @click="getByDayTimeOut">今日</el-button>
                                <el-button type="text" plain size="mini" round   @click="getByMonthTimeOut">本月</el-button>
                                <el-button type="text" plain size="mini" round   @click="getByYearTimeOut">今年</el-button>
                                <div class="date_title">
                                    <el-date-picker
                                        v-model="formData.selectReleaseTimeoutDate"
                                        type="daterange"
                                        align="right"
                                        size = "small"
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份"
                                        value-format ="yyyy-MM-dd"
                                        @change="getByDateTimeOut">
                                    </el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--上面的时间选择是父组件，下面的是引用了BarChartTimeOut 的一个子组件，
		message-data和子组件传值，该值不能用驼峰命名，子组件用驼峰命名接收。barChartTimeOut是父组件的需要传输的值。
		-->
                    <div class="chart_bar">
                        <BarChartTimeOut :message-data="barChartTimeOut"/>
                    </div>
                </div>
            </el-col>

            <!--放行统计-->
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-releasePeople">
                    <div class="title_frame">
                        <div class="title">放行统计
                            <div class="title_fast">
                                <el-button type="text" plain size="mini" round @click="getByDayPeople">今日</el-button>
                                <el-button type="text" plain size="mini"  round @click="getByMonthPeople">本月</el-button>
                                <el-button type="text" plain size="mini"  round @click="getByYearPeople">今年</el-button>
                                <div class="date_title">
                                    <el-date-picker
                                        v-model="formData.selectPeopleTimeDate"
                                        type="daterange"
                                        align="right"
                                        size = "small"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份"
                                        value-format ="yyyy-MM-dd"
                                        @change="getByDatePeople">
                                    >
                                    </el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--和上面类型，另外一个子组件-->
                    <div >
                        <TablePeopleChart :message-data="tablePeopleChartTime"/>
                    </div>
                </div>

            </el-col>


        </el-row>
    </div>
</template>

<script>
    import BarChartTimeOut from "./components/BarChartTimeOut";
    import TablePeopleChart from "./components/TablePeopleChart";
    import { Format } from "@/api/fault/utilsTime";

    const lineChartData = {
        newVisitis: {
            expectedData: [100, 120, 161, 134, 105, 160, 165],
        },
    };

    export default {
        name: "Index",

	// 子组件注入
        components: {
            BarChartTimeOut,
            TablePeopleChart,
        },
        data() {
            return {
                //存放日期所选的值
                formData:{
                    selectReleaseTimeoutDate: '',
                    selectPeopleTimeDate:'',
                },
                //父组件的值
                barChartTimeOut:[],
                tablePeopleChartTime:[],
            };
        },
        created(){
	//首次进入默认选择当天的时间
            this.getByDayTimeOut();
            this.getByDayPeople();
        },
        methods: {
            //时间框选择
            getByDateTimeOut(){
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("fu时间选择",this.barChartTimeOut);
            },
            getByDatePeople(){
                this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
                console.log("fu时间人员选择",this.tablePeopleChartTime);
            },

            //当天时间
            getByDayTimeOut(){
                const start = new Date().Format("yyyy-MM-dd");
                this.$set(this.formData,'selectReleaseTimeoutDate',[start,start]);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("fu当天选择",this.formData.selectReleaseTimeoutDate);
          
            },
            getByDayPeople(){
                const start = new Date().Format("yyyy-MM-dd");
                this.$set(this.formData,'selectPeopleTimeDate',[start,start]);
                this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
                console.log("fu当天人员选择",this.tablePeopleChartTime);
            },


            // 当前月第一天和最后一天
            getByMonthTimeOut(){
                let month = this.getMonth();
                console.log("fu当月超时选择",month);
                this.$set(this.formData,'selectReleaseTimeoutDate',month);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("fu当月超时选择",this.formData.selectReleaseTimeoutDate);
            },
            getByMonthPeople(){
                let month = this.getMonth();
                this.$set(this.formData,'selectPeopleTimeDate',month);
                this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
                console.log("fu当月人选择",this.formData.selectPeopleTimeDate);
            },

            // 获取本年第一天和最后一天
            getByYearTimeOut(){
                let year = this.getYear();
                this.$set(this.formData,'selectReleaseTimeoutDate',year);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("fu当年超时选择",this.formData.selectReleaseTimeoutDate);
            },
            getByYearPeople(){
                let year = this.getYear();
                this.$set(this.formData,'selectPeopleTimeDate',year);
                this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
                console.log("fu当年人选择",this.formData.selectPeopleTimeDate);
            },

            getMonth(){
                var date = new Date();
                var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
                return [firstDay.Format("yyyy-MM-dd"),lastDay.Format("yyyy-MM-dd")]
            },

            getYear(){
                var date = new Date();
                var now_year = date.getFullYear();
                var YearStart = new Date(now_year, 0, 1);
                var YearEnd = new Date(new Date(now_year, 11, 31));
                return [YearStart.Format("yyyy-MM-dd"),YearEnd.Format("yyyy-MM-dd")]
            },

        },
        }
    };
</script>

<style lang="scss" scoped>
</style>

2、BarChartTimeOut.vue子组件。

（另外一个TablePeopleChart子组件一样，不展示了）

<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 {getReleaseTimeOutStatistics,} from "@/api/fault/faultFlightDynamic";
const animationDuration = 6000;

export default {
    mixins: [resize],
    props: {
        messageData:{
            type: undefined, //验证类型，也可以验证其他类型
            default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值
        },

        className: {
            type: String,
            default: "chart",
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "300px",
        },
    },
    watch:{
        messageData(n){
            console.log("监听柱状图：",n)
            this.chartTime = n;
            this.getReleaseTimeOut(this.chartTime);
            this.$nextTick(() => {
                this.initChart();
            });
        }
    },

    data() {
        return {
            chart: null,
            chartTime:[],
            timeOutX:[],
            timeOutY:[],
        };
    },
    mounted() {
        console.log("柱状图--mounted-：",this.messageData)
        this.chartTime = this.messageData;
        this.getReleaseTimeOut(this.chartTime);
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        //请求后台接口
        getReleaseTimeOut(time){
            // const time = '';
            getReleaseTimeOutStatistics(time).then((response) => {
                console.log("放行超时统计请求：",time);
                console.log("放行超时统计返回：",response);
                if (response.code === 0) {
                    if (response.data) {
                        this.timeOutX = [];
                        this.timeOutY = [];
                        response.data.forEach((item) => {
                            this.timeOutX.push(item.station);
                            this.timeOutY.push(item.number);
                        });
                    }
                    this.initChart();
                }
            });
        },

        initChart() {
            // this.chart = echarts.init(this.$el, "dark");
            this.chart = echarts.init(this.$el, "white");
            console.log("--XXXX--------", this.timeOutX);
            console.log("--YYYYY--------", this.timeOutY);
            this.chart.setOption({
                title:{
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: [
                    {
                    type: 'category',
                    data: this.timeOutX,
                    animationDuration,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 50
                    },
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: this.timeOutY,
                    animationDuration
                    }
                ],
                itemStyle: {
                    color: '#0066FF',
                    // color: '#2ca9e1',
                    barBorderRadius: 5,
                    // shadowBlur: 3
                },
            });
        },
    },


};
</script>
<style>
    .bar_chart{
        width: 100px;
        line-height: 50px;
    }
    .title {
        padding: 0 10px;
        height: 30px;
        color: #b6a2de;
        line-height: 15px;
        border-bottom: 1px solid #dddddd;
        text-align: center;
    }
</style>

浏览器打印效果：


另外说明：
父组件给子组件的div传值，无需监听。只用props就能得到数据。
div中用{{}}展示数据即可，{{}}填入子组件接收的方法.字段

怪异的bug
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echarts3-- 向echarts图表里传入数据
web
06-06 4762
我使用的是angular9做的项目 用的官方简单的echarts做例子 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var my
vue父子传值 echarts图的应用
Tel_17674647975的博客
06-07 534
echarts图
vue echarts各图表类型组件封装
最新发布
qq_34811855的博客
04-07 127
【代码】vue echarts各图表类型组件封装。
Vue中父组件向子组件echarts传值问题
imkaifan的博客
03-17 1493
问题描述： vue中子组件是echarts图表，父组件向子组件利用props传值，值传递过去了，但是，echarts不渲染。 问题现象再深一层次： 数据没有驱动试图 解决办法： 用v-if进行一个渲染判断 上代码： 父组件 <template> <div class="putongradar_container"> <div class="container_left"> <div class="title">{{ zonghNengl
vue中echarts父子组件异步传值
weixin_52919504的博客
09-27 1513
vue中echarts父子组件异步传值
echarts父组件向子组件传值报错
weixin_44706621的博客
04-13 389
对于echarts 一直都是云里雾里 开发时候碰到一个问题一直在那儿倒腾，最后九牛二虎再加外圈刮，摸索出来了 先上图看报错 好家伙 本以为一切都好了 没想到控制台报错了。对于这个错一直蒙状态 审视代码于是发现是数据问题，查阅了官网及各种资料发现，只需要加上两个细节点就可以。以图为证。 1.先加一个数据监听函数 2.再在父组件将数据过滤一遍，确保出过去的数据有值。 ...
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括...echarts Ax
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
微信小程序Echarts图表组件使用方法详解
10-16
主要介绍了微信小程序Echarts图表组件使用方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，
使用Vue开发动态刷新Echarts组件的教程详解
08-27
主要介绍了使用Vue开发动态刷新Echarts组件的教程详解,需要的朋友可以参考下
echarts父组件传子组件值动态获取数据改变
xiaoHelloWord的博客
05-14 981
点击会调取接口进行更改数据 进行赋值 然后传给子组件 props: { echartStyle: { // 样式 - 1 type: Object, default() { return {} } }, titleText: { //标题文本 - 1 type: String, default: '' }, opinion: { //区域名称 - 1 ..
解决vue3向echarts组件传值的问题
Vince_13的博客
11-14 1748
这几天在工作中遇到一个需求，我想要实现从vue3中选择不同的选项卡，进而改变图表的展示，一开始不知道怎么将vue3所获取的值传入到echarts组件中，来对其进行双向绑定。在上述选项卡中，含有一个change函数，函数的作用为，将选项卡中的className属性传递给cur变量，为了改变选项卡选中之后的样式改变。在子组件echarts中需要传入数据，类型，横坐标（纵坐标的数据由series的data提供），以及细分类的属性。以上为vue3与子组件echarts进行通信的流程，希望对您有帮助。
echarts 事件传值
river、的博客
03-21 4414
一、通过元素的自定义属性传值 1、设置 首先在绘制图表的时候，通过 设置自定义 属性设置需要传递的值 // 设置自定义属性 $('#pieChartBox').attr("data-hostType",'1'); // pieChart2("pieChartBox",desc,title,data,color); 2...
Vue3+echarts 动态数据传递
weixin_46382462的博客
03-17 1669
Vue3+echarts 动态数据传递/绑定
在vue项目中echarts父子组件异步传值，解决数据更新，echarts页面不更新问题
qq_41920758的博客
06-27 1561
echarts图表是作为子组件进行展示的，需要父组件发送请求并获取到返回数据后再传给子组件进行数据展示，但是由于子组件比父组件先渲染，所以就会导致子组件获取不到父组件传递的数据。// 源IP地址echarts 渲染的echarts在组件种渲染 接口数组由父组件传入。在子组件中，通过props接收父组件的数据，并通过watch监听。// 检测是否已经存在echarts实例，如果不存在，则不再去初始化。// 监测父组件传过来的数据进行处理成柱形echarts需要的格式。首先，在父组件中引入子组件并注册。
eCharts柱状图点击传值
Deku_Ln的博客
10-02 2341
以Angular为例，这里我将echarts封装成一个子组件，通过父子组件传值来将点击后的数据传给父组件来进行相关操作 // 子组件 @Output() titleName? = new EventEmitter() this.eCharts.init(this.bar_charts.nativeElement).on('click', params => { this.partsName = params.name // params作为参数记录当前
vue3中使用echarts的子组件接收父级传来参数，并重新渲染 +++watch监听的用法
qq_39536826的博客
12-23 6009
vue3中echarts的子组件接收父级传来值并渲染
怎么把后端的model对象传到前端js或jquery里
z2431435的博客
03-20 1597
但如果不想通过th标签而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，则要使用内联的方法。(‘#id’)的方式获取数据，一般用val获取，但是这样的话整个对象会被转换成String字符串，后序获取较麻烦，可能需要费很大力，建议用于简单的对象，如果存放了列表、map等对象获取时会较困难。th:inline="javascript"是Thymeleaf中的内联写法，支持在javascript访问model中的数据。直接获取对象的值，但是在。
Vue3父组件使用props传值给子组件重新绘制echarts图表
weixin_46764819的博客
12-12 1739
目前网上实现这个小需求的大都是vue2的写法，更新一个vue3的写法，用了setup函数。子组件代码，vue3+setup。父组件传值还是正常传。
vue3父组件给echarts子组件传值
09-25
确保在父组件中使用子组件时，将需要传递的数据作为props的属性值传递给子组件即可。 以下是一个例子，演示了父组件给echarts子组件传值的过程： 组件： ``` <echarts-component :chartData="data"></echarts-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怪异的bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值