freight-web/src/components/Echarts/echarts.vue

<template>
  <LEchart
    class="echart"
    ref="chart"
    @finished="init"
    :customStyle="{ height: height, 'z-index': 1 }"
  ></LEchart>
</template>
<script setup lang="ts">
import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
// import limeEchart from "../../uni_modules/lime-echart/components/lime-echart/lime-echart";

// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
const echarts = require("../../uni_modules/lime-echart/static/echarts.min");
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
import * as echarts from "echarts";
// #endif
// #endif
let chart = ref<any>(); // 获取dom

const props = defineProps<{
  option: object;
  height: string;
}>();

watchEffect(() => {
  if (chart.value) {
    chart.value.init(echarts, (chart: any) => {
      chart.setOption(props.option);
    });
  }
});

watch(
  () => props.option,
  (newValue, oldValue) => {
    chart.value.setOption(props.option);
  }
);

// 渲染完成
const init = () => {
  console.log("渲染完成");
};
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}

.title {
  text-align: center;
}
</style>