From 9e157c859365da19a8b8024955a43ea0b3386ff5 Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Thu, 16 Jun 2022 17:15:47 +0800
Subject: [PATCH] fix(theme): legend default fontSize 14px

---
 src/theme/rsuite_dark.ts  | 231 +++++++++++++++++++-------------------
 src/theme/rsuite_light.ts | 231 +++++++++++++++++++-------------------
 2 files changed, 236 insertions(+), 226 deletions(-)

diff --git a/src/theme/rsuite_dark.ts b/src/theme/rsuite_dark.ts
index 3b023e2..2c21082 100644
--- a/src/theme/rsuite_dark.ts
+++ b/src/theme/rsuite_dark.ts
@@ -23,87 +23,87 @@ const theme = {
     '#df6ecd',
     '#8338ec',
     '#e6b980',
-    '#51E8FF',
+    '#51E8FF'
   ],
   backgroundColor: '#1a1d24',
   textStyle: {},
   title: {
     textStyle: {
-      color: '#ffffff',
+      color: '#ffffff'
     },
     subtextStyle: {
-      color: '#aaaaaa',
-    },
+      color: '#aaaaaa'
+    }
   },
   line: {
     itemStyle: {
-      borderWidth: '0',
+      borderWidth: '0'
     },
     lineStyle: {
-      width: 2,
+      width: 2
     },
     symbolSize: '0',
     symbol: 'circle',
-    smooth: false,
+    smooth: false
   },
   radar: {
     itemStyle: {
-      borderWidth: '0',
+      borderWidth: '0'
     },
     lineStyle: {
-      width: 2,
+      width: 2
     },
     symbolSize: '0',
     symbol: 'circle',
-    smooth: false,
+    smooth: false
   },
   bar: {
     itemStyle: {
       barBorderWidth: 0,
-      barBorderColor: '#cccccc',
-    },
+      barBorderColor: '#cccccc'
+    }
   },
   pie: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   scatter: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   boxplot: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   parallel: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   sankey: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   funnel: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   gauge: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
-    },
+      borderColor: '#cccccc'
+    }
   },
   candlestick: {
     itemStyle: {
@@ -111,17 +111,17 @@ const theme = {
       color0: '#001852',
       borderColor: '#f5e8c8',
       borderColor0: '#b8d2c7',
-      borderWidth: 1,
-    },
+      borderWidth: 1
+    }
   },
   graph: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#cccccc',
+      borderColor: '#cccccc'
     },
     lineStyle: {
       width: 1,
-      color: '#aaaaaa',
+      color: '#aaaaaa'
     },
     symbolSize: '0',
     symbol: 'circle',
@@ -136,234 +136,234 @@ const theme = {
       '#df6ecd',
       '#8338ec',
       '#e6b980',
-      '#51E8FF',
+      '#51E8FF'
     ],
     label: {
-      color: '#e9ebf0',
-    },
+      color: '#e9ebf0'
+    }
   },
   map: {
     itemStyle: {
       areaColor: '#eeeeee',
       borderColor: '#444444',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     label: {
-      color: '#000000',
+      color: '#000000'
     },
     emphasis: {
       itemStyle: {
         areaColor: 'rgba(255,215,0,0.8)',
         borderColor: '#444444',
-        borderWidth: 1,
+        borderWidth: 1
       },
       label: {
-        color: 'rgb(100,0,0)',
-      },
-    },
+        color: 'rgb(100,0,0)'
+      }
+    }
   },
   geo: {
     itemStyle: {
       areaColor: '#eeeeee',
       borderColor: '#444444',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     label: {
-      color: '#000000',
+      color: '#000000'
     },
     emphasis: {
       itemStyle: {
         areaColor: 'rgba(255,215,0,0.8)',
         borderColor: '#444444',
-        borderWidth: 1,
+        borderWidth: 1
       },
       label: {
-        color: 'rgb(100,0,0)',
-      },
-    },
+        color: 'rgb(100,0,0)'
+      }
+    }
   },
   categoryAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#3c3f43',
-      },
+        color: '#3c3f43'
+      }
     },
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#e9ebf0',
+      color: '#e9ebf0'
     },
     splitLine: {
       show: false,
       lineStyle: {
-        color: ['#e5e5ea'],
-      },
+        color: ['#e5e5ea']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   valueAxis: {
     axisLine: {
       show: false,
       lineStyle: {
-        color: '#e5e5ea',
-      },
+        color: '#e5e5ea'
+      }
     },
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#8e8e93',
-      },
+        color: '#8e8e93'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#e9ebf0',
+      color: '#e9ebf0'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#3c3f43'],
-      },
+        color: ['#3c3f43']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   logAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#3c3f43',
-      },
+        color: '#3c3f43'
+      }
     },
     axisTick: {
       show: true,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#e9ebf0',
+      color: '#e9ebf0'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#3c3f43'],
-      },
+        color: ['#3c3f43']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   timeAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#3c3f43',
-      },
+        color: '#3c3f43'
+      }
     },
     axisTick: {
       show: true,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#e9ebf0',
+      color: '#e9ebf0'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#3c3f43'],
-      },
+        color: ['#3c3f43']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   toolbox: {
     iconStyle: {
-      borderColor: '#999999',
+      borderColor: '#999999'
     },
     emphasis: {
-      iconStyle: {},
-    },
+      iconStyle: {}
+    }
   },
   legend: {
     textStyle: {
-      color: '#8e8e93',
-    },
+      color: '#8e8e93'
+    }
   },
   tooltip: {
     axisPointer: {
       lineStyle: {
         color: '#cccccc',
-        width: 1,
+        width: 1
       },
       crossStyle: {
         color: '#cccccc',
-        width: 1,
-      },
-    },
+        width: 1
+      }
+    }
   },
   timeline: {
     lineStyle: {
       color: '#293c55',
-      width: 1,
+      width: 1
     },
     itemStyle: {
       color: '#293c55',
-      borderWidth: 1,
+      borderWidth: 1
     },
     controlStyle: {
       color: '#293c55',
       borderColor: '#293c55',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     checkpointStyle: {
       color: '#e43c59',
-      borderColor: '#c23531',
+      borderColor: '#c23531'
     },
     label: {
-      color: '#293c55',
+      color: '#293c55'
     },
     emphasis: {
       itemStyle: {
-        color: '#a9334c',
+        color: '#a9334c'
       },
       controlStyle: {
         color: '#293c55',
         borderColor: '#293c55',
-        borderWidth: 0.5,
+        borderWidth: 0.5
       },
       label: {
-        color: '#293c55',
-      },
-    },
+        color: '#293c55'
+      }
+    }
   },
   visualMap: {
-    color: ['#c2edff', '#009de6'],
+    color: ['#c2edff', '#009de6']
   },
   dataZoom: {
     backgroundColor: 'rgba(47,69,84,0)',
@@ -372,19 +372,19 @@ const theme = {
     handleColor: '#a7b7cc',
     handleSize: '100%',
     textStyle: {
-      color: '#333333',
-    },
+      color: '#333333'
+    }
   },
   markPoint: {
     label: {
-      color: '#e9ebf0',
+      color: '#e9ebf0'
     },
     emphasis: {
       label: {
-        color: '#e9ebf0',
-      },
-    },
-  },
+        color: '#e9ebf0'
+      }
+    }
+  }
 };
 
 /**
@@ -392,8 +392,13 @@ const theme = {
  */
 const additionalSettings = {
   textStyle: {
-    color: '#e9ebf0',
+    color: '#e9ebf0'
   },
+  legend: {
+    textStyle: {
+      fontSize: 14
+    }
+  }
 };
 
 echarts.registerTheme('rsuite_dark', _merge(theme, additionalSettings));
diff --git a/src/theme/rsuite_light.ts b/src/theme/rsuite_light.ts
index a5683bf..84761c7 100644
--- a/src/theme/rsuite_light.ts
+++ b/src/theme/rsuite_light.ts
@@ -23,87 +23,87 @@ const theme = {
     '#df6ecd',
     '#8338ec',
     '#e6b980',
-    '#51E8FF',
+    '#51E8FF'
   ],
   backgroundColor: 'rgba(0,0,0,0)',
   textStyle: {},
   title: {
     textStyle: {
-      color: '#333333',
+      color: '#333333'
     },
     subtextStyle: {
-      color: '#aaaaaa',
-    },
+      color: '#aaaaaa'
+    }
   },
   line: {
     itemStyle: {
-      borderWidth: '0',
+      borderWidth: '0'
     },
     lineStyle: {
-      width: 2,
+      width: 2
     },
     symbolSize: '0',
     symbol: 'circle',
-    smooth: false,
+    smooth: false
   },
   radar: {
     itemStyle: {
-      borderWidth: '0',
+      borderWidth: '0'
     },
     lineStyle: {
-      width: 2,
+      width: 2
     },
     symbolSize: '0',
     symbol: 'circle',
-    smooth: false,
+    smooth: false
   },
   bar: {
     itemStyle: {
       barBorderWidth: 0,
-      barBorderColor: '#ccc',
-    },
+      barBorderColor: '#ccc'
+    }
   },
   pie: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   scatter: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   boxplot: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   parallel: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   sankey: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   funnel: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   gauge: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
-    },
+      borderColor: '#ccc'
+    }
   },
   candlestick: {
     itemStyle: {
@@ -111,17 +111,17 @@ const theme = {
       color0: '#001852',
       borderColor: '#f5e8c8',
       borderColor0: '#b8d2c7',
-      borderWidth: 1,
-    },
+      borderWidth: 1
+    }
   },
   graph: {
     itemStyle: {
       borderWidth: 0,
-      borderColor: '#ccc',
+      borderColor: '#ccc'
     },
     lineStyle: {
       width: 1,
-      color: '#aaaaaa',
+      color: '#aaaaaa'
     },
     symbolSize: '0',
     symbol: 'circle',
@@ -136,234 +136,234 @@ const theme = {
       '#df6ecd',
       '#8338ec',
       '#e6b980',
-      '#51E8FF',
+      '#51E8FF'
     ],
     label: {
-      color: '#eeeeee',
-    },
+      color: '#eeeeee'
+    }
   },
   map: {
     itemStyle: {
       areaColor: '#eeeeee',
       borderColor: '#444444',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     label: {
-      color: '#000000',
+      color: '#000000'
     },
     emphasis: {
       itemStyle: {
         areaColor: 'rgba(255,215,0,0.8)',
         borderColor: '#444444',
-        borderWidth: 1,
+        borderWidth: 1
       },
       label: {
-        color: 'rgb(100,0,0)',
-      },
-    },
+        color: 'rgb(100,0,0)'
+      }
+    }
   },
   geo: {
     itemStyle: {
       areaColor: '#eeeeee',
       borderColor: '#444444',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     label: {
-      color: '#000000',
+      color: '#000000'
     },
     emphasis: {
       itemStyle: {
         areaColor: 'rgba(255,215,0,0.8)',
         borderColor: '#444444',
-        borderWidth: 1,
+        borderWidth: 1
       },
       label: {
-        color: 'rgb(100,0,0)',
-      },
-    },
+        color: 'rgb(100,0,0)'
+      }
+    }
   },
   categoryAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#e5e5ea',
-      },
+        color: '#e5e5ea'
+      }
     },
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#575757',
+      color: '#575757'
     },
     splitLine: {
       show: false,
       lineStyle: {
-        color: ['#e5e5ea'],
-      },
+        color: ['#e5e5ea']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   valueAxis: {
     axisLine: {
       show: false,
       lineStyle: {
-        color: '#e5e5ea',
-      },
+        color: '#e5e5ea'
+      }
     },
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#8e8e93',
-      },
+        color: '#8e8e93'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#575757',
+      color: '#575757'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#e5e5ea'],
-      },
+        color: ['#e5e5ea']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   logAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#e5e5ea',
-      },
+        color: '#e5e5ea'
+      }
     },
     axisTick: {
       show: true,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#575757',
+      color: '#575757'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#e5e5ea'],
-      },
+        color: ['#e5e5ea']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   timeAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#e5e5ea',
-      },
+        color: '#e5e5ea'
+      }
     },
     axisTick: {
       show: true,
       lineStyle: {
-        color: '#333',
-      },
+        color: '#333'
+      }
     },
     axisLabel: {
       show: true,
-      color: '#575757',
+      color: '#575757'
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#e5e5ea'],
-      },
+        color: ['#e5e5ea']
+      }
     },
     splitArea: {
       show: false,
       areaStyle: {
-        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
-      },
-    },
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+      }
+    }
   },
   toolbox: {
     iconStyle: {
-      borderColor: '#999999',
+      borderColor: '#999999'
     },
     emphasis: {
-      iconStyle: {},
-    },
+      iconStyle: {}
+    }
   },
   legend: {
     textStyle: {
-      color: '#8e8e93',
-    },
+      color: '#8e8e93'
+    }
   },
   tooltip: {
     axisPointer: {
       lineStyle: {
         color: '#cccccc',
-        width: 1,
+        width: 1
       },
       crossStyle: {
         color: '#cccccc',
-        width: 1,
-      },
-    },
+        width: 1
+      }
+    }
   },
   timeline: {
     lineStyle: {
       color: '#293c55',
-      width: 1,
+      width: 1
     },
     itemStyle: {
       color: '#293c55',
-      borderWidth: 1,
+      borderWidth: 1
     },
     controlStyle: {
       color: '#293c55',
       borderColor: '#293c55',
-      borderWidth: 0.5,
+      borderWidth: 0.5
     },
     checkpointStyle: {
       color: '#e43c59',
-      borderColor: '#c23531',
+      borderColor: '#c23531'
     },
     label: {
-      color: '#293c55',
+      color: '#293c55'
     },
     emphasis: {
       itemStyle: {
-        color: '#a9334c',
+        color: '#a9334c'
       },
       controlStyle: {
         color: '#293c55',
         borderColor: '#293c55',
-        borderWidth: 0.5,
+        borderWidth: 0.5
       },
       label: {
-        color: '#293c55',
-      },
-    },
+        color: '#293c55'
+      }
+    }
   },
   visualMap: {
-    color: ['#c2edff', '#009de6'],
+    color: ['#c2edff', '#009de6']
   },
   dataZoom: {
     backgroundColor: 'rgba(47,69,84,0)',
@@ -372,25 +372,30 @@ const theme = {
     handleColor: '#a7b7cc',
     handleSize: '100%',
     textStyle: {
-      color: '#333333',
-    },
+      color: '#333333'
+    }
   },
   markPoint: {
     label: {
-      color: '#eeeeee',
+      color: '#eeeeee'
     },
     emphasis: {
       label: {
-        color: '#eeeeee',
-      },
-    },
-  },
+        color: '#eeeeee'
+      }
+    }
+  }
 };
 
 const additionalSettings = {
   textStyle: {
-    color: '#575757',
+    color: '#575757'
   },
+  legend: {
+    textStyle: {
+      fontSize: 14
+    }
+  }
 };
 
 echarts.registerTheme('rsuite_light', _merge(additionalSettings, theme));