diff --git a/src/renderers/Chart.tsx b/src/renderers/Chart.tsx
index 118aefae4..6423676c5 100644
--- a/src/renderers/Chart.tsx
+++ b/src/renderers/Chart.tsx
@@ -36,6 +36,11 @@ export interface ChartSchema extends BaseSchema {
    */
   type: 'chart';
 
+  /**
+   * Chart 主题配置
+   */
+  chartTheme?: any;
+
   /**
    * 图表配置接口
    */
@@ -244,6 +249,8 @@ export class Chart extends React.Component<ChartProps> {
 
   refFn(ref: any) {
     const chartRef = this.props.chartRef;
+    const {chartTheme} = this.props;
+
     if (ref) {
       Promise.all([
         import('echarts'),
@@ -259,7 +266,14 @@ export class Chart extends React.Component<ChartProps> {
       ]).then(([echarts, dataTool]: any) => {
         (window as any).echarts = echarts;
         echarts.dataTool = dataTool;
-        this.echarts = echarts.init(ref);
+        let theme = 'default';
+
+        if (chartTheme) {
+          echarts.registerTheme('custom', chartTheme);
+          theme = 'custom';
+        }
+
+        this.echarts = echarts.init(ref, theme);
         this.echarts.on('click', this.handleClick);
         this.unSensor = resizeSensor(ref, () => {
           const width = ref.offsetWidth;
diff --git a/src/themes/cxd.ts b/src/themes/cxd.ts
index 2017194ba..ecab00879 100644
--- a/src/themes/cxd.ts
+++ b/src/themes/cxd.ts
@@ -41,6 +41,415 @@ theme('cxd', {
     'range-control': {
       showInput: true,
       clearable: true
+    },
+
+    'chart': {
+      chartTheme: {
+        color: [
+          '#108cee',
+          '#545fc8',
+          '#f38900',
+          '#ea2e2e',
+          '#8a58bc',
+          '#04c1ba',
+          '#fbbe04',
+          '#5fb333',
+          '#0a7eb4',
+          '#304069',
+          '#c4ccd3'
+        ],
+        backgroundColor: '#f5f5f5',
+        textStyle: {},
+        title: {
+          textStyle: {
+            color: '#333'
+          },
+          subtextStyle: {
+            color: '#999999'
+          }
+        },
+        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: {
+          itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc'
+          }
+        },
+        pie: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        scatter: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        boxplot: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        parallel: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        sankey: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        funnel: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        gauge: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          }
+        },
+        candlestick: {
+          itemStyle: {
+            color: '#c23531',
+            color0: '#314656',
+            borderColor: '#c23531',
+            borderColor0: '#314656',
+            borderWidth: 1
+          }
+        },
+        graph: {
+          itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc'
+          },
+          lineStyle: {
+            width: 1,
+            color: '#aaa'
+          },
+          symbolSize: 4,
+          symbol: 'emptyCircle',
+          smooth: false,
+          color: [
+            '#108cee',
+            '#545fc8',
+            '#f38900',
+            '#ea2e2e',
+            '#8a58bc',
+            '#04c1ba',
+            '#fbbe04',
+            '#5fb333',
+            '#0a7eb4',
+            '#304069',
+            '#c4ccd3'
+          ],
+          label: {
+            color: '#f5f5f5'
+          }
+        },
+        map: {
+          itemStyle: {
+            normal: {
+              areaColor: '#eee',
+              borderColor: '#444',
+              borderWidth: 0.5
+            },
+            emphasis: {
+              areaColor: 'rgba(255,215,0,0.8)',
+              borderColor: '#444',
+              borderWidth: 1
+            }
+          },
+          label: {
+            normal: {
+              textStyle: {
+                color: '#000'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: 'rgb(100,0,0)'
+              }
+            }
+          }
+        },
+        geo: {
+          itemStyle: {
+            normal: {
+              areaColor: '#eee',
+              borderColor: '#444',
+              borderWidth: 0.5
+            },
+            emphasis: {
+              areaColor: 'rgba(255,215,0,0.8)',
+              borderColor: '#444',
+              borderWidth: 1
+            }
+          },
+          label: {
+            normal: {
+              textStyle: {
+                color: '#000'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: 'rgb(100,0,0)'
+              }
+            }
+          }
+        },
+        categoryAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#999999'
+            }
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: ['#ccc']
+            }
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+            }
+          }
+        },
+        valueAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#999999'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ['#eeeeee']
+            }
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+            }
+          }
+        },
+        logAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#999999'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ['#eeeeee']
+            }
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+            }
+          }
+        },
+        timeAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#999999'
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#999999'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ['#eeeeee']
+            }
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+            }
+          }
+        },
+        toolbox: {
+          iconStyle: {
+            normal: {
+              borderColor: '#999'
+            },
+            emphasis: {
+              borderColor: '#666'
+            }
+          }
+        },
+        legend: {
+          textStyle: {
+            color: '#333'
+          }
+        },
+        tooltip: {
+          axisPointer: {
+            lineStyle: {
+              color: '#ccc',
+              width: 1
+            },
+            crossStyle: {
+              color: '#ccc',
+              width: 1
+            }
+          }
+        },
+        timeline: {
+          lineStyle: {
+            color: '#293c55',
+            width: 1
+          },
+          itemStyle: {
+            normal: {
+              color: '#293c55',
+              borderWidth: 1
+            },
+            emphasis: {
+              color: '#a9334c'
+            }
+          },
+          controlStyle: {
+            normal: {
+              color: '#293c55',
+              borderColor: '#293c55',
+              borderWidth: 0.5
+            },
+            emphasis: {
+              color: '#293c55',
+              borderColor: '#293c55',
+              borderWidth: 0.5
+            }
+          },
+          checkpointStyle: {
+            color: '#e43c59',
+            borderColor: 'rgba(194,53,49, 0.5)'
+          },
+          label: {
+            normal: {
+              textStyle: {
+                color: '#293c55'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: '#293c55'
+              }
+            }
+          }
+        },
+        visualMap: {
+          color: ['#bf444c', '#d88273', '#f6efa6']
+        },
+        dataZoom: {
+          backgroundColor: 'rgba(47,69,84,0)',
+          dataBackgroundColor: 'rgba(47,69,84,0.3)',
+          fillerColor: 'rgba(167,183,204,0.4)',
+          handleColor: '#a7b7cc',
+          handleSize: '100%',
+          textStyle: {
+            color: '#333'
+          }
+        },
+        markPoint: {
+          label: {
+            color: '#f5f5f5'
+          },
+          emphasis: {
+            label: {
+              color: '#f5f5f5'
+            }
+          }
+        }
+      }
     }
   }
 });