Echarts 多个图表随屏幕的宽度变化自适应

最新推荐文章于 2022-09-09 10:44:22 发布

sea9528

最新推荐文章于 2022-09-09 10:44:22 发布

阅读量754

点赞数

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

本文链接：https://blog.csdn.net/sea9528/article/details/111551536

版权

vue 同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

Echarts 图表随屏幕的宽度自适应只需要在图表数据初始化函数之后，再resize()下就可以了。

drawLine() {
	//折线图
      let leftchart1 = echarts.init(document.getElementById("leftchart1"));
      leftchart1.setOption(this.leftchart1);
      let leftchart2 = echarts.init(document.getElementById("leftchart2"));
      leftchart2.setOption(this.leftchart2);
      //地图
      var myChart = echarts.init(document.getElementById("centerMap"));
      echarts.registerMap("杭州市", JSON, {});
      myChart.setOption(option);
      //绘制南丁格尔玫瑰图
      let chartPie2 = echarts.init(document.getElementById("chartPie2"));
      chartPie2.setOption(this.optionchartPie2);

     //多个图表随屏幕宽度变化自适应
      window.addEventListener("resize", () => {
        leftchart1.resize();
        leftchart2.resize();
        myChart.resize();
        chartPie2.resize();
      });
}