关于echarts加载重绘问题

最近研究了echarts,发现重新加载不重新绘图的问题,找了一下问题的根源所在,大概如下:

解决方案:
因为echarts绘制都要创建一个Echarts实例,返回echartsInstance。所以我们只需要在重新创建的时候,移除之前创建的实例并且重新创建一个Echarts实例:

document.getElementById('main').removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance_ 属性

在这里插入图片描述
重新创建:

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option,true);

相关链接:
Echarts.js:https://www.echartsjs.com/index.html

  • 13
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论
在 Vue3 中,可以使用 `watch` 监听数据的变化,然后在回调中调用 echarts 的 `setOption` 方法重新渲染图表。具体的实现步骤如下: 1. 安装 echarts: ```bash npm install echarts ``` 2. 在组件中引入 echarts: ```javascript import * as echarts from 'echarts'; ``` 3. 在组件的 `setup` 函数中,定义一个 `ref` 引用变量用于存储 echarts 实例: ```javascript const chartRef = ref(null); ``` 4. 在组件的模板中,创建一个 div 元素用于渲染 echarts 图表,并设置 `ref` 属性指向上一步定义的 `chartRef`: ```html <div ref="chartRef" style="width: 100%; height: 300px;"></div> ``` 5. 在组件的 `watch` 方法中,监听需要变化的数据,并在回调中调用 echarts 的 `setOption` 方法重新渲染图表。需要注意的是,在第一次载组件时也需要调用 `setOption` 方法进行初始化,因此需要将初始化代码放在 `watch` 回调中的外部: ```javascript watch( () => data, () => { if (!chartRef.value) { // 初始化 echarts 实例 chartRef.value = echarts.init(chartRef.value); } // 调用 setOption 方法重新渲染图表 chartRef.value.setOption(options); }, { immediate: true } // 在第一次载组件时立即执行回调 ); ``` 完整的代码示例如下: ```html <template> <div ref="chartRef" style="width: 100%; height: 300px;"></div> </template> <script> import * as echarts from 'echarts'; import { ref, watch } from 'vue'; export default { name: 'EchartsDemo', setup() { const chartRef = ref(null); // 定义一个 ref 引用变量 const data = [1, 2, 3, 4, 5]; // 需要监听的数据 const options = { // echarts 的配置项 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], }, yAxis: { type: 'value', }, series: [ { data: data, type: 'line', }, ], }; // 监听 data 数据的变化,重新渲染图表 watch( () => data, () => { if (!chartRef.value) { // 初始化 echarts 实例 chartRef.value = echarts.init(chartRef.value); } // 调用 setOption 方法重新渲染图表 chartRef.value.setOption(options); }, { immediate: true } // 在第一次载组件时立即执行回调 ); return { chartRef, }; }, }; </script> ```
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值