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 { custom_vue_group } from './custom-vue';
|
||||
import { echarts_group } from './echarts';
|
||||
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