Browse Source

图表主题替换

zhuth 6 years ago
parent
commit
3179614409
2 changed files with 66 additions and 83 deletions
  1. 12 3
      src/models/parseChartOption.js
  2. 54 80
      src/models/theme/default.json

+ 12 - 3
src/models/parseChartOption.js

@@ -112,7 +112,10 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
                 data: s.value,
                 // stack: s.stack
             }
-        }) 
+        }),
+        dataZoom: {
+            show: false
+        }
     }, themeConfig, styleConfig);
     
     return option;
@@ -228,7 +231,10 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
                     return [m.date, m.value]
                 }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
             }
-        })
+        }),
+        dataZoom: {
+            show: false
+        }
     }, themeConfig, styleConfig);
 
     return option;
@@ -281,7 +287,10 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
                     return [m.date, m.value]
                 })
             }
-        })
+        }),
+        dataZoom: {
+            show: false
+        }
     }, themeConfig, styleConfig);
 
     return option;

+ 54 - 80
src/models/theme/default.json

@@ -1,14 +1,34 @@
 {
     "base": {
         "color": [
-            "#3fb1e3",
-            "#6be6c1",
-            "#626c91",
-            "#a0a7e6",
-            "#c4ebad",
-            "#96dee8"
+            "#516b91",
+            "#59c4e6",
+            "#edafda",
+            "#93b7e3",
+            "#a5e7f0",
+            "#cbb0e3",
+            "#2ec7c9",
+            "#b6a2de",
+            "#5ab1ef",
+            "#ffb980",
+            "#d87a80",
+            "#8d98b3",
+            "#e5cf0d",
+            "#97b552",
+            "#95706d",
+            "#dc69aa",
+            "#07a2a4",
+            "#9a7fd1",
+            "#588dd5",
+            "#f5994e",
+            "#c05050",
+            "#59678c",
+            "#c9ab00",
+            "#7eb00a",
+            "#6f5553",
+            "#c14089"
         ],
-        "backgroundColor": "rgba(252,252,252,0)",
+        "backgroundColor": "rgba(0,0,0,0)",
         "textStyle": {},
         "legend": {
             "textStyle": {
@@ -26,49 +46,49 @@
                     "width": 1
                 }
             }
-        }
-    },
-    "line": {
-        "line": {
-            "itemStyle": {
-                "normal": {
-                    "borderWidth": "2"
-                }
-            },
-            "lineStyle": {
-                "normal": {
-                    "width": "3"
-                }
-            },
-            "symbolSize": "8",
-            "symbol": "emptyCircle",
-            "smooth": false
         },
         "dataZoom": {
-            "backgroundColor": "rgba(255,255,255,0)",
-            "dataBackgroundColor": "rgba(222,222,222,1)",
-            "fillerColor": "rgba(114,230,212,0.25)",
-            "handleColor": "#cccccc",
+            "backgroundColor": "rgba(0,0,0,0)",
+            "dataBackgroundColor": "rgba(255,255,255,0.3)",
+            "fillerColor": "rgba(167,183,204,0.4)",
+            "handleColor": "#a7b7cc",
             "handleSize": "100%",
             "textStyle": {
-                "color": "#999999"
+                "color": "#333"
             }
         },
         "markPoint": {
             "label": {
                 "normal": {
                     "textStyle": {
-                        "color": "#ffffff"
+                        "color": "#eee"
                     }
                 },
                 "emphasis": {
                     "textStyle": {
-                        "color": "#ffffff"
+                        "color": "#eee"
                     }
                 }
             }
         }
     },
+    "line": {
+        "line": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": "2"
+                }
+            },
+            "lineStyle": {
+                "normal": {
+                    "width": "2"
+                }
+            },
+            "symbolSize": "6",
+            "symbol": "emptyCircle",
+            "smooth": false
+        }
+    },
     "bar": {
         "bar": {
             "itemStyle": {
@@ -81,30 +101,6 @@
                     "barBorderColor": "#ccc"
                 }
             }
-        },
-        "dataZoom": {
-            "backgroundColor": "rgba(255,255,255,0)",
-            "dataBackgroundColor": "rgba(222,222,222,1)",
-            "fillerColor": "rgba(114,230,212,0.25)",
-            "handleColor": "#cccccc",
-            "handleSize": "100%",
-            "textStyle": {
-                "color": "#999999"
-            }
-        },
-        "markPoint": {
-            "label": {
-                "normal": {
-                    "textStyle": {
-                        "color": "#ffffff"
-                    }
-                },
-                "emphasis": {
-                    "textStyle": {
-                        "color": "#ffffff"
-                    }
-                }
-            }
         }
     },
     "pie": {
@@ -119,7 +115,9 @@
                     "borderColor": "#ccc"
                 }
             }
-        }
+        },
+        "dataZoom": null,
+        "markPoint": null
     },
     "scatter": {
         "scatter": {
@@ -133,30 +131,6 @@
                     "borderColor": "#ccc"
                 }
             }
-        },
-        "dataZoom": {
-            "backgroundColor": "rgba(255,255,255,0)",
-            "dataBackgroundColor": "rgba(222,222,222,1)",
-            "fillerColor": "rgba(114,230,212,0.25)",
-            "handleColor": "#cccccc",
-            "handleSize": "100%",
-            "textStyle": {
-                "color": "#999999"
-            }
-        },
-        "markPoint": {
-            "label": {
-                "normal": {
-                    "textStyle": {
-                        "color": "#ffffff"
-                    }
-                },
-                "emphasis": {
-                    "textStyle": {
-                        "color": "#ffffff"
-                    }
-                }
-            }
         }
     }
 }