一个Vue3搭建的低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求

<template> <collapse-item name="渲染器"> <setting-item-box :alone="true"> <template #name> <n-text>全局</n-text> <n-tooltip trigger="hover"> <template #trigger> <n-icon size="21" :depth="3"> <help-outline-icon></help-outline-icon> </n-icon> </template> <n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text> </n-tooltip> </template> <EchartsRendererSetting v-model="themeSetting.renderer" /> </setting-item-box> <setting-item-box :alone="true"> <template #name> <n-text>当前</n-text> <n-tooltip trigger="hover"> <template #trigger> <n-icon size="21" :depth="3"> <help-outline-icon></help-outline-icon> </n-icon> </template> <n-text>仅当前组件采用指定渲染器渲染</n-text> </n-tooltip> </template> <EchartsRendererSetting v-model="optionData.renderer" includeInherit /> </setting-item-box> </collapse-item> <collapse-item v-if="title" name="标题"> <template #header> <n-switch v-model:value="title.show" size="small"></n-switch> </template> <setting-item-box name="标题"> <setting-item name="颜色"> <n-color-picker v-model:value="title.textStyle.color" size="small"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="title.textStyle.fontSize" :min="1" size="small"></n-input-number> </setting-item> </setting-item-box> <setting-item-box name="副标题"> <setting-item name="颜色"> <n-color-picker size="small" v-model:value="title.subtextStyle.color"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="title.subtextStyle.fontSize" :min="1" size="small"></n-input-number> </setting-item> </setting-item-box> </collapse-item> <collapse-item v-if="grid" name="容器"> <setting-item-box name="距离"> <setting-item name="左侧距离"> <n-input v-model:value="grid.left" size="small"></n-input> </setting-item> <setting-item name="右侧距离"> <n-input v-model:value="grid.right" size="small"></n-input> </setting-item> <setting-item name="上侧距离"> <n-input v-model:value="grid.top" size="small"></n-input> </setting-item> <setting-item name="下侧距离"> <n-input v-model:value="grid.bottom" size="small"></n-input> </setting-item> </setting-item-box> </collapse-item> <collapse-item v-if="xAxis" name="X轴"> <template #header> <n-switch v-model:value="xAxis.show" size="small"></n-switch> </template> <setting-item-box name="单位"> <setting-item name="名称"> <n-input v-model:value="xAxis.name" size="small"></n-input> </setting-item> <setting-item name="颜色"> <n-color-picker size="small" v-model:value="xAxis.nameTextStyle.color"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="xAxis.nameTextStyle.fontSize" :min="12" size="small"></n-input-number> </setting-item> <setting-item name="偏移量"> <n-input-number v-model:value="xAxis.nameGap" :min="5" size="small"></n-input-number> </setting-item> </setting-item-box> <setting-item-box name="标签"> <setting-item name="展示"> <n-space> <n-switch v-model:value="xAxis.axisLabel.show" size="small"></n-switch> </n-space> </setting-item> <setting-item name="颜色"> <n-color-picker size="small" v-model:value="xAxis.axisLabel.color"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number> </setting-item> <setting-item name="偏移量"> <n-input-number v-model:value="xAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number> </setting-item> </setting-item-box> <setting-item-box name="轴线"> <setting-item name="展示"> <n-space> <n-switch v-model:value="xAxis.axisLine.show" size="small"></n-switch> </n-space> </setting-item> <setting-item name="颜色"> <n-color-picker v-model:value="xAxis.axisLine.lineStyle.color" size="small"></n-color-picker> </setting-item> <setting-item name="粗细"> <n-input-number v-model:value="xAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number> </setting-item> <setting-item name="位置"> <n-select v-model:value="xAxis.position" size="small" :options="axisConfig.xposition"></n-select> </setting-item> <setting-item name="对齐零"> <n-space> <n-switch v-model:value="xAxis.axisLine.onZero" size="small"></n-switch> </n-space> </setting-item> <setting-item name="反向"> <n-space> <n-switch v-model:value="xAxis.inverse" size="small"></n-switch> </n-space> </setting-item> </setting-item-box> <setting-item-box name="刻度"> <setting-item name="展示"> <n-space> <n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch> </n-space> </setting-item> <setting-item name="长度"> <n-input-number v-model:value="xAxis.axisTick.length" :min="1" size="small"></n-input-number> </setting-item> </setting-item-box> <setting-item-box name="分割线"> <setting-item name="展示"> <n-space> <n-switch v-model:value="xAxis.splitLine.show" size="small"></n-switch> </n-space> </setting-item> <setting-item name="颜色"> <n-color-picker v-model:value="xAxis.splitLine.lineStyle.color" size="small"></n-color-picker> </setting-item> <setting-item name="粗细"> <n-input-number v-model:value="xAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number> </setting-item> <setting-item name="类型"> <n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConfig.splitLint.lineStyle.type" ></n-select> </setting-item> </setting-item-box> </collapse-item> <collapse-item v-if="yAxis" name="Y轴"> <template #header> <n-switch v-model:value="yAxis.show" size="small"></n-switch> </template> <setting-item-box name="单位"> <setting-item name="名称"> <n-input v-model:value="yAxis.name" size="small"></n-input> </setting-item> <setting-item name="颜色"> <n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number> </setting-item> <setting-item name="偏移量"> <n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number> </setting-item> </setting-item-box> <setting-item-box name="标签"> <setting-item name="展示"> <n-space> <n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch> </n-space> </setting-item> <setting-item name="颜色"> <n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker> </setting-item> <setting-item name="大小"> <n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number> </setting-item> <setting-item name="偏移量"> <n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number> </set