MTP2.0_WEB/src/@next/components/base/echarts/index.vue

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

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

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

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

    return {
      chartElement,
    }
  }
})
</script>

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