From 79027839985d5048c8b281a20172502a9e6270e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 5 Mar 2022 21:04:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(chart):=20=E5=9B=BE=E6=A0=87=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/components/Chart/BarChart.vue   | 38 ++++++++++++++-----
 .../components/Chart/FunnelChart.vue          |  3 +-
 .../dashboard/components/Chart/PieChart.vue   | 22 ++++++++---
 .../dashboard/components/Chart/RadarChart.vue | 14 ++++++-
 4 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/views/dashboard/components/Chart/BarChart.vue b/src/views/dashboard/components/Chart/BarChart.vue
index 8944b003..33a4948e 100644
--- a/src/views/dashboard/components/Chart/BarChart.vue
+++ b/src/views/dashboard/components/Chart/BarChart.vue
@@ -1,4 +1,4 @@
-<!-- 柱状图 -->
+<!--  线 + 柱混合图 -->
 <template>
   <div
       :id="id"
@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
 import {init, EChartsOption} from 'echarts'
+import * as echarts from 'echarts';
 import resize from '@/utils/resize'
 
 const props = defineProps({
@@ -47,14 +48,14 @@ function initChart() {
   barChart.setOption({
     title: {
       show: true,
-      text: '分公司业绩总览(2021年)',
+      text: '业绩总览(2021年)',
       x: 'center',
       padding: 15,
       textStyle: {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color: '#096b92'
+        color: '#337ecc'
       }
     },
     grid: {
@@ -113,28 +114,47 @@ function initChart() {
         data: [
           8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800,
         ],
-        barWidth: 20
-
+        barWidth: 20,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#83bff6' },
+            { offset: 0.5, color: '#188df0' },
+            { offset: 1, color: '#188df0' }
+          ])
+        }
       },
       {
         name: '毛利润',
         type: 'bar',
         data: [
-          6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213,
+          6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800
         ],
-        barWidth: 20
+        barWidth: 20,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#25d73c' },
+            { offset: 0.5, color: '#1bc23d' },
+            { offset: 1, color: '#179e61' }
+          ])
+        }
       },
       {
         name: '收入增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [42, 41, 53, 65, 67, 65, 52, 45, 43]
+        data: [65, 67, 65, 53, 47, 45, 43, 42, 41],
+        itemStyle: {
+          color: '#67C23A'
+        }
       },
       {
         name: '利润增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [82, 81, 56, 45, 51, 65, 65, 67, 78]
+        data: [80, 81, 78, 67, 65, 60, 56,51, 45 ],
+        itemStyle: {
+          color: '#409EFF'
+        }
       }
     ]
   } as EChartsOption)
diff --git a/src/views/dashboard/components/Chart/FunnelChart.vue b/src/views/dashboard/components/Chart/FunnelChart.vue
index 362797b6..3234d992 100644
--- a/src/views/dashboard/components/Chart/FunnelChart.vue
+++ b/src/views/dashboard/components/Chart/FunnelChart.vue
@@ -11,7 +11,6 @@
 import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
 import {init, EChartsOption} from 'echarts'
 import resize from '@/utils/resize'
-import {FunnelChart} from "echarts/charts";
 
 const props = defineProps({
   id: {
@@ -55,7 +54,7 @@ function initChart() {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color:'#096b92'
+        color:'#337ecc'
       }
     },
     grid: {
diff --git a/src/views/dashboard/components/Chart/PieChart.vue b/src/views/dashboard/components/Chart/PieChart.vue
index 0b7d1959..d648d393 100644
--- a/src/views/dashboard/components/Chart/PieChart.vue
+++ b/src/views/dashboard/components/Chart/PieChart.vue
@@ -11,6 +11,7 @@
 import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
 import {init, EChartsOption} from 'echarts'
 import resize from "@/utils/resize";
+import * as echarts from "echarts";
 
 const props = defineProps({
   id: {
@@ -54,7 +55,7 @@ function initChart() {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color:'#096b92'
+        color: '#337ecc'
       }
     },
     grid: {
@@ -74,13 +75,22 @@ function initChart() {
         center: ['50%', '50%'],
         roseType: 'area',
         itemStyle: {
-          borderRadius: 8
+          borderRadius: 6,
+          normal: {
+            color: function (params: any) {
+              //自定义颜色
+              const colorList = [
+                '#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
+              ];
+              return colorList[params.dataIndex]
+            }
+          }
         },
         data: [
-          { value: 26, name: '家用电器' },
-          { value: 27, name: '户外运动' },
-          { value: 24, name: '汽车用品' },
-          { value: 23, name: '手机数码' }
+          {value: 26, name: '家用电器'},
+          {value: 27, name: '户外运动'},
+          {value: 24, name: '汽车用品'},
+          {value: 23, name: '手机数码'}
         ]
       }
     ]
diff --git a/src/views/dashboard/components/Chart/RadarChart.vue b/src/views/dashboard/components/Chart/RadarChart.vue
index fed93f6e..a4937215 100644
--- a/src/views/dashboard/components/Chart/RadarChart.vue
+++ b/src/views/dashboard/components/Chart/RadarChart.vue
@@ -54,7 +54,7 @@ function initChart() {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color:'#096b92'
+        color:'#337ecc'
       }
     },
     grid: {
@@ -84,6 +84,18 @@ function initChart() {
       {
         name: 'Budget vs spending',
         type: 'radar',
+        itemStyle: {
+          borderRadius: 6,
+          normal: {
+            color: function (params: any) {
+              //自定义颜色
+              const colorList = [
+                '#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
+              ];
+              return colorList[params.dataIndex]
+            }
+          }
+        },
         data: [
           {
             value: [4200, 10000, 20000, 35000, 50000, 18000],
-- 
GitLab