本文介绍了如何解决Echarts和G2图表在不同分辨率下适配问题。通过监听窗口尺寸变化，计算比例并调整图表及文本大小，确保在屏幕尺寸变化时，图表和文字都能自适应。文章提供了具体的实现代码，包括使用element-resize-detector库来监听元素大小变化，并在重新绘制图表前关闭当前选项以保证更新生效。
前言:
1.对window.resize()的理解
虽然通过监听使用resize()可以改变图像的大小，但是只能改变图表的大小，他已经配置好的属性是没有办法改变的（比如fontsize,图标的大小等），它相当于根据当前屏幕分辨率改变当前画布的大小重新绘制一下option当中的数据，因此展现出来的效果是可以看到图表的大小发生了变化，但是label却没有发生变化。
2.思路：我们可以通过监听当前屏幕的分辨率算出当前屏幕相对于常见标准屏幕（1290）的比值（scale）,然后将图内需要适配的属性*scale,然后监听屏幕大小变化时，一旦屏幕大小发生变化，我们就重新绘制我们的图表（setoption），此时我们得到的option中的属性是新的，因此绘制出来的图表也是新的，所呈现出来的效果是图表和文字都发生了变化。
3.！！！注意：在每次setoption之前，都要close掉当前正在呈现的option，否则可能不会渲染出新的图表，从而影响效果。更为重要的是要注意使用的时机，以防关闭与重绘时间不合适影响效果
4 eg:
<template>
<div class="content4">
<div ref="root4" id="main4"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
name: "comp10__4",
props: {
data: {
type: Array,
default: [],
},
data() {
return {};
},
},
mounted() {
this.basicCategory();
let erd = elementResizeDetectorMaker();
erd.listenTo(this.$refs.root4, () => {
this.$nextTick(() => {
this.myChart.resize();
});
});
},
methods: {
basicCategory() {
var chartDom = document.getElementById("main4");
this.myChart = echarts.init(chartDom);
this.drawCategory();
},
drawCategory() {
this.option = {
xAxis: {
type: "category",
nameTextStyle: {
fontSize: 16 * window.currentFontScale,
color: "#fff",
borderColor: "#fff",
textBorderColor: "#fff",
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
nameTextStyle: {
fontSize: 16 * window.currentFontScale,
color: "#fff",
borderColor: "#fff",
textBorderColor: "#fff",
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14 * window.currentFontScale,
},
},
legend: {
top: "5%",
left: "center",
textStyle: {
fontSize: 16 * window.currentFontScale,
color: "#fff",
},
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "bar",
emphasis: {
label: {
show: true,
fontSize: 30 * window.currentFontScale,
fontWeight: "bold",
},
},
},
],
};
this.option && this.myChart.setOption(this.option);
},
__wideResizeHandle() {
this.$nextTick(() => {
if (this.$refs.root4) {
this.myChart && this.myChart.dispose();
this.myChart && this.basicCategory();
}
});
},
},
};
</script>
<style lang='less'>
.content4 {
width: 100%;
height: 100%;
#main4 {
width: 100%;
height: 100%;
}
}
</style>
扫一扫
2389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
