Vue中优雅的使用Echarts的三种方式

最新推荐文章于 2025-03-19 14:28:07 发布

伟笑

最新推荐文章于 2025-03-19 14:28:07 发布

阅读量9.1k

点赞数 8

分类专栏： echart 图表文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/weixin_43045869/article/details/143720404

版权

一、原始方法直接使用

1、安装ECharts：

npm install echarts --save

2、创建一个Vue公共组件 EChart.vue：

<template>
  <div :style="{width: '100%', height: '300px'}" ref="chart"></div>
</template>
 
<script>
import echarts from 'echarts'
 
export default {
   
  name: 'EChart',
  props: {
   
    option: {
   
      type: Object,
      required: true
    }
  },
  data() {
   
    return {
   
      chartInstance: null
    }
  },
  watch: {
   
    option: {
   
      handler(newOption) {
   
        if (this.chartInstance) {
   
          this.chartInstance.setOption(newOption);
        }
      },
      deep: true
    }
  },
  mounted() {
   
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.option);
  },
  beforeDestroy() {
   
    if (this.chartInstance) {
   
      this.chartInstance.dispose();