5min组件库搭建小波去噪器
应用类型：Web应用
特征: Errantia 组件库 5分钟实现
实现效果
实现步骤
步骤一：组件库安装
step1：内部专用组件库安装方式(@tongyuan/errantia)
信息
内部安装方式推荐使用，首选设置@tongyuan scope registry作用域方式，如果不熟悉参考npm.scope。
现在，你的项目你只需要执行下面脚本命令即可：
npm config set @tongyuan:registry https://packages.aliyun.com/5f422c87db0493ecef90df61/npm/npm-registry
- npm
- yarn
- pnpm
npm install @tongyuan/errantia
yarn add @tongyuan/errantia
pnpm add @tongyuan/errantia
step2：项目引入组件库
// main.ts
import { createApp } from 'vue'
import Errantia from '@tongyuan/errantia'
import '../node_modules/@tongyuan/errantia/dist/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(Errantia)
app.mount('#app')
步骤二：拆分模块开发
step1：菜单栏模块实现
- 结果展示
- 设计包含文字和icon的数据结构
数据结构
const menu = [
{
title: '文件',
name: 'file',
actions: [
{
title: '新建',
name: 'newSession',
icon: newIcon,
componentType: 'BigSelect'
},
{
title: '导入',
name: 'import',
icon: importIcon,
componentType: 'BigSelect'
}
]
},
{
title: '去照信号',
name: 'denoiseedSignal',
actions: [
{
title: '添加',
name: 'addSignal',
icon: addIcon,
componentType: 'BigSelect'
},
{
title: '复制',
name: 'copy',
icon: copyIcon,
componentType: 'LiteSelect'
},
{
title: '删除',
name: 'delete',
icon: deleteIcon,
componentType: 'LiteSelect'
}
]
},
{
title: '显示',
name: 'display',
actions: [
{
title: '信号',
name: 'signal',
icon: waveIcon,
componentType: 'BigSelect',
hasSubscript: true
},
{
title: '系数',
name: 'config',
icon: confiIcon,
componentType: 'BigSelect',
hasSubscript: true
},
]
},
{
title: '导出',
name: 'export',
actions: [
{
title: '导出',
name: 'export',
icon: exportIcon,
componentType: 'BigSelect',
}
]
},
]
- 构建页面结构
代码
<template>
<erTabs
:tabList="tabList"
:activateTab="activateTab"
@onSwitchTab="handleSwitchTab"
>
<div v-show="activateTab === 0">
<erMenuBar>
<template v-for="item in menu">
<erMenuItem :title="item.title">
<template v-for="action in item.actions">
<erPicText
v-if="action.componentType === 'BigSelect'"
:iconPath="action.icon"
:title="action.title"
:hasSubscript="action.hasSubscript"
/>
</template>
<erFlex vertical style="width: fit-content;">
<template v-for="action in item.actions">
<erPicText
v-if="action.componentType === 'LiteSelect'"
horizontal
:iconPath="action.icon"
:title="action.title"
:hasSubscript="action.hasSubscript"
/>
</template>
</erFlex>
</erMenuItem>
</template>
</erMenuBar>
</div>
</erTabs>
</template>
step2：侧边栏模块实现
- 结果展示
- 构建页面结构
代码
<template>
<erFlex
style="width: 200px; background-color: #F3F3F3;"
vertical
justify="space-between"
>
<div style="height: 300px;">
<erPicText style="height: fit-content;" title="去噪信号"/>
<erTable
:dataSource="[{name: '小波1'}]"
:columns="[{title: '名称', key: 'name'}]"
/>
</div>
<div style="height: 300px;">
<erPicText
:outStyleAction="{'align-items':'flex-start', paddingLeft: '5px'}"
title="当前小波参数"
style="height: fit-content; width:100%"
/>
<erTable
borders
:dataSource="[{param: '去噪信号名称',value: '小波1'}]"
:columns="[{title: '参数项', key: 'param'},{title: '值', key: 'value'}]"
/>
</div>
</erFlex>
</template>
step3：绘图模块实现
- 结果展示
- 绘图数据准备
数据结构
// 图表数据
const data = [
{
"y": [
0.0064287926880235435,
0.18694110745118098,
0.5201277476935714,
0.808575343680355,
0.21382011639513998,
0.8103780157014363,
0.47742570041237553,
0.25962780194159407,
0.3129069666107368,
0.4519490739750731,
0.10952847473221128,
0.8989014858853921,
0.12301623129670192,
0.31042462664617276,
0.4743642731251364,
0.7888078171829179,
0.07163048735410671,
0.4880198267554895,
0.20683819013717253,
0.8079551593739761,
0.26256439712545365,
0.14629303573889152,
0.9208376741307214,
0.8677085078009076,
0.3579225981729204,
0.6528444504050894,
0.2604166809307171,
0.3942983008054982,
0.178283095124103,
0.13234335366517413,
0.939729270711462,
0.6975084514743302,
0.3012418019339326,
0.9944497269738424,
0.1480113153859528,
0.567875872570531,
0.8796580199124829,
0.015337559332675332,
0.9347932921640442,
0.7277752620747855,
0.018414466793074125,
0.4990082839443154,
0.11178100621614762,
0.5489842124031638,
0.4077137937803046,
0.24077290126617923,
0.03043750888519048,
0.5843636718690006,
0.8179584008674164,
0.6255568378759607,
0.1681585102497163,
0.9097784064907231,
0.9007169359117055,
0.5923251950247183,
0.20782861992668833,
0.5656593849299029,
0.25052321345112816,
0.4457422730862586,
0.7156499667315368,
0.004522878403332209,
0.8803971699192904,
0.4025031485596021,
0.6213517123624138,
0.4759731781331935,
0.7240894094870607,
0.239775563350193,
0.46195748655962565,
0.8868333669398873,
0.018916068959845322,
0.5115627529171315,
0.31456788541856806,
0.6740028341033633,
0.7783911526126956,
0.6699828325773066,
0.8465866035452764,
0.49932322306583654,
0.5500204703492558,
0.8654821687889903,
0.021931020691197123,
0.2925385000048669,
0.2821529352792682,
0.8467598571765805,
0.491504790480914,
0.9154756289752097,
0.8332659317639124,
0.17738962396434466,
0.7363875109783335,
0.5623231613077684,
0.10286930907637659,
0.553997603647305,
0.984198097256399,
0.10012802782359176,
0.5604004682132514,
0.6520653983835007,
0.9056004541062548,
0.4341968852987841,
0.831220451487605,
0.724922218355798,
0.21976471259042096,
0.603362473830035
],
"X": {},
"mode": "lines",
"type": "scatter",
"line": {
"color": "#4F9ED1"
},
"name": "s2",
"visible": true,
"uuid": "origin"
},
{
"name": "Approximation",
"y": [
0.48495012273124277,
0.49096015063146137,
0.4961128275999124,
0.4961539164330679,
0.49393386655833804,
0.4902015309564402,
0.48548737813424525,
0.48240866700065227,
0.4793322364898127,
0.4760952843560176,
0.472432441612607,
0.46604602832709213,
0.4584507390690119,
0.45190679718322885,
0.44539017075426707,
0.43700835070689414,
0.4291776218067408,
0.4204853589766876,
0.41346130827672106,
0.41568248149535053,
0.4221644696374063,
0.43098397420964274,
0.44169878845229105,
0.450923619630325,
0.4604372074718419,
0.4708331892341008,
0.48187981786742295,
0.4948837357691776,
0.5089077443793711,
0.521754476516606,
0.5345434606675792,
0.5497982510141254,
0.5645973689917481,
0.5802165235472329,
0.5940174227869345,
0.5977365534584798,
0.5966606313623706,
0.5935107631010785,
0.5881810015558572,
0.5828892828879564,
0.576938214064141,
0.5693600692422768,
0.5611264089091514,
0.5538417681092324,
0.5466026413761034,
0.5395878110083285,
0.5324780196342063,
0.5238544022047544,
0.5149975111163159,
0.505836053535038,
0.4970488850179241,
0.4911447553878927,
0.48665164838615016,
0.4822863971600883,
0.4785388842195618,
0.47587071887326166,
0.4735617338340624,
0.4721520815982842,
0.4708213245176007,
0.46680789699465225,
0.46184594033103216,
0.45759875578627685,
0.4534681019460437,
0.44881692159920705,
0.44476886607836236,
0.4403629589394396,
0.43708631472070647,
0.43922518522452736,
0.44393132152769665,
0.4501770306042415,
0.45763864482577327,
0.4642280409077084,
0.471083851820182,
0.47849237535445643,
0.4864013804699582,
0.49589058305093636,
0.5061957930436157,
0.5158405874931464,
0.5255299372381531,
0.536769154775909,
0.5477359671396635,
0.5592996833869519,
0.5697257169487352,
0.5736984037215982,
0.5746366349052207,
0.5741141229886908,
0.572203190945475,
0.5706887104901442,
0.56879245373641,
0.5659895981284693,
0.5626834176219484,
0.5590781004986939,
0.5551188059521655,
0.5513952383486247,
0.5475403519736792,
0.5425281303826206,
0.5374667672310864,
0.5319340783103661,
0.5268738505010397,
0.5251994896794775
],
"x": {},
"line": {
"dash": "dot",
"color": "#0F0F0F"
},
"mode": "lines",
"type": "scatter",
"visible": true,
"uuid": "approximaton"
},
{
"y": [
0.3141432631638309,
0.3719872095413391,
0.42586318521439226,
0.4423818592401496,
0.4423159229866746,
0.439365227134081,
0.43061228371502536,
0.41877459050507687,
0.40636852774324705,
0.388050363862841,
0.3709319116731143,
0.3746002855760202,
0.3870544366000726,
0.3998565605426508,
0.41517300874380375,
0.4326428076284772,
0.4498943519441134,
0.4698970918434145,
0.4883874904367583,
0.4922694600427458,
0.48933366954699803,
0.48760890885731717,
0.4837889283357329,
0.4732100083781599,
0.4619201532358215,
0.4471012658249636,
0.434175839361317,
0.4424272120479691,
0.4603362491216931,
0.47465058812424465,
0.4911985808320198,
0.5191549798194269,
0.5471499882360608,
0.5807680363687956,
0.6095669543464222,
0.5979216800093631,
0.5678502858380244,
0.5396225198735349,
0.5061037763131248,
0.45979582726747537,
0.41352726435914017,
0.35838958745332494,
0.3093490341280431,
0.31318908645906823,
0.34068053738391135,
0.3702572765062393,
0.4075162242737749,
0.45248020684305407,
0.4975564354173163,
0.5520240279393949,
0.6023395319797207,
0.6099176134224962,
0.5989509499247473,
0.584118624448179,
0.5630122006250751,
0.5413750903542419,
0.5198806767286471,
0.4924711677260836,
0.4664106675771025,
0.45950297539486895,
0.46056090298583646,
0.4649433677179729,
0.4722789576663633,
0.4760669871453178,
0.47979524074415203,
0.4850610590397878,
0.4913002674047412,
0.49999573275303383,
0.5101718495071718,
0.5193608083961071,
0.5289041540552719,
0.5418585811034523,
0.5548681736325679,
0.5692250415799794,
0.5821367109321643,
0.5843840299347898,
0.5817754122581761,
0.5782682645497901,
0.5730131109106984,
0.5666407210777866,
0.5600852642120129,
0.5516904498875925,
0.5437580544659626,
0.5424772237308583,
0.5439920846230681,
0.5462633146586799,
0.5494923587648454,
0.5522455927030572,
0.5549529890945473,
0.5584667972241754,
0.5619971180833686,
0.5639999133154793,
0.5654909538467829,
0.5665058792112981,
0.5673625579305838,
0.5694375571814482,
0.571726350872042,
0.5740330136688483,
0.5761792890270692,
0.576646627772628
],
"x": {},
"mode": "lines",
"type": "scatter",
"line": {
"color": "#D8541B"
},
"name": "s21"
}
]
const layout = {
xaxis: {
title: 'Samples',
zeroline: false,
showline: true,
mirror: true
},
yaxis: {
title: 'Amplitude',
zeroline: false,
showline: true,
mirror: true
},
showlegend: true,
legend: {
x: 0.1,
xanchor: 'center',
y: 1,
yanchor: 'top',
traceorder: 'normal',
bgcolor: '#FFFFFF',
bordercolor: '#000',
borderwidth: 1,
},
margin: {
l: 40,
r: 40,
b: 40,
t: 10,
},
modebar: {
remove: ["resetScale2d","toImage"]
},
};
- 构建页面结构
代码
<template>
<erPlot
:dataSource="data"
:layout="layout"
/>
</template>
step4：页脚模块实现
- 结果展示
- 构建页面结构
代码
<template>
<erStatusBar>
<erRollLoading :loading="true" :outStyleRollLoading="{'margin-right': '80px'}" />
</erStatusBar>
</template>
步骤三：组装模块合并
完成演示
全部代码
代码
<template>
<div style="width: 100vw; height: 100vh;">
<erTabs
:tabList="tabList"
:activateTab="activateTab"
style="height: fit-content;"
@onSwitchTab="handleSwitchTab"
:outStyleContainer="{height: '150px'}"
>
<div v-show="activateTab === 0">
<erMenuBar>
<template v-for="item in menu">
<erMenuItem :title="item.title">
<template v-for="action in item.actions">
<erPicText
v-if="action.componentType === 'BigSelect'"
:iconPath="action.icon"
:title="action.title"
:hasSubscript="action.hasSubscript"
/>
</template>
<erFlex vertical style="width: fit-content;">
<template v-for="action in item.actions">
<erPicText
v-if="action.componentType === 'LiteSelect'"
horizontal
:iconPath="action.icon"
:title="action.title"
:hasSubscript="action.hasSubscript"
/>
</template>
</erFlex>
</erMenuItem>
</template>
</erMenuBar>
</div>
</erTabs>
<erFlex style="height: calc(100% - 185px);" >
<erFlex
style="width: 200px; background-color: #F3F3F3;"
vertical
>
<div style="height: 200px;">
<erPicText style="height: fit-content;" title="去噪信号"/>
<erTable
:dataSource="[{name: '小波1'}]"
:columns="[{title: '名称', key: 'name'}]"
/>
</div>
<div style="height: 200px;">
<erPicText
:outStyleAction="{'align-items':'flex-start', paddingLeft: '5px'}"
title="当前小波参数"
style="height: fit-content; width:100%"
/>
<erTable
borders
:dataSource="[{param: '去噪信号名称',value: '小波1'}]"
:columns="[{title: '参数项', key: 'param'},{title: '值', key: 'value'}]"
/>
</div>
</erFlex>
<erFlex>
<erPlot
:dataSource="data"
:layout="layout"
/>
</erFlex>
</erFlex>
<erStatusBar>
<erRollLoading :loading="true" :outStyleRollLoading="{'margin-right': '80px'}" />
</erStatusBar>
</div>
</template>
<script setup>
import newIcon from '@/assets/svg/newAdd.svg'
import addIcon from '@/assets/svg/add.svg'
import importIcon from '@/assets/svg/import.svg'
import copyIcon from '@/assets/svg/copy.svg'
import deleteIcon from '@/assets/svg/delete.svg'
import waveIcon from '@/assets/svg/signal.svg'
import confiIcon from '@/assets/svg/coefficient.svg'
import exportIcon from '@/assets/svg/export.svg'
import { ref } from 'vue'
const activateTab = ref(0)
const handleSwitchTab = (tab) => {
activateTab.value = tab.id
}
const tabList = [
{id: 0, label: '去噪信号'},
{id: 1, label: '小波'},
]
// 菜单栏结构
const menu = [
{
title: '文件',
name: 'file',
actions: [
{
title: '新 建',
name: 'newSession',
icon: newIcon,
componentType: 'BigSelect'
},
{
title: '导入',
name: 'import',
icon: importIcon,
componentType: 'BigSelect'
}
]
},
{
title: '去照信号',
name: 'denoiseedSignal',
actions: [
{
title: '添加',
name: 'addSignal',
icon: addIcon,
componentType: 'BigSelect'
},
{
title: '复制',
name: 'copy',
icon: copyIcon,
componentType: 'LiteSelect'
},
{
title: '删除',
name: 'delete',
icon: deleteIcon,
componentType: 'LiteSelect'
}
]
},
{
title: '显示',
name: 'display',
actions: [
{
title: '信号',
name: 'signal',
icon: waveIcon,
componentType: 'BigSelect',
hasSubscript: true
},
{
title: '系数',
name: 'config',
icon: confiIcon,
componentType: 'BigSelect',
hasSubscript: true
},
]
},
{
title: '导出',
name: 'export',
actions: [
{
title: '导出',
name: 'export',
icon: exportIcon,
componentType: 'BigSelect',
}
]
},
]
// 图表数据
const data = [
{
"y": [
0.0064287926880235435,
0.18694110745118098,
0.5201277476935714,
0.808575343680355,
0.21382011639513998,
0.8103780157014363,
0.47742570041237553,
0.25962780194159407,
0.3129069666107368,
0.4519490739750731,
0.10952847473221128,
0.8989014858853921,
0.12301623129670192,
0.31042462664617276,
0.4743642731251364,
0.7888078171829179,
0.07163048735410671,
0.4880198267554895,
0.20683819013717253,
0.8079551593739761,
0.26256439712545365,
0.14629303573889152,
0.9208376741307214,
0.8677085078009076,
0.3579225981729204,
0.6528444504050894,
0.2604166809307171,
0.3942983008054982,
0.178283095124103,
0.13234335366517413,
0.939729270711462,
0.6975084514743302,
0.3012418019339326,
0.9944497269738424,
0.1480113153859528,
0.567875872570531,
0.8796580199124829,
0.015337559332675332,
0.9347932921640442,
0.7277752620747855,
0.018414466793074125,
0.4990082839443154,
0.11178100621614762,
0.5489842124031638,
0.4077137937803046,
0.24077290126617923,
0.03043750888519048,
0.5843636718690006,
0.8179584008674164,
0.6255568378759607,
0.1681585102497163,
0.9097784064907231,
0.9007169359117055,
0.5923251950247183,
0.20782861992668833,
0.5656593849299029,
0.25052321345112816,
0.4457422730862586,
0.7156499667315368,
0.004522878403332209,
0.8803971699192904,
0.4025031485596021,
0.6213517123624138,
0.4759731781331935,
0.7240894094870607,
0.239775563350193,
0.46195748655962565,
0.8868333669398873,
0.018916068959845322,
0.5115627529171315,
0.31456788541856806,
0.6740028341033633,
0.7783911526126956,
0.6699828325773066,
0.8465866035452764,
0.49932322306583654,
0.5500204703492558,
0.8654821687889903,
0.021931020691197123,
0.2925385000048669,
0.2821529352792682,
0.8467598571765805,
0.491504790480914,
0.9154756289752097,
0.8332659317639124,
0.17738962396434466,
0.7363875109783335,
0.5623231613077684,
0.10286930907637659,
0.553997603647305,
0.984198097256399,
0.10012802782359176,
0.5604004682132514,
0.6520653983835007,
0.9056004541062548,
0.4341968852987841,
0.831220451487605,
0.724922218355798,
0.21976471259042096,
0.603362473830035
],
"X": {},
"mode": "lines",
"type": "scatter",
"line": {
"color": "#4F9ED1"
},
"name": "s2",
"visible": true,
"uuid": "origin"
},
{
"name": "Approximation",
"y": [
0.48495012273124277,
0.49096015063146137,
0.4961128275999124,
0.4961539164330679,
0.49393386655833804,
0.4902015309564402,
0.48548737813424525,
0.48240866700065227,
0.4793322364898127,
0.4760952843560176,
0.472432441612607,
0.46604602832709213,
0.4584507390690119,
0.45190679718322885,
0.44539017075426707,
0.43700835070689414,
0.4291776218067408,
0.4204853589766876,
0.41346130827672106,
0.41568248149535053,
0.4221644696374063,
0.43098397420964274,
0.44169878845229105,
0.450923619630325,
0.4604372074718419,
0.4708331892341008,
0.48187981786742295,
0.4948837357691776,
0.5089077443793711,
0.521754476516606,
0.5345434606675792,
0.5497982510141254,
0.5645973689917481,
0.5802165235472329,
0.5940174227869345,
0.5977365534584798,
0.5966606313623706,
0.5935107631010785,
0.5881810015558572,
0.5828892828879564,
0.576938214064141,
0.5693600692422768,
0.5611264089091514,
0.5538417681092324,
0.5466026413761034,
0.5395878110083285,
0.5324780196342063,
0.5238544022047544,
0.5149975111163159,
0.505836053535038,
0.4970488850179241,
0.4911447553878927,
0.48665164838615016,
0.4822863971600883,
0.4785388842195618,
0.47587071887326166,
0.4735617338340624,
0.4721520815982842,
0.4708213245176007,
0.46680789699465225,
0.46184594033103216,
0.45759875578627685,
0.4534681019460437,
0.44881692159920705,
0.44476886607836236,
0.4403629589394396,
0.43708631472070647,
0.43922518522452736,
0.44393132152769665,
0.4501770306042415,
0.45763864482577327,
0.4642280409077084,
0.471083851820182,
0.47849237535445643,
0.4864013804699582,
0.49589058305093636,
0.5061957930436157,
0.5158405874931464,
0.5255299372381531,
0.536769154775909,
0.5477359671396635,
0.5592996833869519,
0.5697257169487352,
0.5736984037215982,
0.5746366349052207,
0.5741141229886908,
0.572203190945475,
0.5706887104901442,
0.56879245373641,
0.5659895981284693,
0.5626834176219484,
0.5590781004986939,
0.5551188059521655,
0.5513952383486247,
0.5475403519736792,
0.5425281303826206,
0.5374667672310864,
0.5319340783103661,
0.5268738505010397,
0.5251994896794775
],
"x": {},
"line": {
"dash": "dot",
"color": "#0F0F0F"
},
"mode": "lines",
"type": "scatter",
"visible": true,
"uuid": "approximaton"
},
{
"y": [
0.3141432631638309,
0.3719872095413391,
0.42586318521439226,
0.4423818592401496,
0.4423159229866746,
0.439365227134081,
0.43061228371502536,
0.41877459050507687,
0.40636852774324705,
0.388050363862841,
0.3709319116731143,
0.3746002855760202,
0.3870544366000726,
0.3998565605426508,
0.41517300874380375,
0.4326428076284772,
0.4498943519441134,
0.4698970918434145,
0.4883874904367583,
0.4922694600427458,
0.48933366954699803,
0.48760890885731717,
0.4837889283357329,
0.4732100083781599,
0.4619201532358215,
0.4471012658249636,
0.434175839361317,
0.4424272120479691,
0.4603362491216931,
0.47465058812424465,
0.4911985808320198,
0.5191549798194269,
0.5471499882360608,
0.5807680363687956,
0.6095669543464222,
0.5979216800093631,
0.5678502858380244,
0.5396225198735349,
0.5061037763131248,
0.45979582726747537,
0.41352726435914017,
0.35838958745332494,
0.3093490341280431,
0.31318908645906823,
0.34068053738391135,
0.3702572765062393,
0.4075162242737749,
0.45248020684305407,
0.4975564354173163,
0.5520240279393949,
0.6023395319797207,
0.6099176134224962,
0.5989509499247473,
0.584118624448179,
0.5630122006250751,
0.5413750903542419,
0.5198806767286471,
0.4924711677260836,
0.4664106675771025,
0.45950297539486895,
0.46056090298583646,
0.4649433677179729,
0.4722789576663633,
0.4760669871453178,
0.47979524074415203,
0.4850610590397878,
0.4913002674047412,
0.49999573275303383,
0.5101718495071718,
0.5193608083961071,
0.5289041540552719,
0.5418585811034523,
0.5548681736325679,
0.5692250415799794,
0.5821367109321643,
0.5843840299347898,
0.5817754122581761,
0.5782682645497901,
0.5730131109106984,
0.5666407210777866,
0.5600852642120129,
0.5516904498875925,
0.5437580544659626,
0.5424772237308583,
0.5439920846230681,
0.5462633146586799,
0.5494923587648454,
0.5522455927030572,
0.5549529890945473,
0.5584667972241754,
0.5619971180833686,
0.5639999133154793,
0.5654909538467829,
0.5665058792112981,
0.5673625579305838,
0.5694375571814482,
0.571726350872042,
0.5740330136688483,
0.5761792890270692,
0.576646627772628
],
"x": {},
"mode": "lines",
"type": "scatter",
"line": {
"color": "#D8541B"
},
"name": "s21"
}
]
const layout = {
xaxis: {
title: 'Samples',
zeroline: false,
showline: true,
mirror: true
},
yaxis: {
title: 'Amplitude',
zeroline: false,
showline: true,
mirror: true
},
showlegend: true,
legend: {
x: 0.1,
xanchor: 'center',
y: 1,
yanchor: 'top',
traceorder: 'normal',
bgcolor: '#FFFFFF',
bordercolor: '#000',
borderwidth: 1,
},
margin: {
l: 40,
r: 40,
b: 40,
t: 10,
},
modebar: {
remove: ["resetScale2d","toImage"]
},
};
</script>
<style lang="less" scoped>
</style>
警告
项目中的菜单svg图标，请根据自己的项目替换，如果需要同款，已经上传至Github的wave分支。