From 0ca8f71ad775ecebc0c34fc1d592a346786ef178 Mon Sep 17 00:00:00 2001 From: wangbo <781278657@qq.com> Date: Wed, 9 Aug 2023 17:56:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20=E5=AE=8C=E6=88=90=20?= =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=20=E5=88=9D=E6=AD=A5=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/src/config/menus/line.ts | 23 ++++++- examples/src/router/index.ts | 4 +- examples/src/router/line.ts | 22 +++++++ .../views/basic/line/BasicLineAreaDemo.vue | 21 +++++++ .../basic/line/BasicLineAreaStackDemo.vue | 21 +++++++ .../src/views/basic/line/BasicLineDemo.vue | 21 +++++++ .../views/basic/line/BasicLineStackDemo.vue | 21 +++++++ .../basic-chart/chart-option/index.ts | 1 + .../line/basic-line-area-stack.ts | 35 +++++++++++ .../chart-option/line/basic-line-area.ts | 32 ++++++++++ .../chart-option/line/basic-line-stack.ts | 32 ++++++++++ .../chart-option/line/basic-line.ts | 29 +++++++++ .../basic-chart/chart-option/line/basic.ts | 63 +++++++++++++++++++ .../basic-chart/chart-option/line/index.ts | 4 ++ 14 files changed, 327 insertions(+), 2 deletions(-) create mode 100644 examples/src/router/line.ts create mode 100644 examples/src/views/basic/line/BasicLineAreaDemo.vue create mode 100644 examples/src/views/basic/line/BasicLineAreaStackDemo.vue create mode 100644 examples/src/views/basic/line/BasicLineDemo.vue create mode 100644 examples/src/views/basic/line/BasicLineStackDemo.vue create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area-stack.ts create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area.ts create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/basic-line-stack.ts create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/basic-line.ts create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/basic.ts create mode 100644 packages/bi-chart/components/basic-chart/chart-option/line/index.ts diff --git a/examples/src/config/menus/line.ts b/examples/src/config/menus/line.ts index 9859f07..c8e4569 100644 --- a/examples/src/config/menus/line.ts +++ b/examples/src/config/menus/line.ts @@ -1 +1,22 @@ -export default [] +export default [ + { + title: '折线图', + routeName: 'BasicLineDemo', + showItem: true + }, + { + title: '折线图-堆叠', + routeName: 'BasicLineStackDemo', + showItem: true + }, + { + title: '面积图', + routeName: 'BasicLineAreaDemo', + showItem: true + }, + { + title: '面积图-堆叠', + routeName: 'BasicLineAreaStackDemo', + showItem: true + } +] diff --git a/examples/src/router/index.ts b/examples/src/router/index.ts index 57aedc4..50bffe7 100644 --- a/examples/src/router/index.ts +++ b/examples/src/router/index.ts @@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' import bar from '@/router/bar.ts' import pie from '@/router/pie.ts' +import Line from '@/router/line.ts' export const routes: Array = [ { @@ -21,7 +22,8 @@ export const routes: Array = [ import('@/views/business/ThingsOutboundNumberRankingDemo.vue') }, ...bar, - ...pie + ...pie, + ...Line ] export default createRouter({ diff --git a/examples/src/router/line.ts b/examples/src/router/line.ts new file mode 100644 index 0000000..313c793 --- /dev/null +++ b/examples/src/router/line.ts @@ -0,0 +1,22 @@ +export default [ + { + path: '/basic-line-demo', + name: 'BasicLineDemo', + component: () => import('@/views/basic/line/BasicLineDemo.vue') + }, + { + path: '/basic-line-area-demo', + name: 'BasicLineAreaDemo', + component: () => import('@/views/basic/line/BasicLineAreaDemo.vue') + }, + { + path: '/basic-line-stack-demo', + name: 'BasicLineStackDemo', + component: () => import('@/views/basic/line/BasicLineStackDemo.vue') + }, + { + path: '/basic-line-stack-demo', + name: 'BasicLineAreaStackDemo', + component: () => import('@/views/basic/line/BasicLineAreaStackDemo.vue') + } +] diff --git a/examples/src/views/basic/line/BasicLineAreaDemo.vue b/examples/src/views/basic/line/BasicLineAreaDemo.vue new file mode 100644 index 0000000..7365a1c --- /dev/null +++ b/examples/src/views/basic/line/BasicLineAreaDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/src/views/basic/line/BasicLineAreaStackDemo.vue b/examples/src/views/basic/line/BasicLineAreaStackDemo.vue new file mode 100644 index 0000000..587c596 --- /dev/null +++ b/examples/src/views/basic/line/BasicLineAreaStackDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/src/views/basic/line/BasicLineDemo.vue b/examples/src/views/basic/line/BasicLineDemo.vue new file mode 100644 index 0000000..30902db --- /dev/null +++ b/examples/src/views/basic/line/BasicLineDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/src/views/basic/line/BasicLineStackDemo.vue b/examples/src/views/basic/line/BasicLineStackDemo.vue new file mode 100644 index 0000000..5eb6e91 --- /dev/null +++ b/examples/src/views/basic/line/BasicLineStackDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/bi-chart/components/basic-chart/chart-option/index.ts b/packages/bi-chart/components/basic-chart/chart-option/index.ts index 9147f01..307d265 100644 --- a/packages/bi-chart/components/basic-chart/chart-option/index.ts +++ b/packages/bi-chart/components/basic-chart/chart-option/index.ts @@ -1,2 +1,3 @@ export * from './bar' export * from './pie' +export * from './line' diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area-stack.ts b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area-stack.ts new file mode 100644 index 0000000..2afff21 --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area-stack.ts @@ -0,0 +1,35 @@ +import { categoryXAxis, colors, grid, legend, valueYAxis } from './basic' + +export default { + colors, + tooltip: { + trigger: 'axis' + }, + legend, + grid, + xAxis: categoryXAxis, + yAxis: valueYAxis, + series: [ + { + areaStyle: {}, + stack: 'Total', + name: '外呼总时长', + type: 'line', + data: [150, 230, 224, 218, 135, 147, 260] + }, + { + areaStyle: {}, + stack: 'Total', + name: '外呼平均通话时长', + type: 'line', + data: [250, 130, 124, 318, 235, 247, 160] + }, + { + areaStyle: {}, + stack: 'Total', + name: '通时评分', + type: 'line', + data: [450, 530, 324, 118, 335, 347, 60] + } + ] +} diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area.ts b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area.ts new file mode 100644 index 0000000..245b4ff --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-area.ts @@ -0,0 +1,32 @@ +import { categoryXAxis, colors, grid, legend, valueYAxis } from './basic' + +export default { + colors, + tooltip: { + trigger: 'axis' + }, + legend, + grid, + xAxis: categoryXAxis, + yAxis: valueYAxis, + series: [ + { + areaStyle: {}, + name: '外呼总时长', + type: 'line', + data: [150, 230, 224, 218, 135, 147, 260] + }, + { + areaStyle: {}, + name: '外呼平均通话时长', + type: 'line', + data: [250, 130, 124, 318, 235, 247, 160] + }, + { + areaStyle: {}, + name: '通时评分', + type: 'line', + data: [450, 530, 324, 118, 335, 347, 60] + } + ] +} diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-stack.ts b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-stack.ts new file mode 100644 index 0000000..8b4e2db --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line-stack.ts @@ -0,0 +1,32 @@ +import { categoryXAxis, colors, grid, legend, valueYAxis } from './basic' + +export default { + colors, + tooltip: { + trigger: 'axis' + }, + legend, + grid, + xAxis: categoryXAxis, + yAxis: valueYAxis, + series: [ + { + name: '外呼总时长', + type: 'line', + stack: 'Total', + data: [150, 230, 224, 218, 135, 147, 260] + }, + { + name: '外呼平均通话时长', + type: 'line', + stack: 'Total', + data: [250, 130, 124, 318, 235, 247, 160] + }, + { + name: '通时评分', + type: 'line', + stack: 'Total', + data: [450, 530, 324, 118, 335, 347, 60] + } + ] +} diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/basic-line.ts b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line.ts new file mode 100644 index 0000000..95b9b4b --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/basic-line.ts @@ -0,0 +1,29 @@ +import { categoryXAxis, colors, grid, legend, valueYAxis } from './basic' + +export default { + colors, + tooltip: { + trigger: 'axis' + }, + legend, + grid, + xAxis: categoryXAxis, + yAxis: valueYAxis, + series: [ + { + name: '外呼总时长', + type: 'line', + data: [150, 230, 224, 218, 135, 147, 260] + }, + { + name: '外呼平均通话时长', + type: 'line', + data: [250, 130, 124, 318, 235, 247, 160] + }, + { + name: '通时评分', + type: 'line', + data: [450, 530, 324, 118, 335, 347, 60] + } + ] +} diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/basic.ts b/packages/bi-chart/components/basic-chart/chart-option/line/basic.ts new file mode 100644 index 0000000..84b39c1 --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/basic.ts @@ -0,0 +1,63 @@ +// X 轴展示类目 +export const categoryXAxis = { + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisLabel: { + interval: 0, // 横轴信息显示全部 + color: '#9CA6B9', + fontSize: 14 + }, + axisLine: { + lineStyle: { + type: 'dashed', + color: '#E1E4E8' + } + } +} + +// Y 轴展示值 +export const valueYAxis = { + type: 'value', + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#E1E4E8' + } + }, + axisLabel: { + color: '#9CA6B9', + fontSize: 14 + } +} + +// 图例 +export const legend = { + icon: 'circle', + itemWidth: 8, + itemHeight: 8, + itemGap: 25, // 图例每项之间的间隔 + textStyle: { + fontSize: 12, //字体大小 + color: '#646B7A' //字体颜色 + } +} + +// 折线图 grid 样式 +export const grid = { + left: '3%', + right: '4%', + bottom: '0%', + containLabel: true +} + +// 通用颜色 +export const colors = [ + '#0056FF', + '#2ED4A9', + '#FF7125', + '#FFC420', + '#F12525', + '#646B7A' +] diff --git a/packages/bi-chart/components/basic-chart/chart-option/line/index.ts b/packages/bi-chart/components/basic-chart/chart-option/line/index.ts new file mode 100644 index 0000000..8d43d83 --- /dev/null +++ b/packages/bi-chart/components/basic-chart/chart-option/line/index.ts @@ -0,0 +1,4 @@ +export { default as basicLine } from './basic-line' +export { default as basicLineArea } from './basic-line-area' +export { default as basicLineStack } from './basic-line-stack' +export { default as basicLineAreaStack } from './basic-line-area-stack'