Echarts component for Vue

Echarts Vue 组件

1. 模板部分

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

2. 行为部分

   export default {
   name: "",
   // 父组件数据 option 配置对象
   props: {
    option: {
      type: Object,
      default: () => {},
    },
   },
   data() {
    return {
      // 存储配置信息对象
      setOption : {}
    };
   },
   mounted() {
    // 接收 option 配置对象数据
    this.setOption = this.option
    // 调用初始化函数
    this.initChart()
    // 监听 / 重绘 
    let chart = this.$echarts.init(this.$refs.echartsBox);
    window.addEventListener("resize", () => {
      chart.resize();
    }, true);
   },
   watch: {
    // 监听父组件传来数据
    option() {
      this.setOption = this.option
      this.initChart()
    }
   },
   methods: {
    // 初始化
    initChart (val) {
      let chart = this.$echarts.init(this.$refs.echartsBox);
      // 把配置和数据放这里
      chart.setOption(this.setOption)
    },
    // props 无效果可使用 - 获取 option 信息
    getOption(val){
      this.setOption = val
      this.initChart()
    } 
   },
   };

3. 样式部分

   .chart-box{
   width: 100%;
   height: 100%;
   .echartsBox{
    width: 100%;
    height: 100%;
   }
   }