Vue中父组件调用子组件的方法
场景SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图:SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的博客页面是父组件,时间选择器是父组件的标签,柱状图是引用的子组件。实现在父组件选择时间后调用子组件的方法重新渲染柱状图。注:博客:BADAO_LIUMANG_QIZH
·
场景
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-picker
size="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>
更多推荐
已为社区贡献36条内容
所有评论(0)