echarts+iview模态框modal问题

最新推荐文章于 2023-02-21 03:00:00 发布

傻蛋丫

最新推荐文章于 2023-02-21 03:00:00 发布

阅读量2.1k

点赞数 1

文章标签： iview echarts modal

本文链接：https://blog.youkuaiyun.com/qq_36854073/article/details/83112563

版权

本文解决ECharts在Modal中显示过小及数据重复加载问题，通过设置固定宽高改善显示，并介绍三种避免数据叠加的方法：使用setOption的正确方式、DOM清除与数据前清空策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、起初是echarts大小问题，在modal模态框上显示左上角很小一块。可以给echarts固定宽高

<Modal v-model="modalGx" :title="title" @on-ok="modalCj=true" @on-cancel="modalCj=true">
       <!--<Table border :columns="gxEqpBoot" :data="gxOpenData" :loading="gxLoading"></Table>-->
       <chart id="gxEqpBoot" :option="gxEqpBoot" style="width: 500px; height: 300px"></chart>
</Modal>

二、echarts 数据重新加载,原数据依然存在图表上，导致option一直在合并。根据网上提供的方法没有得到有效的解决

方法一：setOption方法第二个参数设为true。表示新的数据不与之前的合并，重新渲染。echarts API有介绍（没得到解决）

let gxEqpBootChart = echarts.getInstanceByDom(document.getElementById('gxEqpBoot'));
gxEqpBootChart.setOption(vm.gxEqpBoot,true);（此句在请求当中，vm为参数）

方法二：clear（）将dom清除再从新渲染（未得到解决）

方法三：每次赋值前先将data清空（解决了数据合并问题）

this.gxEqpBoot.xAxis[0].data = [];
this.gxEqpBoot.series[0].data = [];
this.gxEqpBoot.series[1].data = [];

效果：（数据不再合并显示了）