第1章 概述

SaCa DataViz在页面提供了6种配色方案，但是在具体的项目实施过程中，通常需要将DataViz与业务系统做一个集成，因此在配色上，也需要进行统一。本文档提供给DataViz开发人员一种调整DataViz配色的方法。

1.1 配色实现

SaCa DataViz的主题存储在其支撑库的dv_theme表中，如下：

其中，每一条数据对应一种主题配色，主题的配色主要存储在content字段，其数据结构如下：

{
    "qualitative": [
        "#1776B6",
        "#D7241F",
        "#FF7F00",
        "#24A322",
        "#9564BF",
        "#7F7F7F"
    ],
    "sequential": [
        "#1776B6",
        "#3E8DC2",
        "#65A5CD",
        "#8DBCD9",
        "#84D4E4",
        "#DBE8F0"
    ],
    "diverging": [
        "#00471D",
        "#228D47",
        "#3AB692",
        "#A3E2D7",
        "#CAF7F2",
        "#FFFFFD"
    ],
    "background": "#F7F7F7",                    //背景色，保留字段
    "backgroundImage": "",                      //背景图片，保留字段
    "text": "#000",                               //文字
    "title": "#000",                               //标题
    "subtitle": "#333",                           //子标题
    "legendText": "#222",                        //图例文字
    "tooltipBackground": "rgba(10,10,10,0.7)",   //提示框背景色
    "tooltipBorder": "#111",                      //提示框边框色
    "tooltipText": "#fff",                          //提示框文字
    "axisLine": "#333",                           //坐标轴
    "axisText": "#111",                           //坐标轴文字
    "axisGrid": "#ccc",                            //坐标轴grid
    "axisTick": "#222",                           //坐标轴刻度
    "visualMap": [                                //visualMap过渡色
        "#DBE8F0",
        "#65A5CD",
        "#1776B6"
    ],
    "widgetBorder": "#ddd",                      //widget边框色
    "widgetBackground": "rgba(238,238,238,.7)" //widget背景色
}

DataViz的配色方案中，主要分为两大块，一是主题色板，二是细节颜色。主题色板是指content字段中的qualitative、sequential、diverging，其中qualitative为分类色，主要用于具备分类特征的图表，如柱图、饼图等绝大多数图表；sequential为渐变色，主要用于具备渐变效果的图表，如地图、热力图等；diverging为对比色，保留；其余字段参考注释。

如若有需要，按照以上结构修改后重启服务即可，另外，需要重新制作UI图片，图片存储位置：

dataviz_file/file/theme中