castgroup_bigscreen/src/components/echarts.vue

<!--
 * @LastEditors: gcz
-->
<!-- https://blog.csdn.net/zyz13883658166/article/details/124430938 -->
<template>
  <div ref="wrap">
    <!-- <div>{{mid}}</div> -->
    <div class="ntitle">{{option.title.text}}</div>
    <div class="addr">{{$store.state.addr.selectAddr}}</div>
    <div :id="mid" class="echarts" :style="style"></div>
  </div>
  
</template>
<script>
import * as echarts from "echarts";
const idGen = () => {
  return new Date().getTime();
};
export default {
  name: "HelloEcharts",
  props: {
    height: {
      type: String,
      default: null,
    },
    width: {
      type: String,
      default: "100%",
    },
    option: {
      type: Object,
      default: null,
    },
    mid: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      uuid: null,
      myChart: null,
      domHeight:null,
    };
  },
  created() {
    this.uuid = idGen();
    // console.log('this.option',this.option);
    
  },
  watch: {
    // '$store.state.addr.mapLevel': {
    //   handler:function (newVal, oldVal) {
    //       console.log('newVal',newVal);
    //       console.log('oldVal',oldVal);
    //   },
    //   immediate: true
    // },
    width() {
      //如果实例可用
      if (this.myChart) {
        this.myChart.resize({
          Animation: {
            duration: 300,
          },
        });
      }
    },
    option() {
      // console.log('option',console.log('this.option',JSON.parse(JSON.stringify(this.option))));
      if (this.myChart) {
        //   notMerge这个方法，是表示配置不重复，但是目前这个分代码没有生效
        this.myChart.setOption(this.option),
          {
            notMerge: true,
          };
      }
    },
  },
  computed: {
    style() {
      return {
        height: this.height?this.height:this.domHeight-57 +'px',
        width: this.width,
      };
    },
  },
  methods: {
    intChar(charUuid){
      // console.log('intChar charUuid',charUuid);
      // console.log('this.uuid 前',this.uuid);
      // // this.uuid = idGen();
      // console.log('this.uuid 后',this.uuid);
      echarts.init(document.getElementById(charUuid)).clear();
      this.myChart = echarts.init(document.getElementById(charUuid));
      this.myChart.setOption(this.option);
    }
  },
  mounted() {
    console.log('height',this.height);
    let obj = this.$refs.wrap;
    let h = window.getComputedStyle(obj).height;
    console.log('h',h);
    this.domHeight = h.slice(0, -2);
     console.log('domHeight',this.domHeight);
     console.log('style',this.style);
    console.log('echarts mounted');
    // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
    this.$nextTick(()=>{
      this.myChart = echarts.init(document.getElementById(this.mid));
      this.myChart.setOption(this.option);

    })
    
  },
};
</script>
<style lang='scss' scoped>
.addr{
  text-align: right;
  padding-right: 24px;
  font-size: 14px;
}
</style>