diff --git a/dev.md b/dev.md new file mode 100644 index 00000000..6dc7d703 --- /dev/null +++ b/dev.md @@ -0,0 +1,62 @@ +## 二次开发 + +新增图表类型的组合图 + +1. 在`packages/components/Charts/`新建文件夹`COMBINATIONS` +2. 在文件夹新建`index.ts`,在文件夹下新建要添加的组合图表文件夹`BarLine` +3. 在`BarLine`下创建对应的文件`index.ts`、`index.vue`、`config.ts`、`config.vue` +index.ts内容如下 + ``` js + // 公共类型声明 + import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' + // 当前[信息模块]分类声明 + import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + + export const BarLineConfig: ConfigType = { + // 唯一key,注意!!!文件夹名称需要修改成与当前组件一致!!! + key: 'BarLine', + // 图表组件渲染 Components 格式: V + key + chartKey: 'VBarLine', + // 配置组件渲染 Components 格式: VC + key + conKey: 'VCBarLine', + // 名称 + title: '柱状加折线图', + // 子分类目录 + category: ChatCategoryEnum.COMBINATION, + // 子分类目录 + categoryName: ChatCategoryEnumName.COMBINATION, + // 包分类 + package: PackagesCategoryEnum.CHARTS, + // 组件框架类型 (注意!若此 Echarts 图表不支持 dataset 格式,则使用 ChartFrameEnum.COMMON) + chartFrame: ChartFrameEnum.ECHARTS, + // 图片 (注意!图片存放的路径必须在 src/assets/images/chart/包分类名称/*) + // 文件夹名称需要和包分类名称一致: PackagesCategoryEnum.CHARTS + image: 'bar_x.png' + } + + ``` +4. 在第二步创建的`index.ts`中进行组合图表的引入 + ``` js + import { BarLineConfig } from './BarLine/index' + + export default [BarLineConfig] + ``` +5. 在`packages\components\Charts\index.d.ts`新增 + ``` js + export enum ChatCategoryEnum { + ..., + COMBINATION = 'COMBINATIONS', + ..., + } + + export enum ChatCategoryEnumName { + ..., + COMBINATION='组合图' + ..., + } + ``` +6. 在`packages\components\Charts\index.ts`新增 + ``` js + import COMBINATIONS from './COMBINATIONS' + export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...COMBINATIONS, ...Mores] + ``` \ No newline at end of file diff --git a/src/api/http.ts b/src/api/http.ts index 0d433a73..672c01a0 100644 --- a/src/api/http.ts +++ b/src/api/http.ts @@ -8,7 +8,11 @@ import { RequestParamsObjType } from '@/enums/httpEnum' import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' +//新增取消下次请求开始时未完成的上一次请求 --start +import axios from 'axios'; +let cancel:any; +//新增取消下次请求开始时未完成的上一次请求 --end export const get = (url: string, params?: object) => { return axiosInstance({ url: url, @@ -18,13 +22,18 @@ export const get = (url: string, params?: object) => { } export const post = (url: string, data?: object, headersType?: string) => { + if (cancel !== undefined) { + cancel(); + } return axiosInstance({ url: url, method: RequestHttpEnum.POST, data: data, headers: { 'Content-Type': headersType || ContentTypeEnum.JSON - } + }, + //新增取消下次请求开始时未完成的上一次请求 + cancelToken: new axios.CancelToken(c => cancel = c) }) } @@ -163,6 +172,7 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req params = translateStr(params) // form 类型处理 let formData: FormData = new FormData() + formData.set('default', 'defaultData') // 类型处理 switch (requestParamsBodyType) { 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..8fb23946 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts @@ -0,0 +1,79 @@ +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 = { + name:'事件上报数', + type: 'bar', + barWidth: 15, + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: null, + borderRadius: 2 + } +} + +export const lineSeriesItem = { + name:'办结率', + type: 'line', + smooth: false, + 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) +} 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..c53aff77 --- /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..b16bc17f --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/data.json @@ -0,0 +1,41 @@ +{ + "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..40c2b3b3 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts @@ -0,0 +1,26 @@ +// 公共类型声明 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// 当前[信息模块]分类声明 +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const BarLineConfig: ConfigType = { + // 唯一key,注意!!!文件夹名称需要修改成与当前组件一致!!! + key: 'BarLine', + // 图表组件渲染 Components 格式: V + key + chartKey: 'VBarLine', + // 配置组件渲染 Components 格式: VC + key + conKey: 'VCBarLine', + // 名称 + title: '柱状加折线图', + // 子分类目录 + category: ChatCategoryEnum.COMBINATION, + // 子分类目录 + categoryName: ChatCategoryEnumName.COMBINATION, + // 包分类 + package: PackagesCategoryEnum.CHARTS, + // 组件框架类型 (注意!若此 Echarts 图表不支持 dataset 格式,则使用 ChartFrameEnum.COMMON) + chartFrame: ChartFrameEnum.ECHARTS, + // 图片 (注意!图片存放的路径必须在 src/assets/images/chart/包分类名称/*) + // 文件夹名称需要和包分类名称一致: PackagesCategoryEnum.CHARTS + image: 'bar_x.png' +} 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..5a3f29c5 --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue @@ -0,0 +1,78 @@ + + + \ 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..9406feca --- /dev/null +++ b/src/packages/components/Charts/COMBINATIONS/index.ts @@ -0,0 +1,3 @@ +import { BarLineConfig } from './BarLine/index' + +export default [BarLineConfig] 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..7586676c 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/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue index 521ac009..0561883c 100644 --- a/src/views/chart/ContentEdit/components/EditRule/index.vue +++ b/src/views/chart/ContentEdit/components/EditRule/index.vue @@ -27,7 +27,7 @@ -
+