v2微调

src/v2/components/componentData.js

@@ -5,7 +5,29 @@ export const componentList = [
     type: 'line-chart',
     icon: require('@/assets/chart-line.png'),
     groupName: '图表',
-    component: () => import('./elements/chart-line.vue') // 新增组件引用
+    component: () => import('./elements/chart-line.vue'), // 新增组件引用
+    props: [
+      {
+        name: 'title',
+        type: 'string',
+        label: '标题',
+        default: '线图标题',
+        group: '基础'
+      },
+      {
+        name: 'dbName',
+        type: 'string',
+        label: '数据源对象',
+        default: '',
+        group: '数据'
+      },
+    ],
+    defaultOption: {
+      x: 0,
+      y: 0,
+      width: 600,
+      height: 300
+    }
   },
   {
     id: 'chart-bar',
@@ -29,7 +51,13 @@ export const componentList = [
         default: '',
         group: '数据'
       },
-    ]
+    ],
+     defaultOption: {
+      x: 0,
+      y: 0,
+      width: 300,
+      height: 300
+    }
   },
   {
     id: 'chart-pie',

src/v2/components/elements/chart-bar.vue

@@ -1,24 +1,56 @@
 <template>
   <div class="chart-bar"> 
-    <h3>{{ option }}</h3>
+    <div id="bar-chart" style="width: 100%; height: 100%;"></div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
 export default {
   name: 'ChartBar',
-  props: {
+  mounted() {
-    // 组件属性
+    this.initBarChart();
-    option: {
+  },
-      type: Object,
+  methods: {
-      default: () => ({})
+    initBarChart() {
+      const chartDom = document.getElementById('bar-chart');
+      if (chartDom) {
+        const chart = echarts.init(chartDom);
+        const option = {
+          title: {
+            text: '标题',
+            textStyle: {
+              color: '#000',
+              fontSize: 18
+            },
+            left: 'center'
+          },
+          xAxis: {
+            type: 'category',
+            data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70, 110, 130],
+              type: 'bar'
+            }
+          ]
+        };
+        chart.setOption(option);
+      }
     }
   }
-}
+};
-</script>
 
+
+</script>
 <style scoped>
 .chart-bar {
-  /* 组件样式 */
+  width: 100%;
+  height: 100%;
 }
 </style>

src/v2/components/elements/chart-line.vue

@@ -1,25 +1,74 @@
 <template>
   <div class="chart-line">
-    <!-- 线图组件内容 -->
+    <div id="line-chart" style="width: 100%; height: 100%;"></div>
-    <h3>{{ option }}</h3>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
 export default {
   name: 'ChartLine',
-  props: {
+  mounted() {
-    // 组件属性
+    this.initLineChart();
-    option: {
+    window.addEventListener('resize', this.handleResize);
-      type: Object,
+  },
-      default: () => ({})
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    initLineChart() {
+      const chartDom = document.getElementById('line-chart');
+      if (!chartDom) return;
+      const myChart = echarts.init(chartDom);
+      this.myChart = myChart;
+      
+      // 生成30天模拟数据
+      const data = [];
+      for (let i = 1; i <= 30; i++) {
+        data.push(Math.floor(Math.random() * 200) + 50);
+      }
+
+      const option = {
+        title: {
+          text: '标题',
+          left: 'center',
+          textStyle: {
+            color: '#000',
+            fontSize: 18
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: Array.from({ length: 30 }, (_, i) => `第${i + 1}天`)
+        },
+        yAxis: {
+          type: 'value',
+          // 确保 y 轴显示在左侧
+          position: 'left',
+          // 限制 y 轴最大值，避免图表超出高度
+          max: 300
+        },
+        series: [{
+          data: data,
+          type: 'line'
+        }]
+      };
+      
+      myChart.setOption(option);
+    },
+    handleResize() {
+      if (this.myChart) {
+        this.myChart.resize();
+      }
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .chart-line {
-  /* 组件样式 */
+  width: 100%;
+  height: 100%;
 }
 </style>