Industrial-image-management-system---web/src/components/Chart/index.vue

<template>
  <VCharts ref="chart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<script setup lang="ts">
import { registerMap } from 'echarts'
import VCharts from 'vue-echarts'
import worldMap from './world.json'
import chinaMap from './china.json'

defineProps({
  option: {
    type: Object,
    default() {
      return {}
    },
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
})

const chart = ref(null)
defineExpose({
  chart,
})

// Register maps when component is mounted
onMounted(() => {
  registerMap('world', worldMap as any)
  registerMap('china', chinaMap as any)
})
</script>

<style scoped lang="less"></style>