记录一下最近做的 echarts 可视化数据展示 全屏插件和图表自适应屏幕

//.example 是最外层div .pageWrap是第二层div

scale() { var WW = $(window).width(); var scaleNum = WW / 1920; var PH = 1080 * scaleNum; $(“.example”).height(PH); $(“.example”).width(WW);

$(“.pageWrap”).css({ “-webkit-transform”: “scale(” + scaleNum + “)”, transform: “scale(” + scaleNum + “)” }); },

selfAdaption() { const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存 setTimeout(() => { window.addEventListener(“resize”, function() { if (self.$refs.Echart1) { self.chart1 = self.$echarts.init(self.$refs.Echart1); self.chart1.resize(); } if (self.$refs.Echart2) { self.chart2 = self.$echarts.init(self.$refs.Echart2); self.chart2.resize(); } if (self.$refs.Echart3) { self.chart3 = self.$echarts.init(self.$refs.Echart3); self.chart3.resize(); } if (self.$refs.Echart4) { self.chart4 = self.$echarts.init(self.$refs.Echart4); self.chart4.resize(); } if (self.$refs.Echart5) { self.chart5 = self.$echarts.init(self.$refs.Echart5); self.chart5.resize(); } if (self.$refs.Echart6) { self.chart7 = self.$echarts.init(self.$refs.Echart6); self.chart7.resize(); } if (self.$refs.Echart7) { self.chart8 = self.$echarts.init(self.$refs.Echart7); self.chart8.resize(); } }); }, 10); },