ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/lib/utils/chart-theme-dark.cjs

@@ -17,10 +17,10 @@ const ChartThemeDark = {
   textStyle: {},
   title: {
     textStyle: {
-      color: "#f2f2f2"
+      color: "#e8e8e8"
     },
     subtextStyle: {
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     }
   },
   line: {
@@ -28,7 +28,7 @@ const ChartThemeDark = {
       borderWidth: 1
     },
     lineStyle: {
-      width: "2"
+      width: 2
     },
     symbolSize: 4,
     symbol: "emptyCircle",
@@ -39,7 +39,7 @@ const ChartThemeDark = {
       borderWidth: 1
     },
     lineStyle: {
-      width: "2"
+      width: 2
     },
     symbolSize: 4,
     symbol: "emptyCircle",
@@ -48,64 +48,64 @@ const ChartThemeDark = {
   bar: {
     barCategoryGap: "50%",
     itemStyle: {
-      barBorderWidth: "0",
+      barBorderWidth: 0,
       barBorderColor: "#000"
     }
   },
   pie: {
     itemStyle: {
-      borderWidth: "2",
+      borderWidth: 2,
       borderColor: "#000"
     }
   },
   scatter: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   boxplot: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   parallel: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   sankey: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   funnel: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   gauge: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     }
   },
   candlestick: {
     itemStyle: {
-      color: "#fd1050",
-      color0: "#0cf49b",
-      borderColor: "#fd1050",
-      borderColor0: "#0cf49b",
+      color: "#ff4d4f",
+      color0: "#52c41a",
+      borderColor: "#ff4d4f",
+      borderColor0: "#52c41a",
       borderWidth: 1
     }
   },
   graph: {
     itemStyle: {
-      borderWidth: "0",
+      borderWidth: 0,
       borderColor: "#000"
     },
     lineStyle: {
@@ -128,50 +128,50 @@ const ChartThemeDark = {
       "#f08bb4"
     ],
     label: {
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     }
   },
   map: {
     itemStyle: {
-      areaColor: "#202020",
+      areaColor: "#1f1f1f",
       borderColor: "#303030",
       borderWidth: 1
     },
     label: {
-      color: "#f2f2f2",
+      color: "#e8e8e8",
       textBorderColor: "#000",
       textBorderWidth: 1
     },
     emphasis: {
       itemStyle: {
-        areaColor: "rgba(255,215,0,0.8)",
-        borderColor: "#303030",
+        areaColor: "#ffc53d",
+        borderColor: "#595959",
         borderWidth: 1
       },
       label: {
-        color: "#f2f2f2"
+        color: "#ffffff"
       }
     }
   },
   geo: {
     itemStyle: {
-      areaColor: "#202020",
+      areaColor: "#1f1f1f",
       borderColor: "#303030",
       borderWidth: 1
     },
     label: {
-      color: "#f2f2f2",
+      color: "#e8e8e8",
       textBorderColor: "#000",
       textBorderWidth: 1
     },
     emphasis: {
       itemStyle: {
-        areaColor: "rgba(255,215,0,0.8)",
-        borderColor: "#303030",
+        areaColor: "#ffc53d",
+        borderColor: "#595959",
         borderWidth: 1
       },
       label: {
-        color: "#f2f2f2"
+        color: "#ffffff"
       }
     }
   },
@@ -197,7 +197,7 @@ const ChartThemeDark = {
     },
     axisLabel: {
       show: true,
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     },
     splitLine: {
       show: false,
@@ -209,7 +209,7 @@ const ChartThemeDark = {
     splitArea: {
       show: false,
       areaStyle: {
-        color: ["#202020"]
+        color: ["#1f1f1f"]
       }
     }
   },
@@ -228,7 +228,7 @@ const ChartThemeDark = {
     },
     axisLabel: {
       show: true,
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     },
     splitLine: {
       show: true,
@@ -240,7 +240,7 @@ const ChartThemeDark = {
     splitArea: {
       show: false,
       areaStyle: {
-        color: ["#202020"]
+        color: ["#1f1f1f"]
       }
     }
   },
@@ -259,7 +259,7 @@ const ChartThemeDark = {
     },
     axisLabel: {
       show: true,
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     },
     splitLine: {
       show: true,
@@ -270,7 +270,7 @@ const ChartThemeDark = {
     splitArea: {
       show: false,
       areaStyle: {
-        color: ["#202020"]
+        color: ["#1f1f1f"]
       }
     }
   },
@@ -289,7 +289,7 @@ const ChartThemeDark = {
     },
     axisLabel: {
       show: true,
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     },
     splitLine: {
       show: false,
@@ -300,7 +300,7 @@ const ChartThemeDark = {
     splitArea: {
       show: false,
       areaStyle: {
-        color: ["#202020"]
+        color: ["#1f1f1f"]
       }
     }
   },
@@ -310,7 +310,7 @@ const ChartThemeDark = {
     },
     emphasis: {
       iconStyle: {
-        borderColor: "#bfbfbf"
+        borderColor: "#a6a6a6"
       }
     }
   },
@@ -318,7 +318,7 @@ const ChartThemeDark = {
     inactiveColor: "#595959",
     inactiveBorderColor: "#000",
     textStyle: {
-      color: "#bfbfbf",
+      color: "#a6a6a6",
       lineHeight: 14
     }
   },
@@ -326,14 +326,14 @@ const ChartThemeDark = {
     axisPointer: {
       lineStyle: {
         color: "#434343",
-        width: "1"
+        width: 1
       },
       crossStyle: {
         color: "#434343",
-        width: "1"
+        width: 1
       }
     },
-    backgroundColor: "rgba(48,48,48,0.95)",
+    backgroundColor: "rgba(48, 48, 48, 0.95)",
     borderWidth: 0,
     textStyle: {
       color: "#ffffff"
@@ -342,16 +342,16 @@ const ChartThemeDark = {
   timeline: {
     lineStyle: {
       color: "#303030",
-      width: "1"
+      width: 1
     },
     itemStyle: {
       color: "#303030",
-      borderWidth: "1"
+      borderWidth: 1
     },
     controlStyle: {
       color: "#303030",
-      borderColor: "#303030",
-      borderWidth: "0.5"
+      borderColor: "#434343",
+      borderWidth: 0.5
     },
     checkpointStyle: {
       color: "#5b8ff9",
@@ -366,11 +366,11 @@ const ChartThemeDark = {
       },
       controlStyle: {
         color: "#303030",
-        borderColor: "#303030",
-        borderWidth: "0.5"
+        borderColor: "#434343",
+        borderWidth: 0.5
       },
       label: {
-        color: "#bfbfbf"
+        color: "#a6a6a6"
       }
     }
   },
@@ -379,19 +379,522 @@ const ChartThemeDark = {
     itemWidth: 15,
     color: ["#5b8ff9", "#294070", "#111c35"],
     textStyle: {
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     }
   },
   dataZoom: {
     handleSize: "100%",
     textStyle: {
-      color: "#bfbfbf"
+      color: "#a6a6a6"
     }
   },
   markPoint: {
     label: {
       color: "#ffffff"
     }
+  },
+  markLine: {
+    label: {
+      color: "#a6a6a6"
+    },
+    lineStyle: {
+      color: "#434343"
+    }
+  },
+  markArea: {
+    itemStyle: {
+      color: "#3a2a2a"
+    }
+  },
+  tree: {
+    itemStyle: {
+      color: "#a9d18e",
+      borderColor: "#a9d18e"
+    },
+    lineStyle: {
+      color: "#434343"
+    }
+  },
+  treemap: {
+    itemStyle: {
+      borderWidth: 1,
+      borderColor: "#000"
+    },
+    upperLabel: {
+      color: "#a6a6a6"
+    }
+  },
+  sunburst: {
+    itemStyle: {
+      borderWidth: 1,
+      borderColor: "#000"
+    }
+  },
+  calendar: {
+    itemStyle: {
+      color: "#1f1f1f",
+      borderColor: "#434343"
+    },
+    dayLabel: {
+      color: "#a6a6a6"
+    },
+    monthLabel: {
+      color: "#a6a6a6"
+    },
+    yearLabel: {
+      color: "#a6a6a6"
+    }
+  }
+};
+const ChartThemeDarkTransparent = {
+  color: [
+    "#5b8ff9",
+    "#61ddaa",
+    "#65789b",
+    "#f6bd16",
+    "#7262fd",
+    "#78d3f8",
+    "#9661bc",
+    "#f6903d",
+    "#008685",
+    "#f08bb4"
+  ],
+  backgroundColor: "rgba(0,0,0,0)",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "rgba(255, 255, 255, 0.88)"
+    },
+    subtextStyle: {
+      color: "rgba(255, 255, 255, 0.65)"
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  bar: {
+    barCategoryGap: "50%",
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: "#000"
+    }
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 2,
+      borderColor: "#000"
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: "rgba(253, 16, 80, 0.9)",
+      color0: "rgba(12, 244, 155, 0.9)",
+      borderColor: "rgba(253, 16, 80, 0.95)",
+      borderColor0: "rgba(12, 244, 155, 0.95)",
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#000"
+    },
+    lineStyle: {
+      width: 1,
+      color: "rgba(255, 255, 255, 0.18)"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false,
+    color: [
+      "#5b8ff9",
+      "#61ddaa",
+      "#65789b",
+      "#f6bd16",
+      "#7262fd",
+      "#78d3f8",
+      "#9661bc",
+      "#f6903d",
+      "#008685",
+      "#f08bb4"
+    ],
+    label: {
+      color: "rgba(255, 255, 255, 0.7)"
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: "rgba(255, 255, 255, 0.06)",
+      borderColor: "rgba(255, 255, 255, 0.1)",
+      borderWidth: 1
+    },
+    label: {
+      color: "rgba(255, 255, 255, 0.8)",
+      textBorderColor: "rgba(0, 0, 0, 0.6)",
+      textBorderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255, 193, 7, 0.3)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgba(255, 255, 255, 0.95)"
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "rgba(255, 255, 255, 0.06)",
+      borderColor: "rgba(255, 255, 255, 0.1)",
+      borderWidth: 1
+    },
+    label: {
+      color: "rgba(255, 255, 255, 0.8)",
+      textBorderColor: "rgba(0, 0, 0, 0.6)",
+      textBorderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255, 193, 7, 0.3)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgba(255, 255, 255, 0.95)"
+      }
+    }
+  },
+  grid: {
+    top: 30,
+    right: 20,
+    left: 60,
+    bottom: 40
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      },
+      alignWithLabel: true
+    },
+    axisLabel: {
+      show: true,
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        type: "dashed",
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(255, 255, 255, 0.1)"]
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "rgba(255, 255, 255, 0.35)"
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "rgba(255, 255, 255, 0.7)"
+      }
+    }
+  },
+  legend: {
+    inactiveColor: "rgba(255, 255, 255, 0.25)",
+    inactiveBorderColor: "#000",
+    textStyle: {
+      color: "rgba(255, 255, 255, 0.7)",
+      lineHeight: 14
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.18)",
+        width: 1
+      },
+      crossStyle: {
+        color: "rgba(255, 255, 255, 0.18)",
+        width: 1
+      }
+    },
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    borderWidth: 0,
+    textStyle: {
+      color: "rgba(255, 255, 255, 0.95)"
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: "rgba(255, 255, 255, 0.12)",
+      width: 1
+    },
+    itemStyle: {
+      color: "rgba(255, 255, 255, 0.18)",
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: "rgba(255, 255, 255, 0.18)",
+      borderColor: "rgba(255, 255, 255, 0.1)",
+      borderWidth: 0.5
+    },
+    checkpointStyle: {
+      color: "#5b8ff9",
+      borderColor: "#5b8ff9"
+    },
+    label: {
+      color: "rgba(255, 255, 255, 0.55)"
+    },
+    emphasis: {
+      itemStyle: {
+        color: "#5b8ff9"
+      },
+      controlStyle: {
+        color: "rgba(255, 255, 255, 0.18)",
+        borderColor: "rgba(255, 255, 255, 0.12)",
+        borderWidth: 0.5
+      },
+      label: {
+        color: "rgba(255, 255, 255, 0.7)"
+      }
+    }
+  },
+  visualMap: {
+    itemHeight: 80,
+    itemWidth: 15,
+    color: [
+      "rgba(91, 143, 249, 0.9)",
+      "rgba(41, 64, 112, 0.7)",
+      "rgba(17, 28, 53, 0.5)"
+    ],
+    textStyle: {
+      color: "rgba(255, 255, 255, 0.65)"
+    }
+  },
+  dataZoom: {
+    handleSize: "100%",
+    textStyle: {
+      color: "rgba(255, 255, 255, 0.65)"
+    }
+  },
+  markPoint: {
+    label: {
+      color: "rgba(255, 255, 255, 0.95)"
+    }
+  },
+  markLine: {
+    label: {
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    lineStyle: {
+      color: "rgba(255, 255, 255, 0.18)"
+    }
+  },
+  markArea: {
+    itemStyle: {
+      color: "rgba(255, 173, 177, 0.15)"
+    }
+  },
+  tree: {
+    itemStyle: {
+      color: "#a9d18e",
+      borderColor: "#a9d18e"
+    },
+    lineStyle: {
+      color: "rgba(255, 255, 255, 0.18)"
+    }
+  },
+  treemap: {
+    itemStyle: {
+      borderWidth: 1,
+      borderColor: "#000"
+    },
+    upperLabel: {
+      color: "rgba(255, 255, 255, 0.7)"
+    }
+  },
+  sunburst: {
+    itemStyle: {
+      borderWidth: 1,
+      borderColor: "#000"
+    }
+  },
+  calendar: {
+    itemStyle: {
+      color: "rgba(255, 255, 255, 0.06)",
+      borderColor: "rgba(255, 255, 255, 0.1)"
+    },
+    dayLabel: {
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    monthLabel: {
+      color: "rgba(255, 255, 255, 0.7)"
+    },
+    yearLabel: {
+      color: "rgba(255, 255, 255, 0.7)"
+    }
   }
 };
 exports.ChartThemeDark = ChartThemeDark;
+exports.ChartThemeDarkTransparent = ChartThemeDarkTransparent;