visualization-design/public/theme/dark.json

{
    "color": [
        "#4583ff",
        "#37b3cc",
        "#258ca6",
        "#34bf6e",
        "#239957",
        "#3062da"
    ],
    "backgroundColor": "rgba(0,0,0,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#ffffff"
        },
        "subtextStyle": {
            "color": "#aaaaaa"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 4,
        "symbol": "circle",
        "smooth": false
    },
    "radar": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 4,
        "symbol": "circle",
        "smooth": false
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": "1",
            "barBorderColor": "#181818"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#fd1050",
            "color0": "#0cf49b",
            "borderColor": "#fd1050",
            "borderColor0": "#0cf49b",
            "borderWidth": 1
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": "1",
            "borderColor": "#181818"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaa"
        },
        "symbolSize": 4,
        "symbol": "circle",
        "smooth": false,
        "color": [
            "#4583ff",
            "#37b3cc",
            "#258ca6",
            "#34bf6e",
            "#239957",
            "#3062da"
        ],
        "label": {
            "color": "#ffffff"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0.26)"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "rgba(216,216,216,0.26)"
            }
        },
        "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": [
                    "#eeeeee"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0.26)"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(216,216,216,0.26)"
            }
        },
        "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": [
                    "#eeeeee"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0.26)"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "rgba(216,216,216,0.26)"
            }
        },
        "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": [
                    "#eeeeee"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0.26)"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "rgba(216,216,216,0.26)"
            }
        },
        "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": [
                    "#eeeeee"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#ffffff"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "rgba(255,255,255,0.7)"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "rgba(216,216,216,0.3)",
                "width": "1"
            },
            "crossStyle": {
                "color": "rgba(216,216,216,0.3)",
                "width": "1"
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#eeeeee",
            "width": 1
        },
        "itemStyle": {
            "color": "#dd6b66",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#eeeeee",
            "borderColor": "#eeeeee",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#e43c59",
            "borderColor": "#c23531"
        },
        "label": {
            "color": "#eeeeee"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#a9334c"
            },
            "controlStyle": {
                "color": "#eeeeee",
                "borderColor": "#eeeeee",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#eeeeee"
            }
        }
    },
    "visualMap": {
        "color": [
            "#bf444c"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(47,69,84,0)",
        "dataBackgroundColor": "rgba(255,255,255,0.3)",
        "fillerColor": "rgba(167,183,204,0.4)",
        "handleColor": "#a7b7cc",
        "handleSize": "100%",
        "textStyle": {
            "color": "#eeeeee"
        }
    },
    "markPoint": {
        "label": {
            "color": "#ffffff"
        },
        "emphasis": {
            "label": {
                "color": "#ffffff"
            }
        }
    }
}