近日公司在开发一个数据报表低代码平台,所有图表需要动态生成,但是不管怎么设置都echarts图表更新都没有动画显示后来发现是几个方面出了问题.

注意点一:没有开启echarts的不合并更新

...
this.echartsInstance.setOption(newVal, true);
...

注意点二:在option变化之前没有使用clear()方法清除上一个echarts绘制的图案

注意如果新旧数据相同的话,注意点一和注意点二都得设置.

...
this.echartsInstance.clear();
this.echartsInstance.setOption(newVal, true);
...

注意点三:更新的时候必须只更新echarts的option配置,不能将echarts所在div也更新了

比如更新数据的时候,一开始我是用v-for动态生成的div,更新的时候是直接替换的v-for绑定的数组,这样做就会导致更新没有动画,并且还会导致闪屏,但是改成修改数组元素里面的option那就有动画了,也不会导致闪屏.

总结

附上demo代码 demo源码github地址:github.com/tonyma2015/…

<template>
  <div id="app">
    <div
      id="echarts"
      ref="echarts"></div>
    <div>
      <button @click="change">改变</button>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "App",
  components: {},
  data() {
    return {
      echartsInstance: null,
      options: {
        // 图例
        legend: {
          show: true,
          top: "top",
          left: "right",
          orient: "horizontal",
        },
        // 鼠标跟随指示框
        tooltip: {
          show: true,
          trigger: "axis",
        },
        // x轴
        xAxis: {
          // 类别
          type: "category",
          // 是否显示坐标轴
          show: true,
          // 轴名称
          name: "",
          data: ["a", " b", " c", "d"],
        },
        // y轴
        yAxis: {
          // 是否显示坐标轴
          show: true,
          // 坐标轴留白
          boundaryGap: ["0", "10%"],
          // 轴名称
          name: "",
        },
        // 数据与数据样式
        series: {
          // 数值名称
          name: "abc",
          // 图表类型
          type: "bar",
          // 图表数据
          data: [Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10],
          // 柱状图宽度
          barWidth: 0,
          // 柱条样式
          itemStyle: {
            // 柱子的颜色
            color: "red",
            // 柱状图圆角
            borderRadius: 0,
          },
        },
      },
    };
  },
  methods: {
    setOptions() {
      const myChart = echarts.init(this.$refs.echarts);
      this.echartsInstance = myChart;
      this.echartsInstance.clear();
      myChart.setOption(this.options);
    },
    change() {
      this.options = {
        // 图例
        legend: {
          show: true,
          top: "top",
          left: "right",
          orient: "horizontal",
        },
        // 鼠标跟随指示框
        tooltip: {
          show: true,
          trigger: "axis",
        },
        // x轴
        xAxis: {
          // 类别
          type: "category",
          // 是否显示坐标轴
          show: true,
          // 轴名称
          name: "",
          data: ["a", " b", " c", "d"],
        },
        // y轴
        yAxis: {
          // 是否显示坐标轴
          show: true,
          // 坐标轴留白
          boundaryGap: ["0", "10%"],
          // 轴名称
          name: "",
        },
        // 数据与数据样式
        series: {
          // 数值名称
          name: "abc",
          // 图表类型
          type: "bar",
          // 图表数据
          data: [7, 8, 9, 10],
          // 柱状图宽度
          barWidth: 0,
          // 柱条样式
          itemStyle: {
            // 柱子的颜色
            color: "red",
            // 柱状图圆角
            borderRadius: 0,
          },
        },
      };
      this.echartsInstance.clear();
      this.echartsInstance.setOption(this.options, true);
    },
  },
  mounted() {
    this.setOptions();
  },
};
</script>

<style lang="scss">

#echarts {
  width: 300px;
  height: 400px;
}

</style>