本文主要是介绍echarts当容器大小变化时跟着变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div ref="chartContainer" class="chart-container"><!-- 图表将渲染到这个容器中 --></div>
</template><script>
import * as echarts from "echarts";
import { bars } from "@/api/api";
export default {name: "EChartsComponent",data() {return {chart: null, // 用于存储ECharts实例barsData: [],};},mounted() {this.getdata();setInterval(() => {this.getdata();}, 120000);// this.initChart();window.addEventListener("resize", this.resizeChart);},// beforeUpdate() {// window.removeEventListener("resize", this.resizeChart);// },// updated() {// this.initChart();// window.addEventListener("resize", this.resizeChart);// },beforeDestroy() {window.removeEventListener("resize", this.resizeChart);if (this.chart) {this.chart.dispose(); // 销毁图表实例}},methods: {getdata() {let obj = {t: "GetTestBars",f: "7",l: JSON.parse(window.localStorage.getItem("user")).LastSysLineID,testRoomCode: JSON.parse(window.localStorage.getItem("user")).TestRoomCode,};bars(obj).then((res) => {if (res.data.Flag == 1) {this.barsData = res.data.Data;this.initChart();}});},initChart() {const chartContainer = this.$refs.chartContainer;if (chartContainer) {const width = chartContainer.clientWidth;const height = chartContainer.clientHeight;if (this.chart) {this.chart.resize({width,height,});} else {this.chart = echarts.init(chartContainer);this.chart.setOption({// 设置ECharts图表配置title: {text: "配料签名信息",left: "center",top: "5%",textStyle: {color: "#01d1f2",fontSize: 16,},},tooltip: {trigger: "axis",},grid: {// 设置图表的布局位置height: "auto", // 柱状图向左偏移20%padding: [0, 0, 0, 5],bottom: "15%",},xAxis: {type: "category",data: ["试验", "批准", "领取", "监理"],axisLabel: {// 设置X轴标签的字体颜色color: "#01d1f2", // 红色// 设置X轴标签的字体大小fontSize: 13,},},yAxis: {type: "value",axisLabel: {// 设置X轴标签的字体颜色color: "#01d1f2", // 红色// 设置X轴标签的字体大小fontSize: 12,},},series: [{name: "已签数",type: "bar",data: this.barsData[0],itemStyle: {barBorderRadius: 12, // 左上角、右上角、右下角、左下角color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#fccb05" }, // 起点颜色{ offset: 1, color: "#f5804d" }, // 终点颜色]),},},{name: "待签数",type: "bar",data: this.barsData[1],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#8bd46e",},{offset: 1,color: "#09bcb7",},]),barBorderRadius: 11,},},{name: "超时数",type: "bar",data: this.barsData[2],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#248ff7",},{offset: 1,color: "#6851f1",},]),barBorderRadius: 11,},},],});window.dispatchEvent(new Event("resize")); // 触发resize事件以适应初始大小}}},resizeChart() {if (this.chart) {this.chart.resize(); // 当容器大小变化时，调用resize方法以适应新的宽高}},},
};
</script><style scoped>
.chart-container {width: 100%;height: 100%; /* 可以设置具体的像素值，或者相对值（如vh, vw, %等） */
}
</style>
第二种简单点
let myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {myChart.resize();
});这篇关于echarts当容器大小变化时跟着变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
