feat: 新增了自定义组件和echarts使用demo
咬轮猫
3 years ago
parent
3e2265877d
commit
4ae7311674
@ -0,0 +1,7 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M746.666667 213.333333h-469.333334C243.2 213.333333 213.333333 243.2 213.333333 277.333333v469.333334c0 34.133333 29.866667 64 64 64h469.333334c34.133333 0 64-29.866667 64-64v-469.333334c0-34.133333-29.866667-64-64-64zM256 439.466667h140.8v140.8H256v-140.8z m21.333333 328.533333c-12.8 0-21.333333-8.533333-21.333333-21.333333v-119.466667h140.8V768H277.333333z m307.2 0h-140.8v-140.8h140.8V768z m0-183.466667h-140.8v-140.8h140.8v140.8z m183.466667 162.133334c0 12.8-8.533333 21.333333-21.333333 21.333333h-119.466667v-140.8H768v119.466667z m0-162.133334h-140.8v-140.8H768v140.8z m0-187.733333H256V277.333333c0-12.8 8.533333-21.333333 21.333333-21.333333h469.333334c12.8 0 21.333333 8.533333 21.333333 21.333333v119.466667z"
|
||||||
|
fill="#1296db"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 937 B |
@ -0,0 +1,10 @@
|
|||||||
|
<svg t="1673874136249" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M538.4 504.4l280.9 144.3c9.9 5.1 22.2 0.5 26-10 14.3-38.7 22.1-80.6 22.1-124.3 0-186.2-141.6-339.3-323-357.5-7.9-0.8-14.7 5.3-14.7 13.3v320.1c0 5.9 3.4 11.4 8.7 14.1z"
|
||||||
|
fill="#64B5F6"></path>
|
||||||
|
<path
|
||||||
|
d="M492.5 514.5V172.3c0-9.3-8-16.6-17.3-15.8C289 173.4 143.7 332.3 148.7 524.1c5 190.9 161.5 346.1 352.4 349.7 131.3 2.5 246.8-65.5 311.5-168.7 4.6-7.3 2-17-5.7-21L499.8 526.4c-4.5-2.3-7.3-6.9-7.3-11.9z"
|
||||||
|
fill="#1E88E5"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 665 B |
@ -0,0 +1,71 @@
|
|||||||
|
<!-- eslint-disable vue/html-indent -->
|
||||||
|
<template>
|
||||||
|
<el-table v-bind="table_props">
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in props.colConfig"
|
||||||
|
:key="item.prop"
|
||||||
|
v-bind="item"
|
||||||
|
></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, ref, watchEffect } from 'vue';
|
||||||
|
import { ElTable, ElTableColumn } from 'element-plus';
|
||||||
|
const props = defineProps({
|
||||||
|
colConfig: {
|
||||||
|
type: Array as PropType<ICol[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
maxHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
stripe: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
fit: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
operateDisplay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
selectionData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const table_props = ref({});
|
||||||
|
watchEffect(() => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const { colConfig, ...temp_props } = props;
|
||||||
|
table_props.value = temp_props;
|
||||||
|
});
|
||||||
|
interface ICol {
|
||||||
|
prop: string;
|
||||||
|
label: string;
|
||||||
|
width: string;
|
||||||
|
fixed: string | boolean;
|
||||||
|
sortable: boolean;
|
||||||
|
'show-overflow-tooltip': boolean;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart ref="pieChartRef" class="chart" :option="option" autoresize />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { SVGRenderer } from 'echarts/renderers';
|
||||||
|
import { PieChart } from 'echarts/charts';
|
||||||
|
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
||||||
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||||
|
import { ref, provide } from 'vue';
|
||||||
|
use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
|
||||||
|
const option = ref({
|
||||||
|
title: {
|
||||||
|
text: 'Traffic Sources',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Traffic Sources',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '55%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 335, name: 'Direct' },
|
||||||
|
{ value: 310, name: 'Email' },
|
||||||
|
{ value: 234, name: 'Ad Networks' },
|
||||||
|
{ value: 135, name: 'Video Ads' },
|
||||||
|
{ value: 1548, name: 'Search Engines' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const pieChartRef = ref();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
|
||||||
|
|
||||||
|
export const custom_vue_common_table: IConfigItem = {
|
||||||
|
name: 'custom-vue-common-table',
|
||||||
|
title: '通用表格',
|
||||||
|
tag: 'custom-vue-common-table',
|
||||||
|
type: EDoneJsonType.Vue,
|
||||||
|
config: {
|
||||||
|
can_zoom: true,
|
||||||
|
have_anchor: true,
|
||||||
|
actual_rect: true
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
'col-config': {
|
||||||
|
title: '列配置',
|
||||||
|
type: EConfigItemPropsType.JsonEdit,
|
||||||
|
val: [
|
||||||
|
{
|
||||||
|
prop: 'date',
|
||||||
|
label: '第一列',
|
||||||
|
width: '120px',
|
||||||
|
fixed: false,
|
||||||
|
sortable: false,
|
||||||
|
'show-overflow-tooltip': false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'name',
|
||||||
|
label: '第二列',
|
||||||
|
width: '120px',
|
||||||
|
fixed: false,
|
||||||
|
sortable: false,
|
||||||
|
'show-overflow-tooltip': false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'address',
|
||||||
|
label: '第三列测试',
|
||||||
|
width: '280px',
|
||||||
|
fixed: false,
|
||||||
|
sortable: false,
|
||||||
|
'show-overflow-tooltip': false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
title: '表格数据',
|
||||||
|
type: EConfigItemPropsType.JsonEdit,
|
||||||
|
val: [
|
||||||
|
{
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
title: '高度',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: null
|
||||||
|
},
|
||||||
|
'max-height': {
|
||||||
|
title: '最大高度',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: null
|
||||||
|
},
|
||||||
|
stripe: {
|
||||||
|
title: '斑马纹',
|
||||||
|
type: EConfigItemPropsType.Switch,
|
||||||
|
val: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
title: '纵向边框',
|
||||||
|
type: EConfigItemPropsType.Switch,
|
||||||
|
val: false
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
title: '尺寸',
|
||||||
|
type: EConfigItemPropsType.Select,
|
||||||
|
val: 'default',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '大',
|
||||||
|
value: 'large'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '默认',
|
||||||
|
value: 'default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '小',
|
||||||
|
value: 'small'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
fit: {
|
||||||
|
title: '列宽自撑开',
|
||||||
|
type: EConfigItemPropsType.Switch,
|
||||||
|
val: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { IConfigComponentGroup } from '@/config-center/types';
|
||||||
|
|
||||||
|
import { custom_vue_common_table } from './common-table';
|
||||||
|
|
||||||
|
export const custom_vue_group: IConfigComponentGroup = {
|
||||||
|
groupType: 'custom-vue',
|
||||||
|
title: '自定义',
|
||||||
|
list: [custom_vue_common_table]
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { IConfigComponentGroup } from '@/config-center/types';
|
||||||
|
import { pie_charts } from './pie-charts';
|
||||||
|
|
||||||
|
export const echarts_group: IConfigComponentGroup = {
|
||||||
|
groupType: 'echarts',
|
||||||
|
title: 'echarts图表',
|
||||||
|
list: [pie_charts]
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { EDoneJsonType, IConfigItem } from '../../../types';
|
||||||
|
|
||||||
|
export const pie_charts: IConfigItem = {
|
||||||
|
name: 'pie-charts',
|
||||||
|
tag: 'pie-charts',
|
||||||
|
title: '饼图',
|
||||||
|
type: EDoneJsonType.Vue,
|
||||||
|
config: {
|
||||||
|
can_zoom: true,
|
||||||
|
have_anchor: true,
|
||||||
|
actual_rect: true
|
||||||
|
},
|
||||||
|
props: {}
|
||||||
|
};
|
||||||
@ -1,4 +1,10 @@
|
|||||||
import { IConfigComponentGroup } from '../types';
|
import { IConfigComponentGroup } from '../types';
|
||||||
|
import { custom_vue_group } from './custom-vue';
|
||||||
|
import { echarts_group } from './echarts';
|
||||||
import { element_ui_group } from './element-ui';
|
import { element_ui_group } from './element-ui';
|
||||||
|
|
||||||
export const vue_config_center: IConfigComponentGroup[] = Object.seal([element_ui_group]);
|
export const vue_config_center: IConfigComponentGroup[] = Object.seal([
|
||||||
|
element_ui_group,
|
||||||
|
custom_vue_group,
|
||||||
|
echarts_group
|
||||||
|
]);
|
||||||
|
|||||||
Loading…
Reference in New Issue