60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
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>
|