Echarts上树公共组件

CommonEcharts.vue

<!--CommonEcharts.vue -->
<template>
  <div ref="echartsDom" :style="{ width: width, height: height }"></div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch, onMounted, defineProps } from 'vue';
import { init } from 'echarts';

const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  options: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const { options } = toRefs(props);
const echartsDom = ref();
let echartInstance: any = null;

function initChart() {
  echartInstance = init(echartsDom.value);
  echartInstance.setOption(options.value);
}

watch(
  options,
  (to) => {
    echartInstance.setOption(to);
  },
  { deep: true }
);

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

<style scoped></style>

Test.vue

<template>
  <div class="footer">
    <div class="analysis">
      <Title :title="'能流图'">
        <template v-slot:titleSlot>
          <el-date-picker popper-class="elDatePicker" v-model="dayValue" type="date" placeholder="选择日期" size="small" />
        </template>
      </Title>
      <div class="container">
        <CommonEcharts :options="myOptions" style="width: 100%; height: 160px" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import CommonEcharts from '@/components/CommonEcharts.vue';

const myOptions = reactive({});

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

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