diff --git a/src/assets/images/chart/informations/inputs_input.png b/src/assets/images/chart/informations/inputs_input.png new file mode 100644 index 00000000..00bc41fe Binary files /dev/null and b/src/assets/images/chart/informations/inputs_input.png differ diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts b/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts new file mode 100644 index 00000000..b62c4bab --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts @@ -0,0 +1,76 @@ +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' +import { BarLineConfig } from './index' +import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' +import dataJson from './data.json' + + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] +// 柱状折线组合图 分别定义series +// 写死name可以定义legend显示的名称 +export const barSeriesItem = { + type: 'bar', + barWidth: 15, + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: null, + borderRadius: 2 + } +} + +export const lineSeriesItem = { + type: 'line', + symbol: "circle", + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, + symbolSize: 5, //设定实心点的大小 + itemStyle: { + color: '#FFE47A', + borderWidth: 1 + }, + lineStyle: { + type: 'solid', + width: 3, + color: null + } +} + +export const option = { + tooltip: { + show: true, + trigger: 'axis', + axisPointer: { + show: true, + type: 'shadow' + } + }, + legend: { + data:null + }, + xAxis: { + show: true, + type: 'category' + }, + yAxis: { + show: true, + type: 'value' + }, + dataset: { ...dataJson }, + series: [barSeriesItem, lineSeriesItem] +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = BarLineConfig.key + public chartConfig = cloneDeep(BarLineConfig) + // 图表配置项 + public option = echartOptionProfixHandle(option, includes) +} \ No newline at end of file diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue b/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue new file mode 100644 index 00000000..f6cd2b28 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue @@ -0,0 +1,89 @@ + + + \ No newline at end of file diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/data.json b/src/packages/components/Charts/COMBINATIONS/BarLine/data.json new file mode 100644 index 00000000..0bd2f36e --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/data.json @@ -0,0 +1,40 @@ +{ + "dimensions": ["product", "data1", "data2"], + "source": [ + { + "product": "1月", + "data1": 104, + "data2": 30 + }, + { + "product": "2月", + "data1": 56, + "data2": 56 + }, + { + "product": "3月", + "data1": 136, + "data2": 36 + }, + { + "product": "4月", + "data1": 86, + "data2": 6 + }, + { + "product": "5月", + "data1": 98, + "data2": 10 + }, + { + "product": "6月", + "data1": 86, + "data2": 70 + }, + { + "product": "7月", + "data1": 77, + "data2": 57 + } + ] +} \ No newline at end of file diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts b/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts new file mode 100644 index 00000000..73e37e66 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts @@ -0,0 +1,16 @@ +// 公共类型声明 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// 当前[信息模块]分类声明 +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const BarLineConfig: ConfigType = { + key: 'BarLine', + chartKey: 'VBarLine', + conKey: 'VCBarLine', + title: '柱状加折线图', + category: ChatCategoryEnum.COMBINATION, + categoryName: ChatCategoryEnumName.COMBINATION, + package: PackagesCategoryEnum.CHARTS, + chartFrame: ChartFrameEnum.ECHARTS, + image: 'bar_x.png' +} \ No newline at end of file diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue b/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue new file mode 100644 index 00000000..87a9d848 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue @@ -0,0 +1,68 @@ + + + \ No newline at end of file diff --git a/src/packages/components/Charts/COMBINATIONS/index.ts b/src/packages/components/Charts/COMBINATIONS/index.ts new file mode 100644 index 00000000..3a131a97 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/index.ts @@ -0,0 +1,3 @@ +import { BarLineConfig } from './BarLine/index' + +export default [BarLineConfig] \ No newline at end of file diff --git a/src/packages/components/Charts/index.d.ts b/src/packages/components/Charts/index.d.ts index c033c296..20da3d56 100644 --- a/src/packages/components/Charts/index.d.ts +++ b/src/packages/components/Charts/index.d.ts @@ -5,6 +5,7 @@ export enum ChatCategoryEnum { LINE = 'Lines', SCATTER = 'Scatters', MAP = 'Maps', + COMBINATION = 'COMBINATIONS', MORE = 'Mores' } @@ -14,5 +15,6 @@ export enum ChatCategoryEnumName { LINE = '折线图', SCATTER = '散点图', MAP = '地图', + COMBINATION = '组合图', MORE = '更多' } diff --git a/src/packages/components/Charts/index.ts b/src/packages/components/Charts/index.ts index 20ffcc66..c1d090e3 100644 --- a/src/packages/components/Charts/index.ts +++ b/src/packages/components/Charts/index.ts @@ -3,6 +3,7 @@ import Pies from './Pies' import Lines from './Lines' import Scatters from './Scatters' import Mores from './Mores' +import COMBINATIONS from './COMBINATIONS' import Maps from './Maps' -export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores] +export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps,...COMBINATIONS, ...Mores] diff --git a/src/packages/components/Informations/Inputs/InputsInput/config.ts b/src/packages/components/Informations/Inputs/InputsInput/config.ts new file mode 100644 index 00000000..f99c35d7 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/config.ts @@ -0,0 +1,24 @@ +import cloneDeep from 'lodash/cloneDeep' +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { chartInitConfig } from '@/settings/designSetting' +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum' +import { interactActions, ComponentInteractEventEnum } from './interact' +import {InputsInputConfig} from "./index"; + +export const option = { + // 时间组件展示类型,必须和 interactActions 中定义的数据一致 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA, + // 默认值 + inputValue: "0", + // 暴露配置内容给用户 + dataset: "" +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = InputsInputConfig.key + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } + public chartConfig = cloneDeep(InputsInputConfig) + public interactActions = interactActions + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/config.vue b/src/packages/components/Informations/Inputs/InputsInput/config.vue new file mode 100644 index 00000000..1c7900ee --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/config.vue @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/index.ts b/src/packages/components/Informations/Inputs/InputsInput/index.ts new file mode 100644 index 00000000..ac3ab47e --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const InputsInputConfig: ConfigType = { + key: 'InputsInput', + chartKey: 'VInputsInput', + conKey: 'VCInputsInput', + title: '输入框', + category: ChatCategoryEnum.INPUTS, + categoryName: ChatCategoryEnumName.INPUTS, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.STATIC, + image: 'inputs_input.png' +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/index.vue b/src/packages/components/Informations/Inputs/InputsInput/index.vue new file mode 100644 index 00000000..ec2dbd76 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/index.vue @@ -0,0 +1,63 @@ + + + + + + + + diff --git a/src/packages/components/Informations/Inputs/InputsInput/interact.ts b/src/packages/components/Informations/Inputs/InputsInput/interact.ts new file mode 100644 index 00000000..d6c070f4 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/interact.ts @@ -0,0 +1,27 @@ +import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum' + +// 时间组件类型 +export enum ComponentInteractEventEnum { + DATA = 'data' +} + +// 联动参数 +export enum ComponentInteractParamsEnum { + DATA = 'data' +} + +// 定义组件触发回调事件 +export const interactActions: InteractActionsType[] = [ + { + interactType: InteractEventOn.CHANGE, + interactName: '选择完成', + componentEmitEvents: { + [ComponentInteractEventEnum.DATA]: [ + { + value: ComponentInteractParamsEnum.DATA, + label: '选择项' + } + ] + } + } +] diff --git a/src/packages/components/Informations/Inputs/InputsPagination/config.ts b/src/packages/components/Informations/Inputs/InputsPagination/config.ts new file mode 100644 index 00000000..a520ae39 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsPagination/config.ts @@ -0,0 +1,26 @@ +import cloneDeep from 'lodash/cloneDeep' +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { chartInitConfig } from '@/settings/designSetting' +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum' +import { interactActions, ComponentInteractEventEnum } from './interact' +import {InputsPaginationConfig} from "./index"; + +export const option = { + // 时间组件展示类型,必须和 interactActions 中定义的数据一致 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA, + // 默认值 + pageValue:1, + sizeValue:[4,6,8,10], + pageSize:4, + // 暴露配置内容给用户 + dataset: 10 +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = InputsPaginationConfig.key + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } + public chartConfig = cloneDeep(InputsPaginationConfig) + public interactActions = interactActions + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsPagination/config.vue b/src/packages/components/Informations/Inputs/InputsPagination/config.vue new file mode 100644 index 00000000..411b15e9 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsPagination/config.vue @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsPagination/index.ts b/src/packages/components/Informations/Inputs/InputsPagination/index.ts new file mode 100644 index 00000000..acd98aa8 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsPagination/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const InputsPaginationConfig: ConfigType = { + key: 'InputsPagination', + chartKey: 'VInputsPagination', + conKey: 'VCInputsPagination', + title: '分页', + category: ChatCategoryEnum.INPUTS, + categoryName: ChatCategoryEnumName.INPUTS, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.COMMON, + image: 'inputs_select.png' +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsPagination/index.vue b/src/packages/components/Informations/Inputs/InputsPagination/index.vue new file mode 100644 index 00000000..867642a5 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsPagination/index.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsPagination/interact.ts b/src/packages/components/Informations/Inputs/InputsPagination/interact.ts new file mode 100644 index 00000000..ebe5dee9 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsPagination/interact.ts @@ -0,0 +1,32 @@ +import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum' + +// 时间组件类型 +export enum ComponentInteractEventEnum { + DATA = 'data' +} + +// 联动参数 +export enum ComponentInteractParamsEnum { + DATA = 'data', + DATA2 = 'data2' +} + +// 定义组件触发回调事件 +export const interactActions: InteractActionsType[] = [ + { + interactType: InteractEventOn.CHANGE, + interactName: '选择完成', + componentEmitEvents: { + [ComponentInteractEventEnum.DATA]: [ + { + value: ComponentInteractParamsEnum.DATA, + label: '页数' + }, + { + value: ComponentInteractParamsEnum.DATA2, + label: '选择项2' + } + ] + } + } +] \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/index.ts b/src/packages/components/Informations/Inputs/index.ts index 1f4f22a7..ae401447 100644 --- a/src/packages/components/Informations/Inputs/index.ts +++ b/src/packages/components/Informations/Inputs/index.ts @@ -1,5 +1,7 @@ import { InputsDateConfig } from './InputsDate/index' import { InputsSelectConfig } from './InputsSelect/index' import { InputsTabConfig } from './InputsTab/index' +import {InputsInputConfig} from './InputsInput/index' +import { InputsPaginationConfig} from "./InputsPagination/index"; -export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig] +export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsInputConfig,InputsPaginationConfig]