ECharts:一个基于 JavaScript 的开源可视化图表库。


前言:这篇博客是基于父组件传值(option)给子组件即echart页面为基础的渲染图标的。话不多说,直接看代码

目录

一、介绍

二、解决办法

tips

 欢迎扫描下方二维码关注VX公众号


一、介绍

1、官方文档:Apache ECharts

Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。icon-default.png?t=N7T8https://echarts.apache.org/zh/index.html

二、解决办法

data() {
      return {
        chart: null,
        drawTiming: null
      };
    },
    watch: {
      options: {
        handler(options) {
          this.$nextTick(() => {
            this.initChart();
          });
        },
        deep: true,
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      });
      window.addEventListener('resize', this.resize);
    },
    beforeUnmount() {
      window.removeEventListener('resize', this.resize);
      this.chart.dispose();
      this.chart = null;
      clearTimeout(this.drawTiming);
      this.drawTiming = null;
    },
    methods: {
      resize() {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(() => {
          console.log('setTimeout');
          let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
          this.chart.resize({ width, height });
        }, 200);
      },
      initChart() {
        // 初始化echart
        let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
        this.chart.resize({ width, height });
        this.chart.setOption(this.options, true); // 设置true清空echart缓存
      },
    },

tips

        无论是在mouted还是watch初始echarts,一定要加上nextTick,否则很有可能找不到DOM节点,导致图表不能正常显示。

 欢迎扫描下方二维码关注VX公众号

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐