MTP20_WEB_GLOBAL/src/components/base/echarts/index.vue

<template>
  <div ref="chartElement" class="app-echarts" :style="{ width, height }"></div>
</template>

<script lang="ts" setup>
import { PropType, watch } from 'vue'
import { ECOption } from './core'
import { useEcharts } from './index'

const props = defineProps({
  // 图表宽度
  width: {
    type: String,
    default: '100%',
  },
  // 图表高度
  height: {
    type: String,
    default: '100%',
  },
  // 图表配置项
  option: {
    type: Object as PropType<ECOption>,
    default: () => ({}),
  },
  dataIndex: {
    type: Number,
    default: 0,
  },
})

const { chartElement, setOptions } = useEcharts();

watch(() => props.option, (val) => setOptions(val));
</script>

<style lang="less">
@import './index.less';
</style>