【开发】 echarts按需引入 饼图增加金额展示

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'

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'

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,
+          show:true,
-          trigger: 'item'
+          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做一个小圆圈在引导线尾部显示

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'

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'