jiawei/my-v0
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 接入echarts

Browse Source
This commit is contained in:
Marcus
2026-08-16 00:12:40 +08:00
parent f60946a24d
commit 191069cf31
12 changed files with 733 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -16,6 +16,7 @@
},
"dependencies": {
"@tailwindcss/postcss": "^4.3.3",
"echarts": "^6.1.0",
"element-plus": "^2.14.4",
"pinia": "^4.0.2",
"postcss": "^8.5.26",
pnpm-lock.yaml
Generated
+23
View File
@@ -11,6 +11,9 @@ importers:
'@tailwindcss/postcss':
specifier: ^4.3.3
version: 4.3.3
echarts:
specifier: ^6.1.0
version: 6.1.0
element-plus:
specifier: ^2.14.4
version: 2.14.4(vue@3.5.41(typescript@6.0.3))
@@ -1076,6 +1079,9 @@ packages:
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
engines: {node: '>=8'}
echarts@6.1.0:
resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
electron-to-chromium@1.5.406:
resolution: {integrity: sha512-hWH5ORBi3d0IipnMh7BN5GDTaAmrSSSWmznwt2zltdiRNEWoEQyTwF0FFSBxzHO7hLSRT6loQu3IQGV0wg/Tvg==}
@@ -1823,6 +1829,9 @@ packages:
peerDependencies:
typescript: '>=4.8.4'
tslib@2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
type-check@0.4.0:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'}
@@ -2101,6 +2110,9 @@ packages:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
zrender@6.1.0:
resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
snapshots:
'@alloc/quick-lru@5.2.0': {}
@@ -3051,6 +3063,11 @@ snapshots:
detect-libc@2.1.2: {}
echarts@6.1.0:
dependencies:
tslib: 2.3.0
zrender: 6.1.0
electron-to-chromium@1.5.406: {}
element-plus@2.14.4(vue@3.5.41(typescript@6.0.3)):
@@ -3753,6 +3770,8 @@ snapshots:
dependencies:
typescript: 6.0.3
tslib@2.3.0: {}
type-check@0.4.0:
dependencies:
prelude-ls: 1.2.1
@@ -4044,3 +4063,7 @@ snapshots:
yaml@2.9.0: {}
yocto-queue@0.1.0: {}
zrender@6.1.0:
dependencies:
tslib: 2.3.0
src/editor/panels/material/components/MaterialItem.vue
+3 -1
View File
@@ -18,7 +18,9 @@ function onStart(event: DragEvent) {
@dragstart="onStart"
>
<div>{{ props.material.name }}</div>
<div class="border border-white/20 h-full"><Icon :icon="props.material.icon" /></div>
<div class="flex justify-center items-center h-full border border-white/20">
<Icon :icon="props.material.icon" width="64" />
</div>
</div>
</template>
src/editor/panels/property/components/FormCreate.vue
+4 -1
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { getValue } from '@/utils'
import { ElInput, ElInputNumber, ElColorPicker } from 'element-plus'
import { ElInput, ElInputNumber, ElColorPicker, ElCheckbox, ElSelect } from 'element-plus'
import { useUndoRedo } from '@/composables/useUndoRedo'
defineProps(['setters', 'formData'])
@@ -11,6 +11,8 @@ const componentMap: Record<string, any> = {
input: ElInput,
number: (props: Record<string, any>) => h(ElInputNumber, { precision: 0, ...props }),
color: ElColorPicker,
checkbox: ElCheckbox,
select: ElSelect,
}
</script>
@@ -21,6 +23,7 @@ const componentMap: Record<string, any> = {
<component
:is="componentMap[setter.type]"
:model-value="getValue(formData, setter.key)"
v-bind="setter.props"
@update:model-value="(value: any) => applyChange(formData, setter.key, value)"
@focus="startBatch()"
@blur="commitBatch()"
src/editor/panels/property/components/NodeProperty.vue
+9 -4
View File
@@ -11,7 +11,12 @@ defineOptions({
const editorStore = useEditorStore()
const { selectedNode } = storeToRefs(editorStore)
const setters = getMaterialSetters(selectedNode.value?.type || '') ?? []
const setters = computed(() => {
return getMaterialSetters(selectedNode.value?.type || '') ?? []
})
// 属性分组默认全部展开
const activeNames = ref(['layout', 'component'])
// 布局属性
const layoutSetters = [
@@ -40,11 +45,11 @@ const layoutSetters = [
<template>
<div class="px-2">
<el-collapse>
<el-collapse-item title="布局属性">
<el-collapse v-model="activeNames">
<el-collapse-item title="布局属性" name="layout">
<FormCreate :setters="layoutSetters" :form-data="selectedNode" />
</el-collapse-item>
<el-collapse-item title="组件属性">
<el-collapse-item title="组件属性" name="component">
<FormCreate :setters="setters" :form-data="selectedNode" />
</el-collapse-item>
</el-collapse>
src/materials/charts/area.ts
+179
View File
@@ -0,0 +1,179 @@
import type { MaterialDefinition } from '@/schema/materials'
export const areaMaterial: MaterialDefinition = {
name: '面积图',
group: 'charts',
icon: 'solar:graph-new-bold',
setters: [
{
type: 'input',
label: '标题',
key: 'props.option.title.text',
},
{
type: 'color',
label: '标题色',
key: 'props.option.title.textStyle.color',
},
{
type: 'checkbox',
label: '图例显示',
key: 'props.option.legend.show',
},
{
type: 'select',
label: '对齐',
key: 'props.option.title.left',
props: {
options: [
{ label: '左对齐', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '右对齐', value: 'right' },
],
},
},
{
type: 'color',
label: '线颜色',
key: 'props.option.series.0.lineStyle.color',
},
{
type: 'color',
label: '面积色',
key: 'props.option.series.0.areaStyle.color',
},
{
type: 'input',
label: 'X字段',
key: 'props.option.series.0.encode.x',
},
{
type: 'input',
label: 'Y字段',
key: 'props.option.series.0.encode.y',
},
{
type: 'number',
label: '上边距',
key: 'props.option.grid.top',
span: 12,
},
{
type: 'number',
label: '右边距',
key: 'props.option.grid.right',
span: 12,
},
{
type: 'number',
label: '下边距',
key: 'props.option.grid.bottom',
span: 12,
},
{
type: 'number',
label: '左边距',
key: 'props.option.grid.left',
span: 12,
},
],
schema: {
type: 'area-chart',
name: '面积图',
layout: {
x: 0,
y: 0,
width: 400,
height: 260,
},
props: {
option: {
legend: {
top: 38,
left: 'center',
itemWidth: 12,
itemHeight: 8,
show: true,
textStyle: {
color: '#cbd5e1',
},
},
title: {
text: '成交额趋势',
top: 8,
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
},
dataset: {
source: [
{ date: '周一', revenue: 120 },
{ date: '周二', revenue: 200 },
{ date: '周三', revenue: 150 },
{ date: '周四', revenue: 260 },
{ date: '周五', revenue: 330 },
{ date: '周六', revenue: 420 },
{ date: '周日', revenue: 510 },
],
},
grid: {
top: 86,
right: 24,
bottom: 32,
left: 48,
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#64748b',
},
},
axisLabel: {
color: '#cbd5e1',
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#cbd5e1',
},
splitLine: {
lineStyle: {
color: 'rgba(148, 163, 184, 0.18)',
},
},
},
series: [
{
name: '成交额',
type: 'line',
smooth: true,
symbolSize: 8,
encode: {
x: 'date',
y: 'revenue',
},
lineStyle: {
width: 3,
color: '#22d3ee',
},
itemStyle: {
color: '#22d3ee',
},
areaStyle: {
color: 'rgba(34, 211, 238, 0.25)',
},
},
],
},
},
},
}
src/materials/charts/bar.ts
+163
View File
@@ -0,0 +1,163 @@
import type { MaterialDefinition } from '@/schema/materials'
export const barMaterial: MaterialDefinition = {
name: '柱状图',
group: 'charts',
icon: 'solar:chart-2-bold',
setters: [
{
type: 'input',
label: '标题',
key: 'props.option.title.text',
},
{
type: 'color',
label: '标题色',
key: 'props.option.title.textStyle.color',
},
{
type: 'checkbox',
label: '图例显示',
key: 'props.option.legend.show',
},
{
type: 'select',
label: '对齐',
key: 'props.option.title.left',
props: {
options: [
{ label: '左对齐', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '右对齐', value: 'right' },
],
},
},
{
type: 'color',
label: '柱颜色',
key: 'props.option.series.0.itemStyle.color',
},
{
type: 'input',
label: 'X字段',
key: 'props.option.series.0.encode.x',
},
{
type: 'input',
label: 'Y字段',
key: 'props.option.series.0.encode.y',
},
{
type: 'number',
label: '上边距',
key: 'props.option.grid.top',
span: 12,
},
{
type: 'number',
label: '右边距',
key: 'props.option.grid.right',
span: 12,
},
{
type: 'number',
label: '下边距',
key: 'props.option.grid.bottom',
span: 12,
},
{
type: 'number',
label: '左边距',
key: 'props.option.grid.left',
span: 12,
},
],
schema: {
type: 'bar-chart',
name: '柱状图',
layout: {
x: 0,
y: 0,
width: 400,
height: 260,
},
props: {
option: {
legend: {
top: 38,
left: 'center',
itemWidth: 12,
itemHeight: 8,
show: true,
textStyle: {
color: '#cbd5e1',
},
},
title: {
text: '销售额统计',
top: 8,
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 16,
},
},
tooltip: {},
dataset: {
source: [
{ month: '一月', sales: 120 },
{ month: '二月', sales: 200 },
{ month: '三月', sales: 150 },
{ month: '四月', sales: 80 },
{ month: '五月', sales: 170 },
{ month: '六月', sales: 240 },
],
},
grid: {
top: 86,
right: 24,
bottom: 32,
left: 48,
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#64748b',
},
},
axisLabel: {
color: '#cbd5e1',
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#cbd5e1',
},
splitLine: {
lineStyle: {
color: 'rgba(148, 163, 184, 0.18)',
},
},
},
series: [
{
name: '销售额',
type: 'bar',
barWidth: '45%',
encode: {
x: 'month',
y: 'sales',
},
itemStyle: {
color: '#22d3ee',
borderRadius: [4, 4, 0, 0],
},
},
],
},
},
},
}
src/materials/charts/component.vue
+50
View File
@@ -0,0 +1,50 @@
<!-- echarts组件 -->
<script setup lang="ts">
import type { MaterialSchema } from '@/schema/materials'
import { init, type EChartsType } from 'echarts'
defineOptions({
name: 'ChartMaterial',
})
const props = defineProps<{ schema: MaterialSchema }>()
const chartRef = useTemplateRef('chartRef')
let chart: EChartsType
watch(
() => props.schema.props.option,
(newOption) => {
if (chartRef.value) {
chart.setOption(newOption)
}
},
{ deep: true },
)
onMounted(() => {
if (chartRef.value) {
chart = init(chartRef.value)
chart.setOption(props.schema.props.option)
// 监听窗口大小变化，自动调整图表大小
const resizeObserver = new ResizeObserver(() => {
chart.resize()
})
resizeObserver.observe(chartRef.value)
onBeforeUnmount(() => {
resizeObserver.disconnect()
if (chart) {
chart.dispose()
}
})
}
})
</script>
<template>
<div class="w-full h-full" ref="chartRef"></div>
</template>
<style scoped></style>
src/materials/charts/index.ts
+13 -22
View File
@@ -1,26 +1,17 @@
import type { MaterialDefinition } from '@/schema/materials'
import ChartMaterial from './component.vue'
import { barMaterial } from './bar'
import { areaMaterial } from './area'
import { lineMaterial } from './line'
import { pieMaterial } from './pie'
export const chartsMaterial: MaterialDefinition = {
name: '柱状图',
icon: '',
group: 'charts',
setters: [],
schema: {
type: 'chart',
name: '柱状图',
layout: {
x: 0,
y: 0,
width: 400,
height: 300,
},
props: {
data: [],
},
},
}
export function install(register: (material: MaterialDefinition) => void) {
export function install(register: (material: MaterialDefinition, component: Component) => void) {
// 注册柱状图物料
register(chartsMaterial)
register(barMaterial, ChartMaterial)
// 注册面积图物料
register(areaMaterial, ChartMaterial)
// 注册折线图物料
register(lineMaterial, ChartMaterial)
// 注册饼图物料
register(pieMaterial, ChartMaterial)
}
src/materials/charts/line.ts
+171
View File
@@ -0,0 +1,171 @@
import type { MaterialDefinition } from '@/schema/materials'
export const lineMaterial: MaterialDefinition = {
name: '折线图',
group: 'charts',
icon: 'solar:graph-up-bold',
setters: [
{
type: 'input',
label: '标题',
key: 'props.option.title.text',
},
{
type: 'color',
label: '标题色',
key: 'props.option.title.textStyle.color',
},
{
type: 'checkbox',
label: '图例显示',
key: 'props.option.legend.show',
},
{
type: 'select',
label: '对齐',
key: 'props.option.title.left',
props: {
options: [
{ label: '左对齐', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '右对齐', value: 'right' },
],
},
},
{
type: 'color',
label: '线颜色',
key: 'props.option.series.0.lineStyle.color',
},
{
type: 'input',
label: 'X字段',
key: 'props.option.series.0.encode.x',
},
{
type: 'input',
label: 'Y字段',
key: 'props.option.series.0.encode.y',
},
{
type: 'number',
label: '上边距',
key: 'props.option.grid.top',
span: 12,
},
{
type: 'number',
label: '右边距',
key: 'props.option.grid.right',
span: 12,
},
{
type: 'number',
label: '下边距',
key: 'props.option.grid.bottom',
span: 12,
},
{
type: 'number',
label: '左边距',
key: 'props.option.grid.left',
span: 12,
},
],
schema: {
type: 'line-chart',
name: '折线图',
layout: {
x: 0,
y: 0,
width: 400,
height: 260,
},
props: {
option: {
legend: {
top: 38,
left: 'center',
itemWidth: 12,
itemHeight: 8,
show: true,
textStyle: {
color: '#cbd5e1',
},
},
title: {
text: '访问量趋势',
top: 8,
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
},
dataset: {
source: [
{ date: '周一', visits: 820 },
{ date: '周二', visits: 932 },
{ date: '周三', visits: 901 },
{ date: '周四', visits: 934 },
{ date: '周五', visits: 1290 },
{ date: '周六', visits: 1330 },
{ date: '周日', visits: 1320 },
],
},
grid: {
top: 86,
right: 24,
bottom: 32,
left: 48,
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#64748b',
},
},
axisLabel: {
color: '#cbd5e1',
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#cbd5e1',
},
splitLine: {
lineStyle: {
color: 'rgba(148, 163, 184, 0.18)',
},
},
},
series: [
{
name: '访问量',
type: 'line',
smooth: true,
symbolSize: 8,
encode: {
x: 'date',
y: 'visits',
},
lineStyle: {
width: 3,
color: '#38bdf8',
},
itemStyle: {
color: '#38bdf8',
},
},
],
},
},
},
}
src/materials/charts/pie.ts
+116
View File
@@ -0,0 +1,116 @@
import type { MaterialDefinition } from '@/schema/materials'
export const pieMaterial: MaterialDefinition = {
name: '饼图',
group: 'charts',
icon: 'solar:pie-chart-2-bold',
setters: [
{
type: 'input',
label: '标题',
key: 'props.option.title.text',
},
{
type: 'color',
label: '标题色',
key: 'props.option.title.textStyle.color',
},
{
type: 'checkbox',
label: '图例显示',
key: 'props.option.legend.show',
},
{
type: 'select',
label: '对齐',
key: 'props.option.title.left',
props: {
options: [
{ label: '左对齐', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '右对齐', value: 'right' },
],
},
},
{
type: 'color',
label: '主色',
key: 'props.option.color.0',
},
{
type: 'input',
label: '名称字段',
key: 'props.option.series.0.encode.itemName',
},
{
type: 'input',
label: '数值字段',
key: 'props.option.series.0.encode.value',
},
],
schema: {
type: 'pie-chart',
name: '饼图',
layout: {
x: 0,
y: 0,
width: 400,
height: 260,
},
props: {
option: {
color: ['#22d3ee', '#a78bfa', '#f59e0b', '#34d399', '#fb7185'],
legend: {
top: 38,
left: 'center',
itemWidth: 12,
itemHeight: 8,
show: true,
textStyle: {
color: '#cbd5e1',
},
},
title: {
text: '访问来源占比',
top: 8,
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 16,
},
},
tooltip: {
trigger: 'item',
},
dataset: {
source: [
{ channel: '搜索引擎', value: 1048 },
{ channel: '直接访问', value: 735 },
{ channel: '联盟广告', value: 484 },
{ channel: '视频广告', value: 300 },
],
},
series: [
{
name: '访问来源',
type: 'pie',
center: ['50%', '62%'],
avoidLabelOverlap: true,
label: {
color: '#e2e8f0',
},
labelLine: {
lineStyle: {
color: '#94a3b8',
},
},
encode: {
itemName: 'channel',
value: 'value',
},
},
],
},
},
},
}
src/materials/text/index.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import TextMaterial from './component.vue'
const textMaterial: MaterialDefinition = {
name: '文本',
icon: '',
icon: 'solar:text-bold',
group: 'info',
setters: [
{