1.页面结构：
想实现自适应窗口变化需要设置容器div高度。
如果宽、高都设置了，自适应效果就无法实现，因为约束了图表的显示。
如果只设置了宽，盒子无法撑开，图表无法显示。
所以一定要设置高度，宽度不设或设置百分比或设置可变宽度。
// width不要写固定值
<div id="main" class="main" style="height: 778px;width:100%"></div>
2.获取数据并初始化图表
export default {
data() {
return {
// 充值列表
data1: [],
// 消费列表
data2: [],
// x 轴日期
arrallyeardate: [],
};
},
mounted() {
// 获取365天时间，要写在初始化图表前面，因为下面会用到
this.getTime();
//初始化图表
this.initEcharts();
}
methods:{
// 得到一年中每天的日期
getTime() {
var myDate = new Date();
var year = myDate.getFullYear();
var i = 1;
let now = new Date(year, 0, 0);
let oneDay = 24 * 3600 * 1000;
var j = true;
var arrallyeardate = [];
// 通过do..while..语句循环查询本年每天日期
do {
now = new Date(+now + oneDay);
var month = now.getMonth() + 1;
arrallyeardate.push(now.getFullYear() + "-" + month + "-" + now.getDate());
if (month == 12 && now.getDate() == 31) {
var j = false;
}
} while (j);
// 去掉年份前缀
arrallyeardate = arrallyeardate.map(function(str) {
return str.replace("2022-", "");
});
this.arrallyeardate = arrallyeardate;
// 现在是假数据，随机数，后期要存储后台传过来的真实数据
var data1 = [];
var data2 = [];
for (var k = 1; k <= arrallyeardate.length; k++) {
//随机函数，int型，涵盖最小值，不涵盖最大值
data1.push(this.randomRange(200, 500));
this.data1 = data1;
data2.push(this.randomRange(0, 300));
this.data2 = data2;
}
},
// 返回一个在myMin(包括myMin)和myMax(包括myMax)之间的随机数
// Math.random() 0.0 ~ 1.0 之间的一个伪随机数。【包含0，不包含1】
// Math.floor(n); //向下取整。返回为n的整数部分。
randomRange(myMin, myMax) {
return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
},
// 初始化图表
initEcharts() {
myCharts = echarts.init(document.getElementById("main"));
option = {
color: ["#268CE9", "#E48C34"],
title: {
text: "客户分析",
left: "2%",
top: "2%",
textStyle: {
fontSize: 20,
fontWeight: "400",
},
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["充值", "消费"],
top: "2%",
right: "4%",
textStyle: {
fontWeight: "400",
fontSize: 18,
},
itemGap: 20,
},
grid: {
left: "2%",
top: "15%",
right: "4%",
bottom: "8%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: this.arrallyeardate,
// 坐标轴标签的样式
axisLabel: {
fontWeight: 400,
fontSize: 18,
fontFamily: "Microsoft YaHei",
color: "rgba(153, 153, 153, 1)",
},
},
yAxis: {
type: "value",
// 是否显示y轴轴线
axisLine: {
show: false,
},
// 是否显示y轴刻度
axisTick: {
show: false,
},
// 坐标轴标签的样式
axisLabel: {
fontWeight: 400,
fontSize: 20,
fontFamily: "Microsoft YaHei",
color: "rgba(153, 153, 153, 1)",
},
},
dataZoom: [
// 滑动条型数据区域缩放组件
{
show: true,
start: 94,
end: 100,
height: 40,
fillerColor: "rgba(110, 178, 241, 0.4)",
},
// 内置型数据区域缩放组件
{
type: "inside",
start: 94,
end: 100,
// 表示鼠标滚轮不能触发缩放
zoomOnMouseWheel: false,
},
],
series: [
{
name: "充值",
type: "line",
data: this.data1,
},
{
name: "消费",
type: "line",
data: this.data2,
},
],
};
myCharts.setOption(option);
// 让图表跟随屏幕自动的去适应
// 方法一：在这个项目中不生效，原因还未知
// window.addEventListener("resize", function() {
// myChart.resize();
// });
// 方法二：
// window.onresize = function() {
// myCharts.resize();
// };
// 方法三：
window.onresize = myCharts.resize;
},
}
}
3.效果展示
补充：当第一种办法不管用的时候，我采取了别的方法，既然图表要跟随容器变化，那监听容器div的宽高变化就可以了，搜到一种解决办法也实现了相同效果。
1、在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器，官网如下:
npm install element-resize-detector
2、使用（简洁明了）--直接在mounted使用
mounted(){
// 直接导入使用，也可以在main.js中引入
//elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
var elementResizeDetectorMaker = require("element-resize-detector")
// 创建实例，无参数
var erd = elementResizeDetectorMaker();//使用默认选项（将使用基于对象的方法）。
// 创建实例带参数
// 使用基于超快速滚动的方法。
// 这是推荐的策略。
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll",
callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
//如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其被调用（不会阻止其被调用）
debug: true
});
//监听class为staticNextMain的元素 大小变化
var self = this
//侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
//覆盖实例选项
//让图表跟随main盒子自动的去适应
erd.listenTo(document.getElementsByClassName("main"), function(element) {
myCharts.resize();
});
},
