feat: 添加折线图表组件配置

src/components/Charts/Bar/BasicBar/index.ts

@@ -1,5 +1,6 @@
-import BasicLine from './src/index.vue';
+import BasicBar from './src/BasicBar.vue';
 import Config from './src/Config.vue';
-export default BasicLine;
+
+export default BasicBar;
 export { Config };
 export { defaultPropsValue, basicBarProps } from './src/props';

src/components/Charts/Line/BasicLine/index.ts

@@ -1,4 +1,6 @@
-import BasicLine from './src/index.vue';
-export default BasicLine;
+import BasicLine from './src/BasicLine.vue';
+import Config from './src/Config.vue';
 
+export default BasicLine;
+export { Config };
 export { defaultPropsValue, basicLineProps } from './src/props';

src/components/Charts/Line/BasicLine/src/index.vue

@@ -1,15 +1,17 @@
 <template>
-  <Echarts :width="width" :height="height" :echarts-options="options"></Echarts>
+  <Echarts :width="width" :height="height" :echarts-options="options" :loading="loading"></Echarts>
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from "vue";
+import { defineProps } from "vue";
 import Echarts from '@/components/Charts/Echarts.vue';
 import { basicLineProps } from "./props";
-import { omit } from 'lodash';
+import { useChartOptions } from "@/components/Charts/hooks/useChartOptions";
 
 const props = defineProps(basicLineProps);
-const options = computed(() => omit(props, ['width', 'height', ]));
+
+const { options, loading } = useChartOptions(props);
+
 </script>
 
 <style scoped></style>

src/components/Charts/Line/BasicLine/src/Config.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="chart-config">
+    <div class="config-tab">
+      <ElRadioGroup v-model="activeTab" size="small">
+        <ElRadioButton value="1">数据</ElRadioButton>
+        <ElRadioButton value="2">样式</ElRadioButton>
+      </ElRadioGroup>
+    </div>
+
+    <DataConfig v-if="activeTab === '1'" :dataSource="dataSource" @change="handleChange"/>
+    <StyleConfig v-if="activeTab === '2'" @change="handleChange"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from 'vue';
+import { ElRadioGroup, ElRadioButton } from 'element-plus';
+import DataConfig from '@/components/Charts/DataConfig.vue';
+import StyleConfig from '@/components/Charts/StyleConfig.vue';
+import { basicLineProps } from './props';
+
+const props = defineProps(basicLineProps);
+const activeTab = ref('1');
+const emit = defineEmits(['change']);
+
+const handleChange = (data: any) => {
+  emit('change', {
+    ...props,
+    dataSource: data,
+  });
+}
+</script>
+
+<style lang="less" scoped>
+.config-tab {
+  text-align: center;
+  margin-bottom: 12px;
+}
+</style>

src/components/Charts/Line/BasicLine/src/props.ts

@@ -1,5 +1,8 @@
 import { type PropType } from "vue";
 import { EChartsOption } from "echarts";
+import { getNormalizedChart } from "@/utils/common";
+import { dataSource } from "@/utils/common";
+import { DataSourceType } from "@/enum";
 
 export const basicLineProps = {
   width: {
@@ -10,6 +13,7 @@ export const basicLineProps = {
     type: Number as PropType<number>,
     default: 260,
   },
+  dataSource,
   // 标题
   title: {
     type: Object as PropType<EChartsOption["title"]>,
@@ -48,6 +52,15 @@ export const basicLineProps = {
   },
 };
 
+const chartOptions = getNormalizedChart({
+  title: {
+    text: "折线图标题",
+  },
+  xAxis: {
+    data: ['轴标签A', '轴标签B', '轴标签C', '轴标签D']
+  },
+});
+
 export const defaultPropsValue: EChartsOption = {
   container: {
     props: {
@@ -56,72 +69,47 @@ export const defaultPropsValue: EChartsOption = {
     },
   },
   props: {
-    title: {
-      text: "折线图标题",
-      left: "center",
-      top: 8,
-      textStyle: {
-        color: "#fff",
-        fontSize: 16,
-      },
-    },
-    legend: {
-      textStyle: {
-        color: "#fff",
+    // 数据源
+    dataSource: {
+      sourceType: DataSourceType.STATIC,
+      data: {
+        xData: ['轴标签A', '轴标签B', '轴标签C', '轴标签D'],
+        series: [
+          {
+            type: 'bar',
+            name: '系列1',
+            data: [89.3, 92.1, 94.4, 85.4]
+          },
+          {
+            type: 'bar',
+            name: '系列2',
+            data: [95.8, 89.4, 91.2, 76.9]
+          },
+        ]
       },
-      top: 32,
-    },
-    grid: {
-      bottom: 34,
-      right: 20,
-      top: 60,
-    },
-    tooltip: {},
-    xAxis: {
-      type: "category",
-      axisLabel: {
-        color: "#9fadbf",
-      },
-    },
-    yAxis: {
-      axisLabel: {
-        color: "#9fadbf",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "#36485f",
-        },
-      },
-    },
-    series: [
-      { type: "line", itemStyle: { color: "#1890ff" } },
-      { type: "line", itemStyle: { color: "#2fc25b" } },
-    ],
-    dataset: {
-      dimensions: ["month", "city", "city2"],
-      source: [
-        {
-          month: "纵轴A",
-          city: Math.floor(Math.random() * 100),
-          city2: Math.floor(Math.random() * 100),
-        },
-        {
-          month: "纵轴B",
-          city: Math.floor(Math.random() * 100),
-          city2: Math.floor(Math.random() * 100),
-        },
-        {
-          month: "纵轴C",
-          city: Math.floor(Math.random() * 100),
-          city2: Math.floor(Math.random() * 100),
-        },
-        {
-          month: "纵轴D",
-          city: Math.floor(Math.random() * 100),
-          city2: Math.floor(Math.random() * 100),
-        },
-      ],
+      url: location.origin + "/mock/api/get/example/line",
+      method: "POST",
+      params: {},
+      headers: {},
+      refreshTime: 0,
+      dataProcess: `
+        (res) => {
+          // 取出列表
+          const data = res.data;
+          // x轴数据
+          const xData = data.map((item) => item.name); 
+          // 系列数据
+          const series = [
+            { type: 'bar', name: '苹果', data: data.map(item => item.apple) },
+            { type: 'bar', name: 'VIVO', data: data.map(item => item.vivo) },
+            { type: 'bar', name: '小米', data: data.map(item => item.mi) },
+          ];
+
+          // 返回图表数据
+          return { xData, series };
+        }
+      `
     },
+    ...chartOptions
   },
 };

src/mock/index.ts

@@ -28,4 +28,18 @@ export default [
       ],
     },
   },
+  {
+    url: '/mock/api/get/example/line',
+    method: 'post',
+    timeout: 2000,
+    response: {
+      code: 0,
+      data: [
+        { name: '一月', apple: 1654, vivo: 1234, mi: 3421 },
+        { name: '二月', apple: 4322, vivo: 4321, mi: 2343 },
+        { name: '三月', apple: 4345, vivo: 3221, mi: 3221  },
+        { name: '四月', apple: 3222, vivo: 1222, mi: 1222 },
+      ],
+    },
+  },
 ] as MockMethod[]