不重要

.env.development

@@ -1,5 +1,5 @@
 # 接口地址
-VITE_APP_API_URL="http://192.168.77.4:8619/api"
-# VITE_APP_API_URL="http://8.136.199.33:8619/api"
+# VITE_APP_API_URL="http://192.168.77.4:8619/api"
+VITE_APP_API_URL="http://8.136.199.33:8619/api"
 # crm系统地址
 VITE_CRM_SYSTEM_URL="https://rddptest.hzinsights.com/login"

src/components/echart/baseOptions.js

@@ -0,0 +1,3 @@
+export const baseOptions={
+  
+}

src/components/echart/index.vue

@@ -0,0 +1,136 @@
+<script setup>
+  import * as echarts from 'echarts/core';
+  // 引入柱状图图表，图表后缀都为 Chart
+  import { BarChart } from 'echarts/charts';
+  // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+  import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    LegendComponent
+  } from 'echarts/components';
+  // 标签自动布局、全局过渡动画等特性
+  import { LabelLayout, UniversalTransition } from 'echarts/features';
+  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+  import { CanvasRenderer } from 'echarts/renderers';
+
+
+  // 注册必须的组件
+  echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    LegendComponent,
+    BarChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer
+  ]);
+
+  const chartProp=defineProps({
+    options:{
+      type:Object,
+      require:true
+    },
+    title:{
+      type:String,
+      default:''
+    }
+  })
+  watch(()=>chartProp.options,(newVal)=>{
+    console.log(newVal,'newVal');
+  },{deep:true})
+  
+  const defaultOptions=reactive({
+    title: {
+      text:'开票到款统计图',
+      textStyle:{
+        fontSize:20,
+        fontWeight:500
+      },
+      left:'center'
+    },
+    legend:{
+      icon:'circle',
+      left:'center',
+      top:40,
+      textStyle:{
+        fontSize:14
+      },
+      itemGap:34,
+      itemWidth:12
+    },
+    tooltip:{
+      textStyle:{
+        align:'left'
+      }
+    },
+    grid:{
+      top:120
+    },
+    color: ['#FF903E', '#FBE947'],
+    xAxis:{
+      type: 'category',
+      data:dateData,
+      axisLabel: {
+        color: '#999', //更改坐标轴文字颜色
+        fontSize: 14, //更改坐标轴文字大小
+      },
+    },
+    yAxis: {
+      name:'万元',
+      type: 'value',
+      nameGap:20,
+      splitNumber:10,
+      nameTextStyle:{
+        align:'right',
+        color:'#999'
+      },
+      axisLabel:{
+        color:'#999',
+        formatter:(value)=>{
+          return Math.round(value*10)/100000
+        }
+      }
+    },
+    series:[{
+      data: invoiceData,
+      type: 'bar',
+      name:'开票金额'
+    },
+    {
+      data: placementData,
+      type: 'bar',
+      name:'到款金额'
+    }]
+  })
+
+  const barChartRef = ref(null)
+  let barChart = null
+
+  const resizeChart=()=>{
+    barChart.resize();
+  }
+
+    const chartDraw=(invoiceData,placementData,dateData)=>{
+    console.log(barChartRef.value);
+    barChart = echarts.init(barChartRef.value)
+    barChart.setOption(defaultOptions)
+    window.addEventListener('resize', resizeChart);
+  }
+
+  onUnmounted(()=>{
+    barChart?.dispose()
+    window.removeEventListener('resize', resizeChart);
+  })
+</script>
+
+<template>
+    <div ref="barChartRef"></div>
+</template>
+  
+<style lang="scss" scoped>
+  
+</style>

src/views/dashboard/index.vue

@@ -1,51 +1,18 @@
 <script setup>
 
   import {getStatistic} from '@/api/dashboard'
-  import * as echarts from 'echarts/core';
-  // 引入柱状图图表，图表后缀都为 Chart
-  import { BarChart } from 'echarts/charts';
-  // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
-  import {
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    DatasetComponent,
-    LegendComponent
-  } from 'echarts/components';
-  // 标签自动布局、全局过渡动画等特性
-  import { LabelLayout, UniversalTransition } from 'echarts/features';
-  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-  import { CanvasRenderer } from 'echarts/renderers';
-
+  import chart from '@/components/echart/index.vue'
   import {useRouter} from 'vue-router'
 
-  // 注册必须的组件
-  echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    DatasetComponent,
-    LegendComponent,
-    BarChart,
-    LabelLayout,
-    UniversalTransition,
-    CanvasRenderer
-  ]);
   
   const router = useRouter()
 
-  const barChartRef = ref(null)
-  let barChart = null
 
   const paymentNavigator=()=>{
     // 去往商品到款统计页面
     router.push('/financialStatistics/commodityPayment')
   }
 
-  const resizeChart=()=>{
-    barChart.resize();
-  }
-
   const getChartData=()=>{
     getStatistic().then(res=>{
       nextTick(()=>{
@@ -54,80 +21,6 @@
     })
   }
 
-  const chartDraw=(invoiceData,placementData,dateData)=>{
-    // console.log(barChartRef.value);
-    barChart = echarts.init(barChartRef.value)
-    barChart.setOption({
-      title: {
-        text:'开票到款统计图',
-        textStyle:{
-          fontSize:20,
-          fontWeight:500
-        },
-        left:'center'
-      },
-      legend:{
-        icon:'circle',
-        left:'center',
-        top:40,
-        textStyle:{
-          fontSize:14
-        },
-        itemGap:34,
-        itemWidth:12
-      },
-      tooltip:{
-        textStyle:{
-          align:'left'
-        }
-      },
-      grid:{
-        top:120
-      },
-      color: ['#FF903E', '#FBE947'],
-      xAxis:{
-        type: 'category',
-        data:dateData,
-        axisLabel: {
-          color: '#999', //更改坐标轴文字颜色
-          fontSize: 14, //更改坐标轴文字大小
-        },
-      },
-      yAxis: {
-        name:'万元',
-        type: 'value',
-        nameGap:20,
-        splitNumber:10,
-        nameTextStyle:{
-          align:'right',
-          color:'#999'
-        },
-        axisLabel:{
-          color:'#999',
-          formatter:(value)=>{
-            return Math.round(value*10)/100000
-          }
-        }
-      },
-      series:[{
-        data: invoiceData,
-        type: 'bar',
-        name:'开票金额'
-      },
-      {
-        data: placementData,
-        type: 'bar',
-        name:'到款金额'
-      }]
-    })
-    window.addEventListener('resize', resizeChart);
-  }
-
-  onUnmounted(()=>{
-    barChart?.dispose()
-    window.removeEventListener('resize', resizeChart);
-  })
-
   onMounted(()=>{
     getChartData()
   })
@@ -145,7 +38,10 @@
           </el-icon>
         </span>
       </div>
-      <div ref="barChartRef" class="bar-chart"></div>
+
+      <div class="bar-chart">
+        <chart />
+      </div>
     </div>
 </template>