From 10919c75307dd8a1d6af0e902eb71b3c074b39dd Mon Sep 17 00:00:00 2001
From: fengachen <fengachen@syxysoft.com>
Date: Sat, 3 Sep 2022 10:30:59 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=BC=80=E5=8F=91=E3=80=91=20echarts?=
 =?UTF-8?q?=E6=8C=89=E9=9C=80=E5=BC=95=E5=85=A5=20=20=E9=A5=BC=E5=9B=BE?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=87=91=E9=A2=9D=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AllMoneyTenEcharts.vue    | 20 +++++++++-
 .../dashboard/DepartmentTotalEcharts.vue      | 20 +++++++++-
 src/views/dashboard/IncomeSortEcharts.vue     | 38 ++++++++++++++++---
 src/views/dashboard/SingleMonthEcharts.vue    | 25 +++++++++++-
 .../dashboard/SingleMonthTotalEcharts.vue     | 25 +++++++++++-
 5 files changed, 118 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/AllMoneyTenEcharts.vue b/src/views/dashboard/AllMoneyTenEcharts.vue
index 613a823..a3474ee 100644
--- a/src/views/dashboard/AllMoneyTenEcharts.vue
+++ b/src/views/dashboard/AllMoneyTenEcharts.vue
@@ -7,7 +7,25 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import { BarChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
diff --git a/src/views/dashboard/DepartmentTotalEcharts.vue b/src/views/dashboard/DepartmentTotalEcharts.vue
index 09a39ad..b5669fc 100644
--- a/src/views/dashboard/DepartmentTotalEcharts.vue
+++ b/src/views/dashboard/DepartmentTotalEcharts.vue
@@ -7,7 +7,25 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import { BarChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
diff --git a/src/views/dashboard/IncomeSortEcharts.vue b/src/views/dashboard/IncomeSortEcharts.vue
index eb6b7b6..f0815e7 100644
--- a/src/views/dashboard/IncomeSortEcharts.vue
+++ b/src/views/dashboard/IncomeSortEcharts.vue
@@ -11,8 +11,26 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import { PieChart } from 'echarts/charts'
+import { LabelLayout } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout
+])
 import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
 
 export default {
   name: 'IncomeSortEcharts',
@@ -26,10 +44,10 @@ export default {
     }
   },
   mounted() {
-    // this.initEcharts()
     this.loadData()
   },
   methods:{
+    formatMoney,
     toggleEcharts(key) {
       if(key === this.activeIndex) {
         return
@@ -53,9 +71,9 @@ export default {
       })
     },
     initEcharts(data) {
-      let color = ['#069F99', '#6D7FD0 ', '#B78571', '#FA9D81', '#BDA79E']
+      let color = ['#069F99', '#88C87E ', '#6D7FD0', '#FA9D81', '#A5B3FF']
       let echartsData = data.reduce( (pre,val) => {
-       return  pre.concat({value:val.value,name:val.name_dictText})
+       return  pre.concat({value:val.value,name:val.name_dictText,money:val.money})
       },[])
       echartsData = this.initPoint(echartsData,color)
       let chartDom = document.getElementById('incomeSort')
@@ -65,8 +83,15 @@ export default {
       option = {
         
         tooltip: {
-          show:false,
-          trigger: 'item'
+          show:true,
+          trigger: 'item',
+          formatter: (param) => {
+            return `<div>
+<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
+<span style="color: #999">${param.name}</span>
+<span style="color: #333">${this.formatMoney(param.data.money)}</span>
+</div>`
+          }
         },
         legend: {
           bottom:'2%',
@@ -121,6 +146,7 @@ export default {
           let item = {}
           item.name = data[i].name
           item.value = data[i].value
+          item.money = data[i].money
           item.label = {
             normal: {
               //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
diff --git a/src/views/dashboard/SingleMonthEcharts.vue b/src/views/dashboard/SingleMonthEcharts.vue
index 33ac9d3..f7e6aed 100644
--- a/src/views/dashboard/SingleMonthEcharts.vue
+++ b/src/views/dashboard/SingleMonthEcharts.vue
@@ -41,7 +41,30 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  ToolboxComponent
+])
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {MonthData} from '@views/statisticalReport/statisticData'
 import {getAction} from '@api/manage'
diff --git a/src/views/dashboard/SingleMonthTotalEcharts.vue b/src/views/dashboard/SingleMonthTotalEcharts.vue
index 72a66be..01544d5 100644
--- a/src/views/dashboard/SingleMonthTotalEcharts.vue
+++ b/src/views/dashboard/SingleMonthTotalEcharts.vue
@@ -41,7 +41,30 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  ToolboxComponent
+])
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {MonthDataTotal} from '@views/statisticalReport/statisticData'
 import {getAction} from '@api/manage'