From aa25962d8d19e450752d600ae5dde4df95006b26 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 28 Dec 2021 16:31:48 +0800
Subject: [PATCH] fix(charts): rerender text color when change mode

---
 src/pages/dashboard/base/index.ts    | 11 ++++++++---
 src/pages/dashboard/base/index.vue   | 14 +++++++-------
 src/pages/dashboard/detail/index.vue | 14 +++++++-------
 src/pages/detail/deploy/index.vue    | 10 +++++-----
 src/pages/user/index.vue             |  6 +++---
 5 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index edbd4b2..315b133 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -149,19 +149,19 @@ export function constructInitDashboardDataset(type: string) {
           {
             value: 135,
             itemStyle: {
-              color: chartListColor()[1],
+              opacity: 0.2,
             },
           },
           {
             value: 118,
             itemStyle: {
-              color: chartListColor()[1],
+              opacity: 0.2,
             },
           },
           {
             value: 60,
             itemStyle: {
-              color: chartListColor()[1],
+              opacity: 0.2,
             },
           },
         ],
@@ -1077,6 +1077,7 @@ export function getPieChartDataSet({
   radius = 42,
   textColor,
   placeholderColor,
+  containerColor,
 }: { radius: number } & Record<string, string>) {
   return {
     color: chartListColor(),
@@ -1110,6 +1111,10 @@ export function getPieChartDataSet({
         selectedMode: true,
         hoverAnimation: true,
         silent: true,
+        itemStyle: {
+          borderColor: containerColor,
+          borderWidth: 1,
+        },
         label: {
           show: true,
           position: 'center',
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 6ba8071..93a90de 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -203,7 +203,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick } from 'vue';
+import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -228,7 +228,7 @@ import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } f
 echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, BarChart, CanvasRenderer]);
 
 const getThisMonth = (checkedValues?: string[]) => {
-  let date;
+  let date: Date;
   if (!checkedValues || checkedValues.length === 0) {
     date = new Date();
     return `${date.getFullYear()}-${date.getMonth() + 1}`;
@@ -251,7 +251,7 @@ export default defineComponent({
     const store = useStore();
     const resizeTime = ref(1);
 
-    const { chartColors } = store.state.setting;
+    const chartColors = computed(() => store.state.setting.chartColors);
 
     // moneyCharts
     let moneyContainer: HTMLElement;
@@ -283,7 +283,7 @@ export default defineComponent({
         stokeContainer = document.getElementById('stokeContainer');
       }
       stokeChart = echarts.init(stokeContainer);
-      stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
+      stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
     };
 
     // monitorChart
@@ -294,7 +294,7 @@ export default defineComponent({
         monitorContainer = document.getElementById('monitorContainer');
       }
       monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getLineChartDataSet({ ...chartColors }));
+      monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
     };
 
     // monitorChart
@@ -305,7 +305,7 @@ export default defineComponent({
         countContainer = document.getElementById('countContainer');
       }
       countChart = echarts.init(countContainer);
-      countChart.setOption(getPieChartDataSet(chartColors));
+      countChart.setOption(getPieChartDataSet(chartColors.value));
     };
 
     const renderCharts = () => {
@@ -331,7 +331,7 @@ export default defineComponent({
       });
       refundChart.resize({
         width: resizeTime.value * 120,
-        height: resizeTime.value * 66,
+        height: resizeTime.value * 42,
       });
       stokeChart.resize({
         width: stokeContainer.clientWidth,
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index 3eab792..46212ce 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -58,7 +58,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -85,14 +85,14 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
-    const { chartColors } = store.state.setting;
+    const chartColors = computed(() => store.state.setting.chartColors);
     // lineChart logic
     let lineContainer: HTMLElement;
     let lineChart: echarts.ECharts;
     const renderLineChart = () => {
       lineContainer = document.getElementById('lineContainer');
       lineChart = echarts.init(lineContainer);
-      lineChart.setOption(getFolderLineDataSet({ ...chartColors }));
+      lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
     };
 
     // scatterChart logic
@@ -101,7 +101,7 @@ export default defineComponent({
     const renderScatterChart = () => {
       scatterContainer = document.getElementById('scatterContainer');
       scatterChart = echarts.init(scatterContainer);
-      scatterChart.setOption(getScatterDataSet({ ...chartColors }));
+      scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
     };
 
     // chartSize update
@@ -152,11 +152,11 @@ export default defineComponent({
       PRODUCT_LIST,
       PANE_LIST_DATA,
       onSatisfyChange() {
-        scatterChart.setOption(getScatterDataSet({ ...chartColors }));
+        scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
       },
       onMaterialChange(value: string[]) {
-        const { chartColors } = store.state.setting;
-        lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors }));
+        const chartColors = computed(() => store.state.setting.chartColors);
+        lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
       },
     };
   },
diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue
index 5d18c3b..5fde52b 100644
--- a/src/pages/detail/deploy/index.vue
+++ b/src/pages/detail/deploy/index.vue
@@ -69,7 +69,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -102,7 +102,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const { chartColors } = store.state.setting;
+    const chartColors = computed(() => store.state.setting.chartColors);
     const data = ref([]);
     const pagination = ref({
       defaultPageSize: 10,
@@ -133,9 +133,9 @@ export default defineComponent({
     onMounted(() => {
       monitorContainer = document.getElementById('monitorContainer');
       monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
+      monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
       setInterval(() => {
-        monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
+        monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
       }, 3000);
     });
 
@@ -145,7 +145,7 @@ export default defineComponent({
     onMounted(() => {
       dataContainer = document.getElementById('dataContainer');
       dataChart = echarts.init(dataContainer);
-      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
+      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
     });
 
     const intervalTimer = null;
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 647d870..3228fbf 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -90,7 +90,7 @@
   </t-row>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@@ -117,7 +117,7 @@ export default defineComponent({
     let lineContainer: HTMLElement;
     let lineChart: echarts.ECharts;
     const store = useStore();
-    const { chartColors } = store.state.setting;
+    const chartColors = computed(() => store.state.setting.chartColors);
 
     const onLineChange = (value) => {
       lineChart.setOption(getFolderLineDataSet(value));
@@ -133,7 +133,7 @@ export default defineComponent({
           x2: 10, // 默认80px
           y2: 30, // 默认60px
         },
-        ...getFolderLineDataSet({ ...chartColors }),
+        ...getFolderLineDataSet({ ...chartColors.value }),
       });
     };