在 Vue.js 中使用 Echarts 可以通过封装组件来实现。以下是一个简单的封装组件的示例,同时实现了大小动态自适应变化:vueCopy

<template>
  <div ref="chart" class="echarts-chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  props: {
    option: {
      type: Object,
      required: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(this.option);

    this.resizeChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    this.chart.dispose();
  },
  methods: {
    resizeChart() {
      this.chart.resize();
    }
  },
  watch: {
    option: {
      handler(newOption) {
        this.chart.setOption(newOption);
      },
      deep: true
    }
  },
  computed: {
    chartStyle() {
      return {
        width: this.width,
        height: this.height
      }
    }
  }
}
</script>

<style scoped>
.echarts-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

在上面的代码中,我们创建了一个 EchartsChart 组件,并将 optionwidth 和 height 作为 props 传递给它。在组件中,我们使用 ref 属性引用了一个 div 元素,该元素将作为 Echarts 图表的容器。

在 mounted 钩子中,我们使用 echarts.init 方法初始化 Echarts 图表,并将 option 设置为图表的初始选项。我们还在窗口大小变化时调用 resizeChart 方法,以使图表动态适应变化的容器大小。

在 beforeDestroy 钩子中,我们释放了 Echarts 实例。在 watch 中,我们监听 option 的变化,并在变化时调用 chart.setOption 方法更新图表的选项。

最后,在 computed 中,我们使用 width 和 height 属性来计算图表容器的样式,以便动态设置容器的大小。

现在我们可以在父组件中使用 EchartsChart 组件,并将选项、宽度和高度传递给它:vueCopy

<template>
  <div>
    <EchartsChart :option="option" :width="width" :height="height" />
  </div>
</template>

<script>
import EchartsChart from './EchartsChart';

export default {
  components: {
    EchartsChart
  },
  data() {
    return {
      option: {
        // Echarts 选项
      },
      width: '100%',
      height: '400px'
    }
  }
}
</script>

在上面的代码中,我们在父组件中使用 EchartsChart 组件,并将选项、宽度和高度传递给它。如果需要动态更改图表的选项、宽度或高度,只需要更新父组件中的相应属性即可。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注