diff --git a/src/packages/components/Charts/MyComponents/AlarmList/config.ts b/src/packages/components/Charts/MyComponents/AlarmList/config.ts index ad6eabe..8556cd3 100644 --- a/src/packages/components/Charts/MyComponents/AlarmList/config.ts +++ b/src/packages/components/Charts/MyComponents/AlarmList/config.ts @@ -43,7 +43,7 @@ export const option = { fontWeight: 'normal', fontStyle: 'normal', paddingX: 40, - paddingY: -17, + paddingY: -19, letterSpacing: 2, isShowButton: false } diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/config.ts b/src/packages/components/Charts/MyComponents/LineGraph01/config.ts new file mode 100644 index 0000000..aee4fda --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/config.ts @@ -0,0 +1,114 @@ +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' +import { LineGraph01Config } from './index' +import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' +import dataJson from './data.json' +export interface DataSourceItem { + dataname: string; + values: number[]; + datavalues: (string | number)[][]; +} +export interface DatasType { + title: string; + names: string[]; + tip: string; + dataIndex: number; + dataSource: DataSourceItem[]; +} + + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] +export const seriesItem = { + type: 'line', + smooth: true, + symbol: 'none', + + label: { + show: false, + position: 'top', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: null, + borderRadius: 0 + }, + lineStyle: { + type: 'solid', + width: 2, + color: '#50BB9A' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(80,187,154,0.6)' + }, { + offset: 1, + color: 'rgba(80,187,154,0.3)' + }] + } + } +} +export const option = { + dataset: { + source: dataJson.dataSource[0].datavalues + }, + grid: { + left: '15%', + right: '12%', + top: 9, + bottom: '25%' + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLine: { + show: false + }, + axisTick: { + show: false + + }, + axisLabel: { + color: '#B7BFC6' + } + }, + + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}s', + color: "#4C535B" + }, + + axisLine: { + show: false + }, + axisTick: { + show: false + } + }, + legend: { + show: false + }, + series: [seriesItem] +}; + + + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key: string = LineGraph01Config.key + public chartConfig = cloneDeep(LineGraph01Config) + public mockData = dataJson + // 图表配置项 + public option = echartOptionProfixHandle(option, includes) + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } +} + diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/config.vue b/src/packages/components/Charts/MyComponents/LineGraph01/config.vue new file mode 100644 index 0000000..415af52 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/config.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/data.json b/src/packages/components/Charts/MyComponents/LineGraph01/data.json new file mode 100644 index 0000000..5257831 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/data.json @@ -0,0 +1,96 @@ +{ + "title": "报警处置情况", + "names": [ + "报警总数", + "未处置报警数", + "平均处置时长" + ], + "tip": "报警处置效率", + "dataIndex": 0, + "dataSource": [ + { + "dataname": "当日", + "values": [ + 2623, + 2623, + 2623 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 99 + ], + [ + "14:00", + 19 + ], + [ + "15:00", + 75 + ], + [ + "16:00", + 26 + ], + [ + "17:00", + 35 + ], + [ + "18:00", + 20 + ], + [ + "19:00", + 10 + ] + ] + }, + { + "dataname": "昨日", + "values": [ + 2734, + 2829, + 2232 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 12 + ], + [ + "14:00", + 22 + ], + [ + "15:00", + 23 + ], + [ + "16:00", + 3 + ], + [ + "17:00", + 68 + ], + [ + "18:00", + 56 + ], + [ + "19:00", + 45 + ] + ] + } + ] +} \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png b/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png new file mode 100644 index 0000000..88dbbb9 Binary files /dev/null and b/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png differ diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/index.ts b/src/packages/components/Charts/MyComponents/LineGraph01/index.ts new file mode 100644 index 0000000..66e904b --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/index.ts @@ -0,0 +1,17 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +// 曲线图 +export const LineGraph01Config: ConfigType = { + key: 'LineGraph01', + chartKey: 'VLineGraph01', + conKey: 'VCLineGraph01', + title: '曲线图(带边框和标题)', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.ECHARTS, + image: "LineGraph01.png", +} + +// 默认导出配置对象 +export default LineGraph01Config \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/index.vue b/src/packages/components/Charts/MyComponents/LineGraph01/index.vue new file mode 100644 index 0000000..89b194e --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/index.vue @@ -0,0 +1,653 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/config.ts b/src/packages/components/Charts/MyComponents/LineGraph02/config.ts new file mode 100644 index 0000000..3f12d2e --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/config.ts @@ -0,0 +1,114 @@ +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' +import { LineGraph02Config } from './index' +import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' +import dataJson from './data.json' +export interface DataSourceItem { + dataname: string; + values: number[]; + datavalues: (string | number)[][]; +} +export interface DatasType { + title: string; + names: string[]; + tip: string; + dataIndex: number; + dataSource: DataSourceItem[]; +} + + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] +export const seriesItem = { + type: 'line', + smooth: true, + symbol: 'none', + + label: { + show: false, + position: 'top', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: null, + borderRadius: 0 + }, + lineStyle: { + type: 'solid', + width: 2, + color: '#50BB9A' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(80,187,154,0.6)' + }, { + offset: 1, + color: 'rgba(80,187,154,0.3)' + }] + } + } +} +export const option = { + dataset: { + source: dataJson.dataSource[0].datavalues + }, + grid: { + left: '15%', + right: '12%', + top: 9, + bottom: '25%' + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLine: { + show: false + }, + axisTick: { + show: false + + }, + axisLabel: { + color: '#B7BFC6' + } + }, + + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}s', + color: "#4C535B" + }, + + axisLine: { + show: false + }, + axisTick: { + show: false + } + }, + legend: { + show: false + }, + series: [seriesItem] +}; + + + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key: string = LineGraph02Config.key + public chartConfig = cloneDeep(LineGraph02Config) + public mockData = dataJson + // 图表配置项 + public option = echartOptionProfixHandle(option, includes) + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } +} + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/config.vue b/src/packages/components/Charts/MyComponents/LineGraph02/config.vue new file mode 100644 index 0000000..415af52 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/config.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/data.json b/src/packages/components/Charts/MyComponents/LineGraph02/data.json new file mode 100644 index 0000000..5257831 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/data.json @@ -0,0 +1,96 @@ +{ + "title": "报警处置情况", + "names": [ + "报警总数", + "未处置报警数", + "平均处置时长" + ], + "tip": "报警处置效率", + "dataIndex": 0, + "dataSource": [ + { + "dataname": "当日", + "values": [ + 2623, + 2623, + 2623 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 99 + ], + [ + "14:00", + 19 + ], + [ + "15:00", + 75 + ], + [ + "16:00", + 26 + ], + [ + "17:00", + 35 + ], + [ + "18:00", + 20 + ], + [ + "19:00", + 10 + ] + ] + }, + { + "dataname": "昨日", + "values": [ + 2734, + 2829, + 2232 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 12 + ], + [ + "14:00", + 22 + ], + [ + "15:00", + 23 + ], + [ + "16:00", + 3 + ], + [ + "17:00", + 68 + ], + [ + "18:00", + 56 + ], + [ + "19:00", + 45 + ] + ] + } + ] +} \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png b/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png new file mode 100644 index 0000000..88dbbb9 Binary files /dev/null and b/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png differ diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/index.ts b/src/packages/components/Charts/MyComponents/LineGraph02/index.ts new file mode 100644 index 0000000..2374226 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/index.ts @@ -0,0 +1,17 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +// 曲线图 +export const LineGraph02Config: ConfigType = { + key: 'LineGraph02', + chartKey: 'VLineGraph02', + conKey: 'VCLineGraph02', + title: '曲线图(无边框和标题)', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.ECHARTS, + image: "LineGraph02.png", +} + +// 默认导出配置对象 +export default LineGraph02Config \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/index.vue b/src/packages/components/Charts/MyComponents/LineGraph02/index.vue new file mode 100644 index 0000000..5862e72 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/index.vue @@ -0,0 +1,432 @@ + + + + + + +