标签：vue echart 渲染 chart 思路 echarts resize option

文章目录

• 前言
• 例子

前言

技术栈：echarts、lodash、resize-detector

例子

<template>
  <div ref="chartDom"></div>
</template>

<script>
import echarts from "echarts";
import debounce from "lodash/debounce"; // 引入个去抖工具
import { addListener, removeListener } from "resize-detector"; 
export default {
  props: {
    option: { // 父组件传来的echart配置
      type: Object,
      default: () => {}
    }
  },
  watch: {
    option(val) { 
      // 这里不用深度监听是因为图表数据量大，深度监听会非常损耗性能。
      // 解决方法：父组件修改option配置后，直接重新赋值 this.chartOption = { ...this.chartOption };
      this.chart.setOption(val);
    }
  },
  created() {
    this.resize = debounce(this.resize, 300); // 将resize附加一个去抖算法
  },
  mounted() {
    this.renderChart();
    // 因为在echart实例化的时候，会出现其他组件的标签样式还没生效，导致在样式生成的过程中，echart误将当前的高度当作渲染时的高度进行渲染，
    // 从而导致展示问题，所以应该在页面都渲染完后再去调用echart的重新计算大小的方法。
    addListener(this.$refs.chartDom, this.resize); // 开启监听echart的dom实例是否有改变，比如渲染完或者大小被强制改变都重新计算大小。
  },
  beforeDestroy() {
    // 防止内存泄漏
    removeListener(this.$refs.chartDom, this.resize);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resize() { 
      console.log("resize");
      this.chart.resize();
    },
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.chartDom);
      this.chart.setOption(this.option);
    }
  }
};
</script>

注：

1. 没必要把echart实例放在data中，不需要作成响应式的，vue3底层的更新机制改变了，这样作会有问题。实在想要，就在data中直接this.chart = null，不要写在return中。

2. 想看echart误将当前的高度当作渲染时的高度进行渲染的问题，就在init() 的位置上打个断点。

3. 在类chart库中，echarts是比较悠久的，ant的chart也是echarts的原版人马打造，功能更多，学习成本也更大。

水~

标签：vue,echart,渲染,chart,思路,echarts,resize,option
来源： https://blog.csdn.net/pagnzong/article/details/114856480

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。