feat: ✨ 完成 折线图 初步配置

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
+  }
+]

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<RouteRecordRaw> = [
   {
@@ -21,7 +22,8 @@ export const routes: Array<RouteRecordRaw> = [
       import('@/views/business/ThingsOutboundNumberRankingDemo.vue')
   },
   ...bar,
-  ...pie
+  ...pie,
+  ...Line
 ]
 
 export default createRouter({

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')
+  }
+]

examples/src/views/basic/line/BasicLineAreaDemo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
+
+defineOptions({
+  name: 'BasicLineAreaDemo'
+})
+</script>
+
+<template>
+  <div
+    style="
+      height: 400px;
+      padding: 28px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 0 8px #eee;
+"
+  >
+    <BasicChart :options="allEchartsOptions.basicLineArea" />
+  </div>
+</template>

examples/src/views/basic/line/BasicLineAreaStackDemo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
+
+defineOptions({
+  name: 'BasicLineAreaStackDemo'
+})
+</script>
+
+<template>
+  <div
+    style="
+      height: 400px;
+      padding: 28px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 0 8px #eee;
+"
+  >
+    <BasicChart :options="allEchartsOptions.basicLineAreaStack" />
+  </div>
+</template>

examples/src/views/basic/line/BasicLineDemo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
+
+defineOptions({
+  name: 'BasicLineDemo'
+})
+</script>
+
+<template>
+  <div
+    style="
+      height: 400px;
+      padding: 28px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 0 8px #eee;
+"
+  >
+    <BasicChart :options="allEchartsOptions.basicLine" />
+  </div>
+</template>

examples/src/views/basic/line/BasicLineStackDemo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
+
+defineOptions({
+  name: 'BasicLineStackDemo'
+})
+</script>
+
+<template>
+  <div
+    style="
+      height: 400px;
+      padding: 28px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 0 8px #eee;
+"
+  >
+    <BasicChart :options="allEchartsOptions.basicLineStack" />
+  </div>
+</template>

packages/bi-chart/components/basic-chart/chart-option/index.ts

@@ -1,2 +1,3 @@
 export * from './bar'
 export * from './pie'
+export * from './line'

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]
+    }
+  ]
+}

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]
+    }
+  ]
+}

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]
+    }
+  ]
+}

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]
+    }
+  ]
+}

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'
+]

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'