場景

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中父组件调用子组件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。