关于vue中使用echarts多图(四张图)，导致不能自适应，随着窗口的变化而变化，也就是说resize()无效或者说是只有最后一个生效(v-for遍历只有最后一个生效的解决办法)

在开发过程中，我发现项目的很多地方会用到echarts图，因为如果每个echarts单独写的话，感觉很麻烦，所以我就直接使用组件的形式，把一个echarts用组件的形式封装起来，然后里面的数据就由父组件传值进去，子组件(即这个echarts组件)接收，但是在开发过程中，我遇到了一个问题，就是多图的时候，我使用遍历数组的形式，然后传id给echarts组件，发现组件里面的resize()其他三个图无效，只有最后一个生效，这个问题困扰了我很久，上网查资料找答案，发现网上的答案，都是使用把多图的每个id拿出来初始化，然后每个id进行resize()，这样确实有效果，但是问题是我是遍历的，而不是每个图都是独立的，都是由id传进来，所以我自己想了一个方法，就是定义一个数组，然后把这个初始化的echarts的实例push进这个数组去，最后要进行resize()的时候，对这个数组进行遍历，然后每个进行resize()即可。
代码如下：
这个是组件的代码，命名为chart.vue

<template>
<div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import { debounce } from '@/utils/tools';
let chart = null;
export default {
// mixins: [resize],
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '460px',
},
// 线性图的id
id: {
type: String,
default: '',
},
// 里面内容
dataLegend: {
type: Array,
default: () => [],
},
// 横坐标内容
dataListChart: {
type: Array,
default: () => [],
},
// 线形图里面的数据
seriesDataChart: {
type: Array,
default: () => [],
},
// 悬浮框
tooltip: {
type: Object,
default: () => {},
},
},
data() {
return {
// chart: null,
$_sidebarElm: null,
$_resizeHandler: null,
echartsAll: [],
};
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (chart) {
// console.log('this.echartsAll',this.echartsAll);
// console.log('chart',chart);
for (let i = 0; i < this.echartsAll.length; i++) {
this.echartsAll[i].resize();
}
// chart.resize();
}
}, 100);
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
this.$nextTick(() => {
setTimeout(this.initChart, 300);
});
},
activated() {
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
},
deactivated() {
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
},
beforeUnmount() {
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
if (!chart) {
return;
}
chart.dispose();
chart = null;
},
computed: {},
methods: {
initChart() {
// chart = echarts.init(this.$el, 'macarons');
// if (chart != null && chart != '' && chart != undefined) {
//
chart.dispose(); //销毁
// }
chart = echarts.init(document.getElementById(this.id));
this.echartsAll.push(chart);
// this.$store.state.user.echartsAll.push(chart);
chart.setOption(
{
// title: {
//
text: 'Stacked Area Chart',
// },
tooltip: this.tooltip,
legend: {
data: this.dataLegend,
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
// 横坐标内容
data: this.dataListChart,
},
],
yAxis: [
{
type: 'value',
},
],
series: this.seriesDataChart,
},
true
);
},
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler);
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler);
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler();
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
},
},
};
</script>

然后是父组件代码，也就是引用以上的组件的代码：

<template>
<div class="dashboard">
<el-row :gutter="30">
<el-col :span="12" v-for="(item, index) in testReportList" :key="index">
<div class="item">
<div class="b">
<FootPanelGroupVue :report="item.report"></FootPanelGroupVue>
<div v-for="(item2, indey) in item.charts" :key="indey">
<AreaChartVue
:id="item.id"
:dataLegend="dataLegend"
:seriesDataChart="item2.seriesDataChart"
:dataListChart="item2.dataListChart"
:tooltip="item2.tooltip"
></AreaChartVue>
</div>
<div class="report-title">{{ item.title }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import FootPanelGroupVue from '@/views/dashboard/components/FootPanelGroup.vue';
import AreaChartVue from '@/components/AreaChart/chart.vue';
import { getGeneral, getReportChart } from '@/api';
export default {
name: 'Dashboard',
components: {
BasePage,
BarChart,
CountTo,
PanelGroup,
TestParamTable,
TestReportTable,
TestFailTable,
TestFailRateTable,
FootPanelGroupVue,
AreaChartVue,
},
data() {
return {
typeList: [],
typeTextList: [],
levelList: [],
levelTextList: [],
statOrg: {},
statStaff: {},
// statOrgCert: { innerLevel1: [], innerLevel2: [], outerLevel1: [], outerLevel2: [] },
innerLevel1: [],
innerLevel2: [],
outerLevel1: [],
outerLevel2: [],
statSigner: {},
xText: [],
flag: false,
dataList: ['岩土工程类', '混凝土工程类', '金属结构类', '机械电气类', '量测类'],
dataLegend: ['合格报告数', '不合格报告数', '其他报告数量'],
seriesList: [], // 柱状图的数据
// 悬浮窗
tooltip: {},
// 堆叠图的数据
seriesDataConstruction: [], // 施工方
seriesDataParallel: [], // 平行检
seriesDataThird: [], // 第三方检
seriesDataSupervise: [], // 监督检
// 堆叠图的横坐标内容
dataListConstruction: [], // 施工方
dataListParallel: [], // 平行检
dataListThird: [], // 第三方检
dataListSupervise: [], // 监督检
// 堆叠图的纵坐标数据内容
// 施工方
dataConstructionReportYaxis: [],
dataConstructionPassYaxis: [],
dataConstructionFailYaxis: [],
dataConstructionOtherYaxis: [],
// 平行检
dataParallelReportYaxis: [],
dataParallelPassYaxis: [],
dataParallelFailYaxis: [],
dataParallelOtherYaxis: [],
// 第三方检
dataThirdReportYaxis: [],
dataThirdPassYaxis: [],
dataThirdFailYaxis: [],
dataThirdOtherYaxis: [],
// 监督检
dataSuperviseReportYaxis: [],
dataSupervisePassYaxis: [],
dataSuperviseFailYaxis: [],
dataSuperviseOtherYaxis: [],
// 概览
headDataList: [],
activeName: 'testParam',
// 四张堆叠图数据
testReportList: [],
// 堆叠图数据
dataResult: [],
};
},
methods: {
// 获取报告图标数据
async getReportChartData() {
const res = await getReportChart.fn({});
// console.log('获取报告图标数据是', res);
if (res.code == 0) {
this.dataResult = res.data;
this.getChartData();
} else {
this.$message.warning(res.message);
}
},
// 获取报告数量
getReportChart() {
// 施工方
this.seriesDataConstruction = [
{
name: '合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataConstructionPassYaxis,
},
{
name: '不合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataConstructionFailYaxis,
},
{
name: '其他报告数量',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataConstructionOtherYaxis,
},
];
// 平行检
this.seriesDataParallel = [
{
name: '合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataParallelPassYaxis,
},
{
name: '不合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataParallelFailYaxis,
},
{
name: '其他报告数量',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataParallelOtherYaxis,
},
];
// 第三方检
this.seriesDataThird = [
{
name: '合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataThirdPassYaxis,
},
{
name: '不合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataThirdFailYaxis,
},
{
name: '其他报告数量',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataThirdOtherYaxis,
},
];
// 监督检
this.seriesDataSupervise = [
{
name: '合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataSupervisePassYaxis,
},
{
name: '不合格报告数',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataSuperviseFailYaxis,
},
{
name: '其他报告数量',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: this.dataSuperviseOtherYaxis,
},
];
this.tooltip = {
trigger: 'axis',
// axisPointer: {
//
type: 'cross',
//
label: {
//
backgroundColor: '#6a7985',
//
},
// },
formatter: function (params, ticket, callback) {
let htmlStr = '';
let counts = 0;
let xName = '';
for (let i = 0; i < params.length; i++) {
let param = params[i].data;
xName = params[i].name;
counts = Number(param) + counts;
}
htmlStr += '<div style="font-size:14px; color: #666; font-weight: 400; line-height: 1; margin:5px 0px;">';
htmlStr += xName;
htmlStr += '</div>';
htmlStr += '<div>';
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:10px;background-color:violet;"></span>';
htmlStr +=
'<span style="font-size:14px; color:#666; font-weight:400; margin-left:2px">报告总数量：</span><span style="float:right; text-align:right; margin-left:20px; font-size: 14px; color: #666; font-weight:900">' +
counts +
' 个</span>';
htmlStr += '<div style="clear: both;"></div>';
htmlStr += '</div>';
for (let i = 0; i < params.length; i++) {
// console.log('总的数据是', params[i]);
let param = params[i].data;
let seriesName = params[i].seriesName;
let value = param; //y轴值
let color = params[i].color;
htmlStr += '<div>';
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:10px;background-color:' + color + ';"></span>';
htmlStr +=
'<span style="font-size:14px; color:#666; font-weight:400; margin-left:2px">' +
seriesName +
'：</span>' +
'<span style="float:right; margin-left:20px; font-size: 14px; color: #666; font-weight:900">' +
value +
' 个</span>';
htmlStr += '<div style="clear: both;"></div>';
htmlStr += '</div>';
}
return htmlStr;
},
};
},
getChartList() {
return [
{
report: [
{
reportTitle: '报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格率',
reportNum: '0',
},
],
title: '施工方自检情况',
id: 'main',
charts: [
{
seriesDataChart: this.seriesDataConstruction,
dataListChart: this.dataListConstruction,
tooltip: this.tooltip,
},
],
},
{
report: [
{
reportTitle: '报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格率',
reportNum: '0',
},
],
title: '平行检情况',
id: 'second',
charts: [
{
seriesDataChart: this.seriesDataParallel,
dataListChart: this.dataListParallel,
tooltip: this.tooltip,
},
],
},
{
report: [
{
reportTitle: '报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格率',
reportNum: '0',
},
],
title: '第三方检情况',
id: 'three',
charts: [
{
seriesDataChart: this.seriesDataThird,
dataListChart: this.dataListThird,
tooltip: this.tooltip,
},
],
},
{
report: [
{
reportTitle: '报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格报告数量',
reportNum: 0,
addNum: 0,
},
{
reportTitle: '不合格率',
reportNum: '0',
},
],
title: '监督检情况',
id: 'four',
charts: [
{
// dataLegend: ['合格报告数', '不合格报告数', '其他报告数量'],
seriesDataChart: this.seriesDataSupervise,
dataListChart: this.dataListSupervise,
tooltip: this.tooltip,
},
],
},
];
},
// 堆叠图数据整理
getChartData() {
this.dataResult.forEach((item) => {
// console.log('数据item是', item);
if (item.testingType == 0) {
let testReportCount = '';
let testReportFailCount = '';
let testReportOtherCount = '';
let testReportPassCount = '';
let failRate = '';
// 遍历返回的数据
item.statistical.chartData.forEach((itemChart) => {
testReportCount = Number(itemChart.testReportCount) + Number(testReportCount);
testReportFailCount = Number(itemChart.testReportFailCount) + Number(testReportFailCount);
testReportPassCount = Number(itemChart.testReportPassCount) + Number(testReportPassCount);
testReportOtherCount = Number(itemChart.testReportOtherCount) + Number(testReportOtherCount);
itemChart.month = itemChart.month.substring(0, 7);
this.dataListConstruction.push(itemChart.month);
this.dataConstructionPassYaxis.push(testReportPassCount);
this.dataConstructionFailYaxis.push(testReportFailCount);
this.dataConstructionOtherYaxis.push(testReportOtherCount);
});
// 把服务器组装完之后的数据放到自己的数组中
this.testReportList.forEach((itemList) => {
if (itemList.title == '施工方自检情况') {
itemList.report.forEach((itemReport) => {
if (itemReport.reportTitle == '报告数量') {
itemReport.addNum = item.statistical.testReportRecentCount;
itemReport.reportNum = testReportCount;
} else if (itemReport.reportTitle == '不合格报告数量') {
itemReport.addNum = item.statistical.testReportRecentFailCount;
itemReport.reportNum = testReportFailCount;
} else if (itemReport.reportTitle == '不合格率') {
if (testReportCount == 0 || testReportFailCount == 0) {
itemReport.reportNum = 0;
} else {
failRate = ((testReportFailCount / testReportCount) * 100).toFixed(1);
itemReport.reportNum = failRate + '%';
}
}
});
}
});
} else if (item.testingType == 1) {
let testReportCount = '';
let testReportFailCount = '';
let failRate = '';
let testReportOtherCount = '';
let testReportPassCount = '';
// 遍历返回的数据
item.statistical.chartData.forEach((itemChart) => {
testReportCount = Number(itemChart.testReportCount) + Number(testReportCount);
testReportFailCount = Number(itemChart.testReportFailCount) + Number(testReportFailCount);
testReportPassCount = Number(itemChart.testReportPassCount) + Number(testReportPassCount);
testReportOtherCount = Number(itemChart.testReportOtherCount) + Number(testReportOtherCount);
itemChart.month = itemChart.month.substring(0, 7);
this.dataListParallel.push(itemChart.month);
this.dataParallelPassYaxis.push(testReportPassCount);
this.dataParallelFailYaxis.push(testReportFailCount);
this.dataParallelOtherYaxis.push(testReportOtherCount);
});
// 把服务器组装完之后的数据放到自己的数组中
this.testReportList.forEach((itemList) => {
if (itemList.title == '平行检情况') {
itemList.report.forEach((itemReport) => {
if (itemReport.reportTitle == '报告数量') {
itemReport.addNum = item.statistical.testReportRecentCount;
itemReport.reportNum = testReportCount;
} else if (itemReport.reportTitle == '不合格报告数量') {
itemReport.addNum = item.statistical.testReportRecentFailCount;
itemReport.reportNum = testReportFailCount;
} else if (itemReport.reportTitle == '不合格率') {
if (testReportCount == 0 || testReportFailCount == 0) {
itemReport.reportNum = 0;
} else {
failRate = ((testReportFailCount / testReportCount) * 100).toFixed(1);
itemReport.reportNum = failRate + '%';
}
}
});
}
});
} else if (item.testingType == 3) {
let testReportCount = '';
let testReportFailCount = '';
let failRate = '';
let testReportOtherCount = '';
let testReportPassCount = '';
// 遍历返回的数据
item.statistical.chartData.forEach((itemChart) => {
testReportCount = Number(itemChart.testReportCount) + Number(testReportCount);
testReportFailCount = Number(itemChart.testReportFailCount) + Number(testReportFailCount);
testReportPassCount = Number(itemChart.testReportPassCount) + Number(testReportPassCount);
testReportOtherCount = Number(itemChart.testReportOtherCount) + Number(testReportOtherCount);
itemChart.month = itemChart.month.substring(0, 7);
this.dataListThird.push(itemChart.month);
this.dataThirdPassYaxis.push(testReportPassCount);
this.dataThirdFailYaxis.push(testReportFailCount);
this.dataThirdOtherYaxis.push(testReportOtherCount);
});
// 把服务器组装完之后的数据放到自己的数组中
this.testReportList.forEach((itemList) => {
if (itemList.title == '第三方检情况') {
itemList.report.forEach((itemReport) => {
if (itemReport.reportTitle == '报告数量') {
itemReport.addNum = item.statistical.testReportRecentCount;
itemReport.reportNum = testReportCount;
} else if (itemReport.reportTitle == '不合格报告数量') {
itemReport.addNum = item.statistical.testReportRecentFailCount;
itemReport.reportNum = testReportFailCount;
} else if (itemReport.reportTitle == '不合格率') {
if (testReportCount == 0 || testReportFailCount == 0) {
itemReport.reportNum = 0;
} else {
failRate = ((testReportFailCount / testReportCount) * 100).toFixed(1);
itemReport.reportNum = failRate + '%';
}
}
});
}
});
} else if (item.testingType == 4) {
let testReportCount = '';
let testReportFailCount = '';
let failRate = '';
let testReportOtherCount = '';
let testReportPassCount = '';
// 遍历返回的数据
item.statistical.chartData.forEach((itemChart) => {
testReportCount = Number(itemChart.testReportCount) + Number(testReportCount);
testReportFailCount = Number(itemChart.testReportFailCount) + Number(testReportFailCount);
testReportPassCount = Number(itemChart.testReportPassCount) + Number(testReportPassCount);
testReportOtherCount = Number(itemChart.testReportOtherCount) + Number(testReportOtherCount);
itemChart.month = itemChart.month.substring(0, 7);
this.dataListSupervise.push(itemChart.month);
this.dataSupervisePassYaxis.push(testReportPassCount);
this.dataSuperviseFailYaxis.push(testReportFailCount);
this.dataSuperviseOtherYaxis.push(testReportOtherCount);
});
// 把服务器组装完之后的数据放到自己的数组中
this.testReportList.forEach((itemList) => {
if (itemList.title == '监督检情况') {
itemList.report.forEach((itemReport) => {
if (itemReport.reportTitle == '报告数量') {
itemReport.addNum = item.statistical.testReportRecentCount;
itemReport.reportNum = testReportCount;
} else if (itemReport.reportTitle == '不合格报告数量') {
itemReport.addNum = item.statistical.testReportRecentFailCount;
itemReport.reportNum = testReportFailCount;
} else if (itemReport.reportTitle == '不合格率') {
if (testReportCount == 0 || testReportFailCount == 0) {
itemReport.reportNum = 0;
} else {
failRate = ((testReportFailCount / testReportCount) * 100).toFixed(1);
itemReport.reportNum = failRate + '%';
}
}
});
}
});
}
});
},
},
mounted() {
// 父组件自适应
// let echarts = this.$store.state.user.echartsAll;
// window.onresize = function () {
//
for (let i = 0; i < echarts.length; i++) {
//
echarts[i].resize();
//
}
// };
// setTimeout(this.fetchData, 3000);
// 概览数据
this.headDataList = this.getGeneralListData();
this.getGeneralData();
// 检测机构资质
this.fetchData();
this.getReportChartData();
// 堆叠图数据
this.getReportChart();
this.testReportList = this.getChartList();
},
};
</script>

以上就是差不多的整体代码，有点多，但是其中最重要的还是在组件chart.vue中的几行代码，在data中定义数组echartsAll: [],

data() {
return {
echartsAll: [],
};
},

然后再初始化chart中，

chart = echarts.init(document.getElementById(this.id));
this.echartsAll.push(chart);

最后在mounted中遍历这个数组，然后进行resize()才有效

import { debounce } from '@/utils/tools';
menthods:{
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler);
},
},
mounted(){
this.$_resizeHandler = debounce(() => {
if (chart) {
// console.log('this.echartsAll',this.echartsAll);
// console.log('chart',chart);
for (let i = 0; i < this.echartsAll.length; i++) {
this.echartsAll[i].resize();
}
// chart.resize();
}
}, 100);
}

在其中有两行console.log（）代码打印出来，你会发现第一个打印出来的每个chart的id都是不一样的，而第二个打印出来的id都是一样的，而且都是最后一个chart图的id，这也就是为什么是最后一图生效，而其他图不生效的原因所在。
以上就是我关于resize()在遍历中只有最后一张图的自适应生效的理解和解决办法，如果大佬有更好的解决办法，欢迎大佬的建议和评价，谢谢大佬们的阅读。

最后

以上就是大意台灯为你收集整理的关于vue中使用echarts多图(四张图)，导致不能自适应，随着窗口的变化而变化，也就是说resize()无效或者说是只有最后一个生效(v-for遍历只有最后一个生效的解决办法)的全部内容，希望文章能够帮你解决关于vue中使用echarts多图(四张图)，导致不能自适应，随着窗口的变化而变化，也就是说resize()无效或者说是只有最后一个生效(v-for遍历只有最后一个生效的解决办法)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。