增加图例

web/client/src/sections/quanju/containers/footer/build/Leftbottom.js

@@ -154,18 +154,39 @@ function Leftbottom(props) {
 
 //     }
 // },
-    legend: {
-      orient: "vertical",
-      itemWidth: 10,
-      itemHeight: 10,
-      right: '30%',
-      top: 'center',
-      align: 'left',
-      data: name,
-      textStyle: {
-        color: "#fff",
+legend: {
+  orient: "vertical",
+  itemWidth: 10,
+  itemHeight: 10,
+  // right: '30%',
+  left: '50%',
+  top: 'center',
+  align: 'left',
+  data: name,
+  formatter: (name) => {
+    for (let i = 0; i < option.series[1].data.length; i += 1) {
+      if (name === option.series[1].data[i].name) {
+        let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
+        return arr.join('\t');
+      }
+    }
+  },
+  textStyle: {
+    rich: {
+      a: {
+        color: '#E9F7FF',
+        fontSize: 14,
+        padding:[0,10]
       },
-    },
+      b: {
+        fontSize: 16,
+        fontFamily: 'YouSheBiaoTiHei',
+        color: '#fff',
+        padding:[0,0,0,15]
+      },
+    }
+  }
+},
     grid: {
       left: '10%'
     },

web/client/src/sections/quanju/containers/footer/build/Rightbottom.js

@@ -53,12 +53,34 @@ function Rightbottom(props) {
       orient: "vertical",
       itemWidth: 10,
       itemHeight: 10,
-      right: '30%',
+      // right: '30%',
+      left: '50%',
       top: 'center',
       align: 'left',
-      textStyle: {
-        color: "#fff",
+      data: name,
+      formatter: (name) => {
+        for (let i = 0; i < option.series[1].data.length; i += 1) {
+          if (name === option.series[1].data[i].name) {
+            let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
+            return arr.join('\t');
+          }
+        }
       },
+      textStyle: {
+        rich: {
+          a: {
+            color: '#E9F7FF',
+            fontSize: 14,
+            padding:[0,10]
+          },
+          b: {
+            fontSize: 16,
+            fontFamily: 'YouSheBiaoTiHei',
+            color: '#fff',
+            padding:[0,0,0,15]
+          },
+        }
+      }
     },
     grid: {
       left: '10%'