场景

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图：

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的博客页面是父组件，时间选择器是父组件的标签，柱状图是引用的子组件。

实现在父组件选择时间后调用子组件的方法重新渲染柱状图。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、子组件BarChartDataRange声明name属性

export default {name: "BarChartDateRange",data() {return {

2、父组件中引入子组件

import BarChartDateRange from "@/components/Echarts/BarChartDateRange";export default {name: "Blog",components: {BarChartDateRange,},data() {return {

3、父组件中添加子组件显示并设置ref属性

<BarChartDateRange ref="BarChartDateRange"></BarChartDateRange>

4、父组件中调用子组件方法

this.$refs.BarChartDateRange.getSelectedRangeList(val);

5、子组件完整代码


<template><div :style="{ height: '300px', width: '300px' }" />
</template><script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import request from '@/utils/request'
import { formatDate } from "@/utils/index";export default {name: "BarChartDateRange",data() {return {chart: null,typeData: [{ product: "2021.11.23", 博客数: 20 },{ product: "2021.11.24", 博客数: 30 },{ product: "2021.11.25", 博客数: 35 },{ product: "2021.11.26", 博客数: 43 },],yAxisMax: 0,queryParam: {beginDate: null,endDate: null,},};},created() {//默认开始时间为一周前this.queryParam.beginDate = formatDate(new Date().getTime() - 60 * 1000 * 60 * 24 * 6);//默认结束时间时间当前时间this.queryParam.endDate = formatDate(new Date().getTime());this.getList().then((response) => {var res = response.data;if (res) {//清空柱状图的数据源this.typeData = [];//遍历后台响应数据，构造柱状图数据源for (var key in res) {this.typeData.push({ product: key, 博客数: res[key] });}}this.initChart(this.typeData);});},mounted() {},methods: {//调用后台接口查询数据getList() {return request({url: "/system/blog/list",method: "get",params: this.queryParam,});},//父组件调用子组件的该方法进行重新渲染柱状图getSelectedRangeList(range) {var startDate = range[0];var endDate = range[1];this.queryParam.beginDate = startDate;this.queryParam.endDate = endDate;this.getList().then((response) => {var res = response.data;if (res) {this.typeData = [];for (var key in res) {this.typeData.push({ product: key, 博客数: res[key] });}}this.initChart(this.typeData);});},initChart(typeData) {this.chart = echarts.init(this.$el, "macarons");this.chart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},},grid: {top: 10,left: "2%",right: "2%",bottom: "3%",containLabel: true,},legend: {//图例data: ["博客数"],},xAxis: [{type: "category",axisPointer: {type: "shadow",},axisLabel: {interval: 0,rotate: 40,},},],yAxis: [{type: "value",name: "单位：(条)",min: 0,max: 30,interval: 10,axisLabel: {formatter: "{value}",},},],dataset: {source: typeData,},series: [{name: "博客数",type: "bar",barWidth: "40%",},],});},},
};
</script>

6、父组件完整代码

<template><div><div><BarChartDateRange ref="BarChartDateRange"></BarChartDateRange></div><div class="block"><el-date-pickersize="large"type="daterange"v-model="value1"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="dateSelectChange":value-format="dateFormat"></el-date-picker></div></div>
</template>
<script>
import BarChartDateRange from "@/components/Echarts/BarChartDateRange";export default {name: "Blog",components: {BarChartDateRange,},data() {return {value1: "",dateFormat: "yyyy-MM-dd",};},created() {},methods: {/** 查询博客列表 */dateSelectChange(val) {if (val) {var startDate = new Date(val[0]).getTime();var endDate = new Date(val[1]).getTime();debugger;if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {this.$message({message: "所选时间范围不能大于7天",type: "warning",});}else{this.$refs.BarChartDateRange.getSelectedRangeList(val);}}},},
};
</script>

Vue中父组件调用子组件的方法相关推荐

vue父页面调用子页面及方法及传参，鼠标光标定位
项目场景: vue父页面调用子页面及方法问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了原因分析: 在我之前添加鼠标指针定位 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
vue父组件调用子组件方法报错的解决方法
vue父组件调用子组件方法报错在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件,如下图所示: 子组件中定义的方法: setup() {const getList = () => ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
react类组件中父组件调用子组件函数
1.自定义事件子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
一.父组件调用子组件的方法步骤拆解: (1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 (2)子组件:1.实现子组件自己的渲染.数据处理功能 2.使用父组件的变量 ...

Vue中父组件调用子组件的方法

场景

实现

Vue中父组件调用子组件的方法相关推荐

最新文章

热门文章