前期回顾
https://blog.csdn.net/m0_57904695/article/details/126351923?spm=1001.2014.3001.5501目录
Vue2封装
子组件
<template>
<div :id="uuid" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
const idGen = () => {
return new Date().getTime();
};
export default {
props: {
height: {
type: String,
default: "400px",
},
width: {
type: String,
default: "600px",
},
options: {
type: Object,
default: null,
},
},
data() {
return {
uuid: null,
myChart: null,
};
},
watch: {
width(a, b) {
if (this.myChart) {
// 这里需要异步才能生效
setTimeout(() => {
this.myChart.resize({
animation: {
duration: 500,
},
});
}, 0);
}
},
options() {
if (this.myChart) {
// notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。
//合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件
this.myChart.setOption(this.options, {
notMerge: true,
});
}
},
},
computed: {
style() {
return {
height: this.height,
width: this.width,
};
},
},
created() {
this.uuid = idGen();
},
mounted() {
// 准备实例
this.myChart = echarts.init(document.getElementById(this.uuid));
// 应用配置项
this.myChart.setOption(this.options);
},
};
</script>
页面使用
<template>
<div id="app">
<MyEcharts :options="options" :width="width"></MyEcharts>
<button @click="changeWidth">changeWidth</button>
<button @click="changeOpt">changeOpt</button>
</div>
</template>
<script>
import MyEcharts from "./components/MyEcharts.vue";
import { options1, options2 } from "./options";
export default {
name: "App",
components: {
MyEcharts,
},
data() {
return {
options: options1,
width: "600px",
};
},
methods: {
changeWidth() {
if (this.width == "600px") {
console.log(1);
this.width = "800px";
} else {
console.log(2);
this.width = "600px";
}
},
changeOpt() {
if (this.options == options1) {
this.options = options2;
} else {
this.options = options1;
}
},
},
};
</script>
Vue3封装
全局子组件：
<template>
<div :id="uid" :style="myStyle"></div>
</template>
<script setup lang="ts">
import { onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { debounce } from '/@/utils/debounce';
let myChart: echarts.ECharts | null = null;
let uid = ref<string>('');
uid.value = `echarts-uid-${parseInt((Math.random() * 1000).toString())}`;
// 初始化图表
function chartInit() {
let chartDom = document.getElementById(uid.value) as HTMLElement;
// 当父组件开启了keep-alive时，在echarts没有初始化时，快速切换到其他路由，
// 会导致echarts dom初始化失败，所以需要判断一下
if (chartDom && props.myOption) {
myChart = echarts.init(chartDom, undefined, {
devicePixelRatio: window.devicePixelRatio,
});
myChart.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});
myChart.setOption(props.myOption);
myChart.hideLoading();
}
}
// 销毁图表
function chartDispose() {
if (myChart) {
myChart.dispose();
myChart = null;
window.removeEventListener('resize', afterDebounce());
}
}
const props = defineProps({
myStyle: {
type: Object,
default: () => ({
width: '100%',
height: '100%',
overflow: 'auto',
}),
},
myOption: {
type: Object,
default: () => ({}),
required: true,
},
});
watch(
() => props.myOption,
() => {
myChart?.setOption(props.myOption);
},
{
deep: true,
immediate: true,
}
);
// 每次窗口大小改变时，ECharts都会使用当前的devicePixelRatio重新初始化，从而保证图表的清晰度
function chartResize() {
if (myChart) {
myChart.dispose();
}
let chartDom = document.getElementById(uid.value) as HTMLElement;
myChart = echarts.init(chartDom, undefined, {
devicePixelRatio: window.devicePixelRatio,
});
myChart.setOption(props.myOption);
myChart.resize({
animation: {
duration: 300,
},
});
}
const afterDebounce = debounce(chartResize, 300);
window.addEventListener('resize', () => afterDebounce());
onMounted(() => {
chartInit();
});
onBeforeUnmount(() => {
// 组件销毁时，销毁图表
chartDispose();
});
onActivated(() => {
/* 使用功能keep-alive时，如果图表已经被销毁，才需要重新初始化，否则会
There is a chart instance already initialized on the dom.(dom上已经初始化了一个图表实例。)
*/
if (!myChart) chartInit();
});
onDeactivated(() => {
chartDispose();
});
// 抛出myChart实例
function chartsInstance() {
return myChart;
}
defineExpose({ chartResize, chartsInstance });
</script>
封装的 防抖函数 src\utils\debounce\index.ts
/**
* 防抖函数，用于限制某个函数在一段时间内只能被调用一次
* @param A 函数的参数
* @param R 函数的返回值
* @param { function } fn 要执行的函数
* @param { number } delay 延迟的时间，以毫秒为单位
* @example
* 1: <el-button type="success" @click="onDbo(666)">测试防抖</el-button>
* 2: import { debounce } from "@/utils/debounce";
* 3：const onDbo = debounce( (num: number) {
* console.log("😂👨🏾❤️👨🏼==>：", "测试防抖", num);
* }, 250);
* @returns {(...args: A) => void} 返回一个新的函数，该函数具有防抖效果 !!!
*/
export function debounce<A extends any[], R>(
fn: (...args: A) => R,
delay = 250
) {
let timer: NodeJS.Timeout | null = null;
/**
* 新的函数，具有防抖效果
* @param args 函数的参数
* Q: 为什么要使用箭头函数？
* A: 箭头函数没有自己的this，所以箭头函数中的this就是外层代码块的this
*/
return function (...args: A) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn.apply(fn, args), delay);
};
}
第一种拆数据统一在父页面使用
分模块的ts文件数据：
import { ref } from "vue";
// 模拟接口数据,必须是响应式数据
export const chartLineData = ref({
tooltip: {
trigger: "axis",
},
title: {
text: "我的线性图",
},
grid: {
left: "3%",
right: "2%",
bottom: "9%",
containLabel: true,
},
xAxis: {
type: "category",
// 这里从接口获取
data: [],
axisLabel: {
interval: 0,
},
},
yAxis: {
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value} 人",
},
},
series: [
{
// 这里从接口获取
data: [],
type: "line",
smooth: true,
},
],
});
// 静态数据
export const chartLineData2 = ref({
tooltip: {
trigger: "axis",
},
title: {
text: "我的线性图",
},
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "line",
smooth: true,
},
],
});
父组件使用：
<template>
<div
class="container w100 h100"
v-waterMarker="{
text: '版权所有',
textColor: 'rgba(180, 180, 180, 0.4)',
}"
>
测试keepAline:<input type="text" />
<el-button @click="handClick('我是参数')" type="success" class="ml10"
>点我测试tools工具函数</el-button
>
<!-- 庆祝彩蛋 -->
<zk-confetti-canvas />
<!-- 静态 例子 -->
<zk-chart
ref="refChart"
:myOption="chartLineData2"
:myStyle="{
width: '100%',
height: '280px',
}"
></zk-chart>
<!-- 模拟接口 例子 -->
<zk-chart
ref="refChart"
:myOption="chartLineData"
:myStyle="{
width: '100%',
height: '280px',
}"
v-if="Flag"
></zk-chart>
<!-- 骨架屏 -->
<el-skeleton
v-else
:rows="5"
:animated="true"
style="margin: 10px auto; width: 90%; height: 500px"
/>
</div>
</template>
<script setup lang="ts">
// 工具插件
import { debounceRest, isEvenOrOdd, isType } from "vue3-directive-tools";
// 加密插件
const encryptionPlugin = inject("encryptionPlugin") as EncryptionPlugin;
// 彩蛋函数
import { showConfetti } from "@/utils/confetti/confetti";
// 模拟接口、静态ECharts数据
import { chartLineData, chartLineData2 } from "./part-components/chart-line";
//接口是否请求完（ 等待接口请求完毕在传值到子组件）防止白屏
const Flag = ref<boolean>(false);
const getCurveData = () => {
// 正式接口
// service({
// url: "/api/curve",
// method: "get",
// }).then((res) => {
// chartLineData.xAxis.data = res.data.xAxis;
// chartLineData.series[0].data = res.data.series;
// Flag.value = true;
// });
// 模拟接口 一秒钟后直接赋值给ECharts
setTimeout(() => {
chartLineData.value.xAxis.data = [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun",
] as never;
chartLineData.value.series[0].data = [
820, 932, 901, 934, 1290, 1330, 1320,
] as never;
chartLineData.value.title.text = "折线图模拟接口数据";
Flag.value = true;
setTimeout(() => {
showConfetti(4, {
x: 0.9,
y: 0.6,
});
}, 1000);
}, 1000);
};
const handClick = debounceRest((varStr: string) => {
ElMessage.success("请打开控制台查看");
const encryptedData = encryptionPlugin.encryptData("1334132303@qq.com"); // 加密
const decryptedData = encryptionPlugin.decryptData(encryptedData); // 解密
console.log("加密后 🚀 ==>:", encryptedData);
console.log("解密后 🚀 ==>:", decryptedData);
console.log("我是防抖payload参数 🚀 ==>:", varStr);
console.log("判断奇数偶数 🚀 ==>:", isEvenOrOdd(-0.3));
console.log("判断类型 🚀 ==>:", isType({}));
}, 250);
onMounted(() => getCurveData());
</script>
<style scoped lang="scss">
// @import "./index.scss";
.container {
position: relative;
padding: 10px;
box-sizing: border-box;
}
</style>
第二种局部子组件调用全局子组件在父页面使用
局部子组件
<template>
<div class="topRec_List">
<my-charts :my-option="option"></my-charts>
</div>
</template>
<script setup lang="ts">
// 引入全局子组件，可以全局祖册以后就不需要引入了，这里为了方便看懂，就引入了
import myCharts from "@/components/GlobalComponents/myCharts.vue";
const nodes = [
{
x: 500,
y: 1000,
nodeName: "应用",
svgPath:
"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",
symbolSize: 70,
},
{
x: 100,
y: 600,
nodeName: "模块1",
svgPath:
"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",
},
{
x: 500,
y: 600,
nodeName: "模块2",
svgPath:
"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",
},
{
x: 900,
y: 600,
nodeName: "模块3",
svgPath:
"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",
},
{
x: 0,
y: 300,
nodeName: "节点1",
svgPath:
"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",
},
{
x: 300,
y: 300,
nodeName: "节点2",
svgPath:
"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",
},
{
x: 700,
y: 300,
nodeName: "节点3",
svgPath:
"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",
},
{
x: 1000,
y: 300,
nodeName: "节点4",
svgPath:
"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",
},
];
const charts = {
nodes: [],
linesData: [
{
coords: [
[500, 900],
[500, 800],
],
},
{
coords: [
[500, 800],
[100, 800],
[100, 600],
],
},
{
coords: [
[500, 800],
[500, 600],
],
},
{
coords: [
[500, 800],
[900, 800],
[900, 600],
],
},
{
coords: [
[100, 600],
[0, 300],
],
},
{
coords: [
[100, 600],
[300, 300],
],
},
{
coords: [
[900, 600],
[700, 300],
],
},
{
coords: [
[900, 600],
[1000, 300],
],
},
],
};
for (let j = 0; j < nodes.length; j++) {
const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
const node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 50,
symbol: "path://" + svgPath,
itemStyle: { color: "orange" },
};
charts.nodes.push(node as never);
}
// grid：用于控制图表的位置和大小。可以通过设置 left、right、top、bottom 等属性来调整它们的值
// xAxis 和 yAxis：用于控制 x 轴和 y 轴的位置和大小。可配合 grid 属性来控制
// series：用于控制图表的类型、数据等
const xAxis = { min: 0, max: 1100, show: false, type: "value" };
const yAxis = { min: 0, max: 850, show: false, type: "value" };
const grid = {
top: 80,
left: 35,
right: 0,
bottom: "-10%",
};
const series = [
{
type: "graph",
// 二维直角坐标系
coordinateSystem: "cartesian2d",
label: {
show: true,
position: "bottom",
color: "orange",
formatter: function (item: { data: { nodeName: unknown } }) {
return item.data.nodeName;
},
},
data: charts.nodes,
},
{
type: "lines",
// 是否直线
polyline: true,
// 二维直角坐标系
coordinateSystem: "cartesian2d",
lineStyle: {
type: "dashed",
width: 2,
color: "#175064",
curveness: 0.3,
},
// 箭头动画效果
effect: {
show: true,
trailLength: 0.1,
symbol: "arrow",
color: "orange",
symbolSize: 8,
},
data: charts.linesData,
},
];
const option = { xAxis, yAxis, grid, series };
</script>
<style scoped lang="scss">
.topRec_List {
width: 100%;
height: 100%;
}
</style>
在父页面调用局部子组件即可
本文完
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
