echarts中多个图表跟随窗口而变化

最新推荐文章于 2023-04-08 11:09:51 发布

nine percent 陈立农

最新推荐文章于 2023-04-08 11:09:51 发布

阅读量562

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_52031155/article/details/115861324

版权

本文介绍了在Vue项目中，如何使Echarts图表随着窗口尺寸变化而自适应调整，重点在于正确初始化和调用resize()方法，确保多个图表都能响应窗口大小的变化。

摘要由CSDN通过智能技术生成

echarts中图表跟随窗口而变化
我在写echarts遇到的一个问题，随后百度和echrts官网上查找，看了许多方法，个人认为什么引入插件啊蛮麻烦的，最终决定使用window.onresize =()=>{ this.myChart.resize();}
如果你只有一个图表可直接放在方法的最后，不要使用this。
然后的话，我的图表是有3个，但是使用一个方法，调用方法时传入的值不一样，所以渲染的图表也不一样，推荐使用，代码更为简洁；
如图：

 line(id, color, percentages, data) {
   
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
   
          color: [color, "#C4C4C4"],
          title: {
   
            text: percentages,
            x: "center",
            y: "45%",
            textStyle: {
   
              fontSize: "28px",
              color: " #24304D",
              fontWeight: "normal",
            },
            subtextStyle: {
   
              color: " #24304D",
              fontSize: 20,
              fontWeight: "normal",
            }