<template>  
    <div ref="chartRef" :class="className" :style="{ height: height, width: width }"></div>  
  </template>  
    
  <script>  
  import { onMounted, onUnmounted, ref, watch, toRefs } from 'vue';  
  import * as echarts from 'echarts';  
    
  export default {  
    name: 'EChart',  
    props: {  
      className: {  
        type: String,  
        default: 'chart'  
      },  
      width: {  
        type: String,  
        default: '100%'  
      },  
      height: {  
        type: String,  
        default: '400px'  
      },  
      options: {  
        type: Object,  
        default: () => ({})  
      }  
    },  
    setup(props) {  
      const { className, width, height, options } = toRefs(props);  
      const chartRef = ref(null);  
      let chartInstance = null;  
    
      onMounted(() => {  
        if (chartRef.value) {  
          chartInstance = echarts.init(chartRef.value);  
          chartInstance.setOption(options.value, true);  
        }  
      });  
    
      watch(options, (newOptions) => {  
        if (chartInstance) {  
          chartInstance.setOption(newOptions, true);  
        }  
      }, { deep: true });  
    
      onUnmounted(() => {  
        if (chartInstance) {  
          chartInstance.dispose();  
        }  
      });  
    
      return {  
        chartRef  
      };  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 添加一些样式 */  
  .chart {  
    /* ... */  
  }  
  </style>