admin-ui/src/components/markdown/plugins/impl/VueCharts.vue

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import * as echarts from 'echarts'

type Props = {
  data: string
}

const prop = defineProps<Props>()

let instance: echarts.ECharts
const dom = ref<HTMLDivElement>()

const resizeHandler = () => {
  instance?.resize()
}

onMounted(()=> {
  let data: echarts.EChartsOption
  try {
    data = JSON.parse(decodeURIComponent(prop.data))
  } catch (e) {
    console.error(e)
    return
  }
  instance = echarts.init(dom.value)
  instance.setOption(data)

  window.addEventListener('resize', resizeHandler)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
  instance?.dispose()
})
</script>

<template>
  <div ref="dom"></div>
</template>

<style scoped>

</style>