1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <template>
| <div id="echart" :style="{ width: props.width, height: props.height }" ref="echartRef"></div>
| </template>
| <script setup lang="ts">
| import * as echarts from "echarts";
| import { option } from "./static/lin";
| const props = defineProps({
| width: {
| type: String,
| default: "600px",
| },
| height: {
| default: "600px",
| },
| modelValue: {
| type: Object,
| default: {},
| },
| });
| const echartRef = ref<HTMLElement>();
|
| const state = reactive({
| myChart: undefined as unknown as echarts.EChartsType,
| });
|
| onMounted(() => {
| init();
| applyData();
| });
|
| /**
| * 初始化
| */
| const init = () => {
| state.myChart = markRaw(echarts.init(echartRef.value as HTMLElement));
| };
|
| /**
| * 渲染数据
| */
| const applyData = (e?: (f: any) => void) => {
| let str = JSON.stringify(option);
| let obj = JSON.parse(str);
| if (e) {
| e(obj);
| }
| state.myChart!.setOption(obj, true);
| };
|
| defineExpose({ applyData });
| </script>
|
| <style lang="scss" scoped></style>
|
|
