echart 图表组件的封装

echart 图表组件的封装

思路:
1、主要的传递参数为 options
2、去监听options的变化,然后更新图表
3、设置宽高

父组件

<template>
  <div class="chart-box">
    <GChart :options="chartData" />
  </div>
</template>
<script>
...
export default {
  data() {
    },
    created() { 
        const options ={ }  //动态设置
        this.chartData = options;
      //this.chart1.setoption(options);
    }
};
</script>
<style>
.chart-box{
   height:500px;
   width:500px;
}
</style>

公用子组件

<template>
  <div :style="{ height: '100%' }" ref="chartBox"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  watch: {
    options: {
      deep: true,
      handler() {
        this.renderchart();
      },
      // immediate:true
    },
  },
  name: "Gchart",
  props: {
    options: {
      type: object,
      required: true,
    },
  },
  methods: {
    renderchart() {
      this.chart = echarts.init(this.$refs.chartBox);
      //若是地图需要 registerMap
      this.chart.setoption(this.options || {});
      this.resizeFn = () => {
        this.chart.resize();
      };

      // 绑定resize事件
      window.addEventListener("resize", this.resizeFn);
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.renderchart(); //相对晚时机渲染echarts保证有元素;
    });
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
    this.dispose();
  },
};
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值