Vue3和Vue2项目封装echarts

前期回顾    

目录

Vue2封装

 子组件

页面使用

 Vue3封装 

 全局子组件：

第一种拆数据统一在父页面使用 

分模块的ts文件数据：

父组件使用：

第二种局部子组件调用全局子组件在父页面使用

局部子组件

 在父页面调用局部子组件即可

Vue2封装

 子组件

1.  
   <template>
2.  
   <div :id="uuid" :style="style"></div>
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   import * as echarts from "echarts";
7.  
    
8.  
   const idGen = () => {
9.  
   return new Date().getTime();
10.  
    };
11.  
     
12.  
    export default {
13.  
    props: {
14.  
    height: {
15.  
    type: String,
16.  
    default: "400px",
17.  
    },
18.  
    width: {
19.  
    type: String,
20.  
    default: "600px",
21.  
    },
22.  
     
23.  
    options: {
24.  
    type: Object,
25.  
    default: null,
26.  
    },
27.  
    },
28.  
     
29.  
    data() {
30.  
    return {
31.  
    uuid: null,
32.  
    myChart: null,
33.  
    };
34.  
    },
35.  
     
36.  
    watch: {
37.  
    width(a, b) {
38.  
    if (this.myChart) {
39.  
    // 这里需要异步才能生效
40.  
    setTimeout(() => {
41.  
    this.myChart.resize({
42.  
    animation: {
43.  
    duration: 500,
44.  
    },
45.  
    });
46.  
    }, 0);
47.  
    }
48.  
    },
49.  
     
50.  
    options() {
51.  
    if (this.myChart) {
52.  
    // notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。
53.  
    //合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件
54.  
    this.myChart.setOption(this.options, {
55.  
    notMerge: true,
56.  
    });
57.  
    }
58.  
    },
59.  
    },
60.  
     
61.  
    computed: {
62.  
    style() {
63.  
    return {
64.  
    height: this.height,
65.  
    width: this.width,
66.  
    };
67.  
    },
68.  
    },
69.  
     
70.  
    created() {
71.  
    this.uuid = idGen();
72.  
    },
73.  
     
74.  
    mounted() {
75.  
    // 准备实例
76.  
    this.myChart = echarts.init(document.getElementById(this.uuid));
77.  
     
78.  
    // 应用配置项
79.  
    this.myChart.setOption(this.options);
80.  
    },
81.  
    };
82.  
    </script>

页面使用

1.  
   <template>
2.  
   <div id="app">
3.  
   <MyEcharts :options="options" :width="width"></MyEcharts>
4.  
   <button @click="changeWidth">changeWidth</button>
5.  
   <button @click="changeOpt">changeOpt</button>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    import MyEcharts from "./components/MyEcharts.vue";
11.  
    import { options1, options2 } from "./options";
12.  
     
13.  
    export default {
14.  
    name: "App",
15.  
    components: {
16.  
    MyEcharts,
17.  
    },
18.  
    data() {
19.  
    return {
20.  
    options: options1,
21.  
    width: "600px",
22.  
    };
23.  
    },
24.  
    methods: {
25.  
    changeWidth() {
26.  
    if (this.width == "600px") {
27.  
    console.log(1);
28.  
    this.width = "800px";
29.  
    } else {
30.  
    console.log(2);
31.  
    this.width = "600px";
32.  
    }
33.  
    },
34.  
    changeOpt() {
35.  
    if (this.options == options1) {
36.  
    this.options = options2;
37.  
    } else {
38.  
    this.options = options1;
39.  
    }
40.  
    },
41.  
    },
42.  
    };
43.  
    </script>

 Vue3封装 

 全局子组件：

1.  
   <template>
2.  
   <div :id="uid" :style="myStyle"></div>
3.  
   </template>
4.  
    
5.  
   <script setup lang="ts" name="zwEcharts">
6.  
   import { onMounted, onBeforeUnmount, ref, watch } from "vue";
7.  
   import * as echarts from "echarts";
8.  
   import { debounce } from "@/utils/debounce";
9.  
    
10.  
    const uid = ref<string>("");
11.  
    uid.value = `echarts-uid-${parseInt((Math.random() * 1000000).toString())}`;
12.  
     
13.  
    onMounted(() => {
14.  
    const myChart = echarts.init(
15.  
    document.getElementById(uid.value) as HTMLElement
16.  
    );
17.  
     
18.  
    watch(
19.  
    () => props.myOption,
20.  
    () => {
21.  
    myChart.setOption(props.myOption, {
22.  
    notMerge: true,
23.  
    });
24.  
    },
25.  
    {
26.  
    deep: true,
27.  
    immediate: true,
28.  
    }
29.  
    );
30.  
     
31.  
    function chartResize() {
32.  
    myChart.resize({
33.  
    animation: {
34.  
    duration: 300,
35.  
    },
36.  
    });
37.  
    }
38.  
     
39.  
    const resizeHandler = debounce(chartResize, 300);
40.  
    window.addEventListener("resize", resizeHandler);
41.  
    onBeforeUnmount(() => {
42.  
    window.removeEventListener("resize", resizeHandler);
43.  
    myChart.dispose();
44.  
    });
45.  
    });
46.  
     
47.  
    const props = defineProps({
48.  
    myStyle: {
49.  
    type: Object,
50.  
    default: () => ({
51.  
    width: "100%",
52.  
    height: "100%",
53.  
    }),
54.  
    },
55.  
    myOption: {
56.  
    type: Object,
57.  
    default: () => ({}),
58.  
    required: true,
59.  
    },
60.  
    });
61.  
    </script>
62.  
     

封装的 防抖函数 src\utils\debounce\index.ts 

1.  
   /**
2.  
   * 防抖函数，用于限制某个函数在一段时间内只能被调用一次
3.  
   * @param A 函数的参数
4.  
   * @param R 函数的返回值
5.  
   * @param { function } fn 要执行的函数
6.  
   * @param { number } delay 延迟的时间，以毫秒为单位
7.  
   * @example
8.  
   * 1: <el-button type="success" @click="onDbo(666)">测试防抖</el-button>
9.  
   * 2: import { debounce } from "@/utils/debounce";
10.  
    * 3：const onDbo = debounce( (num: number) {
11.  
    * console.log("😂👨🏾‍❤️‍👨🏼==>：", "测试防抖", num);
12.  
    * }, 250);
13.  
    * @returns {(...args: A) => void} 返回一个新的函数，该函数具有防抖效果 !!!
14.  
    */
15.  
    export function debounce<A extends any[], R>(
16.  
    fn: (...args: A) => R,
17.  
    delay = 250
18.  
    ) {
19.  
    let timer: NodeJS.Timeout | null = null;
20.  
     
21.  
    /**
22.  
    * 新的函数，具有防抖效果
23.  
    * @param args 函数的参数
24.  
    * Q: 为什么要使用箭头函数？
25.  
    * A: 箭头函数没有自己的this，所以箭头函数中的this就是外层代码块的this
26.  
    */
27.  
    return function (...args: A) {
28.  
    if (timer) clearTimeout(timer);
29.  
    timer = setTimeout(() => fn.apply(fn, args), delay);
30.  
    };
31.  
    }

第一种拆数据统一在父页面使用 

分模块的ts文件数据：

1.  
   /*授权书签署人数趋势
2.  
   ---------------------------------------------------------*/
3.  
   export const chartLineData = {
4.  
   tooltip: {
5.  
   trigger: 'axis',
6.  
   formatter: function (params: any) {
7.  
   var relVal = params[0].name;
8.  
   for (var i = 0; i < params.length; i ) {
9.  
   relVal = '<br/>' params[i].marker '签署人数' ' : ' params[i].value '人';
10.  
    }
11.  
    return relVal;
12.  
    },
13.  
    },
14.  
    grid: {
15.  
    left: '3%',
16.  
    right: '2%',
17.  
    bottom: '9%',
18.  
    containLabel: true,
19.  
    },
20.  
    xAxis: {
21.  
    type: 'category',
22.  
    data: [],
23.  
    axisLabel: {
24.  
    interval: 0,
25.  
    },
26.  
    },
27.  
    yAxis: {
28.  
    type: 'value',
29.  
    minInterval: 1,
30.  
    axisLabel: {
31.  
    formatter: '{value} 人',
32.  
    },
33.  
    },
34.  
    series: [
35.  
    {
36.  
    data: [],
37.  
    type: 'line',
38.  
    smooth: true,
39.  
    },
40.  
    ],
41.  
    };
42.  
     
43.  
    /*eCharts数据
44.  
    ---------------------------------------------------------*/
45.  
    export const chartLineData2 = {
46.  
    title: {
47.  
    text: 'ECharts 入门示例',
48.  
    },
49.  
    tooltip: {},
50.  
    legend: {
51.  
    data: ['销量'],
52.  
    },
53.  
    xAxis: {
54.  
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
55.  
    },
56.  
    yAxis: {},
57.  
    series: [
58.  
    {
59.  
    name: '销量',
60.  
    type: 'bar',
61.  
    data: [5, 20, 36, 10, 10, 20],
62.  
    },
63.  
    ],
64.  
    };
65.  
     
66.  
     
67.  
     

父组件使用：

1.  
   <template>
2.  
   <my-chart :myOption="chartLineData" :myStyle="{ width: '100%', height: '280px' }" v-if="Flag"></my-chart>
3.  
   </template>
4.  
    
5.  
   <script setup lang="ts">
6.  
   // 封装好的axios
7.  
   import service from '/@/utils/request';
8.  
   // 引入封装的chart组件
9.  
   import myChart from '/@/components/myEcharts/index.vue';
10.  
    // 引入图表数据
11.  
    import { chartLineData, chartLineData2 } from './chartsData/chartLine.ts';
12.  
    console.log( '😂👨🏾‍❤️‍👨🏼==>：', chartLineData, chartLineData2 );
13.  
    // 存储时间
14.  
    let time1 = ref<string[] | number[]>([]);
15.  
    // 存储数据
16.  
    let time2 = ref<string[] | number[]>([]);
17.  
    //接口是否请求完（ 等待接口请求完毕在传值到子组件）
18.  
    const Flag = ref<boolean>(false);
19.  
    /* 获取日期和data */
20.  
    const getCurveData = () =>
21.  
    {
22.  
    service.get('xxx').then((res: any) =>
23.  
    {
24.  
    time1.value = res.data.date;
25.  
    service.get('xxx').then((res: any) =>
26.  
    {
27.  
    time2.value = res.data.map((item: { countValue: number }) =>
28.  
    {
29.  
    return item.countValue;
30.  
    });
31.  
    // 拿到value
32.  
    for (let i in time1.value)
33.  
    {
34.  
    chartLineData.xAxis.data.push(time1.value[i]);
35.  
    }
36.  
    for (let v in time2.value)
37.  
    {
38.  
    chartLineData.series[0].data.push(time2.value[v]);
39.  
    }
40.  
    Flag.value = true;
41.  
    });
42.  
    });
43.  
    };
44.  
    onMounted(() =>
45.  
    {
46.  
    getCurveData();
47.  
    });
48.  
    </script>

第二种局部子组件调用全局子组件在父页面使用

局部子组件

1.  
   <template>
2.  
   <div class="topRec_List">
3.  
   <my-charts :my-option="option"></my-charts>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script setup lang="ts">
8.  
   // 引入全局子组件，可以全局祖册以后就不需要引入了，这里为了方便看懂，就引入了
9.  
   import myCharts from "@/components/GlobalComponents/myCharts.vue";
10.  
    const nodes = [
11.  
    {
12.  
    x: 500,
13.  
    y: 1000,
14.  
    nodeName: "应用",
15.  
    svgPath:
16.  
    "M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0",
17.  
    symbolSize: 70,
18.  
    },
19.  
    {
20.  
    x: 100,
21.  
    y: 600,
22.  
    nodeName: "模块1",
23.  
    svgPath:
24.  
    "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
25.  
    },
26.  
    {
27.  
    x: 500,
28.  
    y: 600,
29.  
    nodeName: "模块2",
30.  
    svgPath:
31.  
    "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
32.  
    },
33.  
    {
34.  
    x: 900,
35.  
    y: 600,
36.  
    nodeName: "模块3",
37.  
    svgPath:
38.  
    "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
39.  
    },
40.  
    {
41.  
    x: 0,
42.  
    y: 300,
43.  
    nodeName: "节点1",
44.  
    svgPath:
45.  
    "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
46.  
    },
47.  
    {
48.  
    x: 300,
49.  
    y: 300,
50.  
    nodeName: "节点2",
51.  
    svgPath:
52.  
    "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
53.  
    },
54.  
    {
55.  
    x: 700,
56.  
    y: 300,
57.  
    nodeName: "节点3",
58.  
    svgPath:
59.  
    "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
60.  
    },
61.  
    {
62.  
    x: 1000,
63.  
    y: 300,
64.  
    nodeName: "节点4",
65.  
    svgPath:
66.  
    "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
67.  
    },
68.  
    ];
69.  
    const charts = {
70.  
    nodes: [],
71.  
    linesData: [
72.  
    {
73.  
    coords: [
74.  
    [500, 900],
75.  
    [500, 800],
76.  
    ],
77.  
    },
78.  
    {
79.  
    coords: [
80.  
    [500, 800],
81.  
    [100, 800],
82.  
    [100, 600],
83.  
    ],
84.  
    },
85.  
    {
86.  
    coords: [
87.  
    [500, 800],
88.  
    [500, 600],
89.  
    ],
90.  
    },
91.  
    {
92.  
    coords: [
93.  
    [500, 800],
94.  
    [900, 800],
95.  
    [900, 600],
96.  
    ],
97.  
    },
98.  
    {
99.  
    coords: [
100.  
     [100, 600],
101.  
     [0, 300],
102.  
     ],
103.  
     },
104.  
     {
105.  
     coords: [
106.  
     [100, 600],
107.  
     [300, 300],
108.  
     ],
109.  
     },
110.  
     {
111.  
     coords: [
112.  
     [900, 600],
113.  
     [700, 300],
114.  
     ],
115.  
     },
116.  
     {
117.  
     coords: [
118.  
     [900, 600],
119.  
     [1000, 300],
120.  
     ],
121.  
     },
122.  
     ],
123.  
     };
124.  
     for (let j = 0; j < nodes.length; j ) {
125.  
     const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
126.  
     const node = {
127.  
     nodeName,
128.  
     value: [x, y],
129.  
     symbolSize: symbolSize || 50,
130.  
     symbol: "path://" svgPath,
131.  
     itemStyle: { color: "orange" },
132.  
     };
133.  
     charts.nodes.push(node as never);
134.  
     }
135.  
     // grid：用于控制图表的位置和大小。可以通过设置 left、right、top、bottom 等属性来调整它们的值
136.  
     // xAxis 和 yAxis：用于控制 x 轴和 y 轴的位置和大小。可配合 grid 属性来控制
137.  
     // series：用于控制图表的类型、数据等
138.  
     const xAxis = { min: 0, max: 1100, show: false, type: "value" };
139.  
     const yAxis = { min: 0, max: 850, show: false, type: "value" };
140.  
     const grid = {
141.  
     top: 80,
142.  
     left: 35,
143.  
     right: 0,
144.  
     bottom: "-10%",
145.  
     };
146.  
     const series = [
147.  
     {
148.  
     type: "graph",
149.  
     // 二维直角坐标系
150.  
     coordinateSystem: "cartesian2d",
151.  
     label: {
152.  
     show: true,
153.  
     position: "bottom",
154.  
     color: "orange",
155.  
     formatter: function (item: { data: { nodeName: unknown } }) {
156.  
     return item.data.nodeName;
157.  
     },
158.  
     },
159.  
      
160.  
     data: charts.nodes,
161.  
     },
162.  
     {
163.  
     type: "lines",
164.  
     // 是否直线
165.  
     polyline: true,
166.  
     // 二维直角坐标系
167.  
     coordinateSystem: "cartesian2d",
168.  
     lineStyle: {
169.  
     type: "dashed",
170.  
     width: 2,
171.  
     color: "#175064",
172.  
     curveness: 0.3,
173.  
     },
174.  
     // 箭头动画效果
175.  
     effect: {
176.  
     show: true,
177.  
     trailLength: 0.1,
178.  
     symbol: "arrow",
179.  
     color: "orange",
180.  
     symbolSize: 8,
181.  
     },
182.  
     data: charts.linesData,
183.  
     },
184.  
     ];
185.  
      
186.  
     const option = { xAxis, yAxis, grid, series };
187.  
     </script>
188.  
      
189.  
     <style scoped lang="scss">
190.  
     .topRec_List {
191.  
     width: 100%;
192.  
     height: 100%;
193.  
     }
194.  
     </style>

 在父页面调用局部子组件即可

本文完

这篇好文章是转载于：学新通技术网