vue3 封装Echarts

1.创建Wcharts 文件

<template>
  <div class="echart_size" :id="props.id"></div>
</template>

<script setup>
import { ref, nextTick, onMounted, markRaw } from "vue";
import luannan from "@/assets/json/luannan.json";

const props = defineProps({
  id: {
    type: String,
    required: "myecharts",
  },
  datas: {
    type: Object,
    required: {},
  },
  mapData: {
    type: Boolean,
    required: false,
  },
});

const emit = defineEmits();

const GetEchar = () => {
  const myCharts = ref();

  nextTick(() => {
    echarts.init(document.getElementById(props.id)).dispose();
    myCharts.value = markRaw(echarts.init(document.getElementById(props.id)));
    if (props.mapData) {
      echarts.registerMap("滦南", luannan);
    }

    let option = props.datas;
    myCharts.value.setOption(option, true);

    myCharts.value.on('legendselectchanged', function (params) {
      if(params.name == '超额取水户'){
        emit('handelUsers')
      } 
    });

    window.addEventListener("resize", function () {
      myCharts.value.resize();
    });
  });
};

onMounted(() => {
  GetEchar();
});
</script>

<style lang="scss" scoped>
.echart_size {
  width: 100%;
  height: 100%;
}
</style>

2.引入 

import EchartsCustom from "@/components/Echarts";

app.component("EchartsCustom", EchartsCustom);

3.使用 

<EchartsCustom    
  class="chartContainer"            
  :id="'riverChiefChartHe'"
  :datas="riverChiefOptions"
  :key="riverChiefKey"
/>

datas:数据 options   key状态