最近在做平台的时候遇到了这个问题，如何让echarts自适应浏览器大小的变化。
于是我就在网上开始找答案了，用了myChart.resize()。发现不管用，所幸还是找到了
合适的解决方法。
这是我所看到的原创作者的分享
https://blog.csdn.net/weixin_52921391/article/details/117387863
第一步 安装echarts依赖
npm install echarts -S
第二步 在main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第三步 使用你需要的echarts
<template>
<div class="index">
<-- 他的宽高我这里没设，大家可以根据我上一篇文章提供的方法去动态设置一下 -->
<div id="myChart" ></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
setTimeout(() => {
this.drawLine();
//echarts 宽度能够自适应
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("myChart"));
}, 10);
});
},
methods:{
rawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: "运行中设备" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
}
};
</script>
<style>
</style>
以上就是echarts的引入和自适应应浏览器大小变化的方法了。
当你遇到echarts只有100px的问题时，可以看看我的这篇文章：
https://www.jianshu.com/p/55480923d482
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
