echarts+vue PC端自适应宽度

最新推荐文章于 2024-09-20 16:52:55 发布

l山人自有妙计

最新推荐文章于 2024-09-20 16:52:55 发布

阅读量171

点赞数

分类专栏： echarts 文章标签： echarts vue

本文链接：https://blog.csdn.net/Lixw296182/article/details/120325189

版权

ECharts 图表配置窗口自适应初始化 resize

关键词由CSDN通过智能技术生成

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子：设置id和width

<div id="echart1" style="min-height: 200px;min-width: 100%;"></div>

图表：

		echartsFun(){
			// 初始化图表
	        this.myChart1 = this.$echarts.init(document.getElementById('echart1'));
	        // 配置项
	        let options = {...根据具体需求配置};
	        // 清除图表内容
	        this.myChart1.clear();
	        // 渲染图表
	        this.myChart1.setOption(options);
		},
     	mounted() {
			// 渲染图表方法
			this.echartsFun();
    		let _this = this;
    		// 图表自适应宽度
    		window.onresize = () => {
      			return (() => {
        			_this.myChart1.resize();
      			})();
    		};
  		}