vue2+echarts重绘

以下是使用Vue2和Echarts进行重绘的两种方法：

1. 使用window.onresize事件监听窗口大小变化，并在回调函数中调用Echarts实例的resize方法。

window.onresize = () => {
  this.myChart.resize();
}

2. 如果有多个图表需要重绘，可以使用watch监听状态变化，并在回调函数中循环调用每个图表实例的resize方法。

watch: {
  '$store.state.isCollapse': {
    handler(newVal, oldVal) {
      setTimeout(() => {
        for (var i = 0; i < charts.length; i++) {
          charts[i].resize();
        }
      }, 500);
    },
  },
},

相关问题

在 vue3 中 echarts 如何重绘

在 Vue3 中，可以使用 `watch` 监听数据的变化，然后在回调中调用 echarts 的 `setOption` 方法重新渲染图表。具体的实现步骤如下：

1. 安装 echarts：

   npm install echarts

2. 在组件中引入 echarts：

   import * as echarts from 'echarts';

3. 在组件的 `setup` 函数中，定义一个 `ref` 引用变量用于存储 echarts 实例：

   const chartRef = ref(null);

4. 在组件的模板中，创建一个 div 元素用于渲染 echarts 图表，并设置 `ref` 属性指向上一步定义的 `chartRef`：

   <div ref="chartRef" style="width: 100%; height: 300px;"></div>

5. 在组件的 `watch` 方法中，监听需要变化的数据，并在回调中调用 echarts 的 `setOption` 方法重新渲染图表。需要注意的是，在第一次加载组件时也需要调用 `setOption` 方法进行初始化，因此需要将初始化代码放在 `watch` 回调中的外部：

   watch(
     () => data,
     () => {
       if (!chartRef.value) {
         // 初始化 echarts 实例
         chartRef.value = echarts.init(chartRef.value);
       }
       // 调用 setOption 方法重新渲染图表
       chartRef.value.setOption(options);
     },
     { immediate: true } // 在第一次加载组件时立即执行回调
   );

完整的代码示例如下：

<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>

vue grid layout 里echarts绘图刷新不了

可能是因为 Vue Grid Layout 组件的重绘机制导致的。您可以尝试在 Echarts 组件中添加一个 key 属性，并将其设置为一个动态变量，每次变量更新时，Echarts 组件就会重新渲染，从而解决刷新问题。例如：

<template>
  <vue-grid-layout>
    <vue-grid-item :key="echartsKey">
      <echarts :option="option"></echarts>
    </vue-grid-item>
  </vue-grid-layout>
</template>

<script>
export default {
  data() {
    return {
      echartsKey: 0, // 动态变量
      option: {} // Echarts 配置项
    };
  },
  methods: {
    refreshEcharts() {
      this.echartsKey++; // 更新动态变量
    }
  }
};
</script>

在需要刷新 Echarts 组件的时候，可以调用 `refreshEcharts` 方法来更新动态变量，从而达到刷新 Echarts 组件的目的。