EChart

最新推荐文章于 2024-11-08 16:09:18 发布

Holly31

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量63

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/holly31/article/details/130421600

版权

该代码段展示了一个基于Vue的组件，用于创建和初始化Echarts图表。组件接收一个图表配置选项，并在`option`改变时更新图表。同时，它监听窗口大小变化以自动调整图表尺寸。使用了`echarts-gl`扩展来支持更高级的图表类型。

摘要由CSDN通过智能技术生成

bl-chart.vue

<template>
  <div class="chart-box">
    <div ref="myChart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    echarts,
  },
  data() {
    return {};
  },
  watch: {
    option: {
      handler(val) {
        if (val) {
         this.initChart();
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize",this.resizeEcharts);
  },
  methods: {
    //图表适配
    resizeEcharts(){
        this.myEcharts.resize()
    },

    initChart() {
      this.$nextTick(() => {
        this.myEcharts = echarts.init(this.$refs.myChart);
        this.myEcharts.setOption(this.option);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart,
.chart-box {
  width: 100%;
  height: 100%;
}
.chart-box {
  height: 100%;
}
</style>