图表主题样式替换实装

src/components/chart/list.jsx

@@ -27,6 +27,7 @@ class ChartList extends React.Component {
         super(props);
         this.state = {
             selectedRecord: null,
+
             visibleChooseDataSourceBox: false,
             visibleDistributeBox: false,
             visibleTransferBox: false,
@@ -34,11 +35,13 @@ class ChartList extends React.Component {
             visibleDeleteBox: false,
             visibleGroupManageMentBox: false, // 显示分组管理组件
             visibleDataPreviewBox: false,
+
             noGroup: false, // 显示未分组数据
+
             page: 1, // 分页器当前页码
-            pageSize: 15,// 每页最大展示卡片数 maxRowCards * maxRow
-            maxRowCards: 5, // 每行最大展示卡片数
-            maxRow: 3, // 每页最大行数
+            pageSize: 25,// 每页最大展示卡片数(maxRowCards * maxRow)
+            maxRowCards: 5, // 每行最大展示卡片数(无需自定义，有自动计算逻辑)
+            maxRow: 5, // 每页最大行数(手动设置，也许后期可以通过判断电脑性能自动设置该值？)
         }
         this.bodyRef = React.createRef();
     }

src/components/chart/resolveChartOption.js → src/components/chart/resolveChartThumbnailOption.js

@@ -4,132 +4,106 @@
 
 /**
  * @param option: Object 图表配置档
- * @param silent: Boolean 无交互
- * @param thumbnail: Boolean 缩略图模式
  */
-export default (option, silent, thumbnail) => {
+export default (option) => {
     let _option = { ...option };
     let viewType = _option.series ? (_option.series[0].type) : null;
 
     // 动画
-    _option.animation = !thumbnail;
+    _option.animation = false;
     // 悬浮提示
-    _option.tooltip = _option.tooltip ? {
-        ..._option.tooltip,
-        show: !silent && !thumbnail
-    } : {
-        show: !silent && !thumbnail,
-        trigger: "axis",
-        axisPointer: {
-            type: "cross",
-            label: {
-                backgroundColor: "#6a7985"
-            }
-        }
-    };
+    _option.tooltip = null;
     // 图例
-    _option.legend = _option.legend ? {
-        ..._option.legend,
-        show: !thumbnail && _option.legend.show,
-        selectedMode: !silent
-    } : {
-        show: !thumbnail,
-        selectedMode: !silent
-    }
+    _option.legend = null;
     // 容器
-    _option.grid = _option.grid ? {
-        left: thumbnail ? 10 : (_option.grid.left ? _option.grid.left : '10%'),
-        right: thumbnail ? 10 : (_option.grid.right ? _option.grid.right : '10%'),
-        top: thumbnail ? 10 : (_option.grid.top ? _option.grid.top : 60),
-        bottom: thumbnail ? 10 : (_option.grid.bottom ? _option.grid.bottom : 60),
-        containLabel: !thumbnail
-    } : {
-        left: thumbnail ? 10 : '10%',
-        right: thumbnail ? 10 : '10%',
-        top: thumbnail ? 10 : 60,
-        bottom: thumbnail ? 10 : 60,
-        containLabel: !thumbnail
+    _option.grid = {
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+        containLabel: false
     }
+    _option.dataZoom = null;
     // 图形
     if(viewType ==='bar') { // 柱状图
         _option.series = _option.series.map(s => ({
-            ...s, showSymbol: !thumbnail, silent,
+            ...s, showSymbol: false, silent: true,
         }));
         // x轴
         _option.xAxis ? (_option.xAxis.length > 0 ? (
             _option.xAxis[0].axisLabel = {
                 ..._option.xAxis[0].axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         ) : (
             _option.xAxis.axisLabel = {
                 ..._option.xAxis.axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         )) : _option.xAxis = {
             axisLabel: {
-                show: !thumbnail,
+                show: false,
             } 
         };
         // y轴
         _option.yAxis ? (_option.yAxis.length > 0 ? (
             _option.yAxis[0].axisLabel = {
                 ..._option.yAxis[0].axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         ) : (
             _option.yAxis.axisLabel = {
                 ..._option.yAxis.axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         )) : _option.yAxis = {
             axisLabel: {
-                show: !thumbnail,
+                show: false,
             } 
         };
     }else if(viewType === 'line') { // 折线图
         _option.series = _option.series.map(s => ({
-            ...s, showSymbol: !thumbnail, silent
+            ...s, showSymbol: false, silent: true
         }));
         // x轴
         _option.xAxis ? (_option.xAxis.length > 0 ? (
             _option.xAxis[0].axisLabel = {
                 ..._option.xAxis[0].axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         ) : (
             _option.xAxis.axisLabel = {
                 ..._option.xAxis.axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         )) : _option.xAxis = {
             axisLabel: {
-                show: !thumbnail,
+                show: false,
             } 
         };
         // y轴
         _option.yAxis ? (_option.yAxis.length > 0 ? (
             _option.yAxis[0].axisLabel = {
                 ..._option.yAxis[0].axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         ) : (
             _option.yAxis.axisLabel = {
                 ..._option.yAxis.axisLabel,
-                show: !thumbnail,
+                show: false,
             }
         )) : _option.yAxis = {
             axisLabel: {
-                show: !thumbnail,
+                show: false,
             } 
         };
     }else if(viewType === 'pie') { // 饼图
         _option.series = _option.series.map(s => ({
-            ...s, label: { show: !silent }, labelLine: { show: !silent }, silent
+            ...s, label: { show: false }, labelLine: { show: false }, silent: true
         }));
     }else if(viewType === 'scatter') { // 散点图
         _option.series = _option.series.map(s => ({
-            ...s, silent
+            ...s, silent: true
         }));
     }
     

src/components/chart/thumbnail.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import Echarts from 'echarts-for-react'
-import resolveChartOption from './resolveChartOption'
+import resolveChartThumbnailOption from './resolveChartThumbnailOption'
 
 const Thumbnail = ({ style, type, code, option }) => {
-    const newOption = resolveChartOption(option, true, true);
+    const newOption = resolveChartThumbnailOption(option);
     const viewType = ['bar', 'line', 'pie', 'scatter'].indexOf(type) !== -1 ? 'echarts' :
         (['aggregateTable', 'dataView'].indexOf(type) !== -1 ? 'table' : 'default');
         

src/components/chartDesigner/charts/echartsView.jsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import Echarts from 'echarts-for-react'
 import { connect } from 'dva'
-import { deepAssign, hashcode } from '../../../utils/baseUtils'
+import { hashcode } from '../../../utils/baseUtils'
 import EmptyContent from '../../common/emptyContent'
 
-const EchartsView = ({ chartDesigner, dispatch, optionConfig }) => {
+const EchartsView = ({ chartDesigner }) => {
     const { chartOption } = chartDesigner;
-    const option = deepAssign(chartOption, optionConfig);
-    if(!option.series) {
+    if(!chartOption.series) {
         return <EmptyContent />
     }else {
         return <Echarts
-        key={hashcode(option)}
-        option={option}
+        key={hashcode(chartOption)}
+        option={chartOption}
         className='rc-echarts'
         style={{height: '100%'}}
     />

src/components/chartDesigner/content.jsx

@@ -24,7 +24,6 @@ class ChartDesignerContent extends React.Component {
         super(props);
         this.state = {
             isOwner: false,
-            animation: false,
             autoRefresh: true,
             collapsed: false,
             contentSize: {
@@ -56,7 +55,7 @@ class ChartDesignerContent extends React.Component {
 
     render() {
         const { chartDesigner, dispatch } = this.props;
-        const { isOwner, animation, autoRefresh } = this.state;
+        const { isOwner, autoRefresh } = this.state;
         const { baseConfig } = chartDesigner;
         const { viewType } = baseConfig;
 
@@ -71,16 +70,16 @@ class ChartDesignerContent extends React.Component {
         }else if(viewType === 'line') {
             configForm = (<LineConfigForm autoRefresh={autoRefresh}/>);
             // optionConfig 可以用来放替换属性(已做深拷贝替换)
-            chartView = (<EchartsView optionConfig={{ animation }}/>);
+            chartView = (<EchartsView />);
         }else if(viewType === 'bar') {
             configForm = (<BarConfigForm autoRefresh={autoRefresh}/>);
-            chartView = (<EchartsView optionConfig={{ animation, barMaxWidth: '50%' }}/>);
+            chartView = (<EchartsView />);
         }else if(viewType === 'pie') {
             configForm = (<PieConfigForm autoRefresh={autoRefresh}/>);
-            chartView = (<EchartsView optionConfig={{ animation }}/>);
+            chartView = (<EchartsView />);
         }else if(viewType === 'scatter') {
             configForm = (<ScatterConfigForm autoRefresh={autoRefresh}/>);
-            chartView = (<EchartsView optionConfig={{ animation }}/>);
+            chartView = (<EchartsView />);
         }else {
             chartView = <EmptyContent />
         }

src/components/common/dataPreview/dataPreview.less

@@ -35,7 +35,7 @@
                                     
                                     .ant-table-body {
                                         margin-top: 0;
-                                        height: calc(~"100% - 38px");
+                                        // height: calc(~"100% - 41px");
                                     }
                                 }
                             }

src/components/common/thumbnail.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import Echarts from 'echarts-for-react'
-import resolveChartOption from '../chart/resolveChartOption'
-/**
- * 此Thumbnail组件尝试同时封装dashboard和chart的thumbnail组件
- *
- * @param {*} { style, type, code, option }
- * @returns
- */
-const Thumbnail = ({ style, type, code, option, mode, thumbnail }) => {
-    if (mode === 'chart') {
-        const newOption = resolveChartOption(option, true, true);
-        const viewType = ['bar', 'line', 'pie', 'scatter'].indexOf(type) !== -1 ? 'echarts' :
-            (['aggregateTable', 'dataView'].indexOf(type) !== -1 ? 'table' : 'default');
-
-        return (
-            <div style={{ ...style, width: '100%', height: '100%' }}>
-                {viewType === 'echarts' ? <Echarts
-                    key={code}
-                    option={newOption}
-                    className='rc-echarts'
-                    style={{ height: '100%' }}
-                /> : (viewType === 'table' ? <div className='table-default'></div> : <div className='chart-default'></div>)} 
-            </div>
-        );
-    }
-
-    if (mode === 'dashboard') {
-        if (thumbnail === null) {
-            return (
-                <div style={{ width: '100%', height: '100%' }}>
-                    <div className='dashboard-default'></div>
-                </div>
-            );
-        }
-        return (
-            <div style={{ width: '100%', height: '100%' }}>
-                <img src={thumbnail} alt={code} width='100%' height='100%'></img>
-            </div>
-        );
-    }
-
-    return;
-    
-}
-
-export default Thumbnail;

src/components/dashboardDesigner/chartView.jsx

@@ -3,7 +3,6 @@ import Echarts from 'echarts-for-react'
 import { Table, Spin, Icon } from 'antd'
 import RichTextEditor from './richTextEditor'
 import { connect } from 'dva'
-// import resolveChartOption from '../chart/resolveChartOption'
 import { isEqual, hashcode } from '../../utils/baseUtils'
 import EmptyContent from '../common/emptyContent/index'
 
@@ -63,7 +62,6 @@ class ChartView extends React.Component {
         
         if(viewType === 'chart') { // 图表类型
             if(chartOption) {
-                // let newOption = resolveChartOption(chartOption, editMode, false);
                 let newOption = chartOption;
                 let type = ['bar', 'line', 'pie', 'scatter'].indexOf(chartType) !== -1 ? 'echarts' :
                     (['aggregateTable', 'dataView'].indexOf(chartType) !== -1 ? 'table' : 'default');

src/models/chartDesigner.js

@@ -57,7 +57,8 @@ export default {
             lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, threshold: 20 },
             scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
-            styleConfig: { bar: { backgroundColor: '#ffffff' } },
+            theme: 'default',
+            styleConfig: { bar: {}, line: {}, pie: {}, scatter: {} },
             otherConfig:{},
             description: '',
             filters: [],
@@ -337,7 +338,7 @@ export default {
         *fetchBarData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, barConfig, filters } = chartDesigner;
+                const { code, barConfig, filters, theme, styleConfig } = chartDesigner;
                 const body = {
                     id: code,
                     groups: barConfig.groupBy && barConfig.groupBy.key ? [barConfig.groupBy.key] : [],
@@ -360,7 +361,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('bar', res.data.data, barConfig);
+                    let option = parseChartOption('bar', res.data.data, barConfig, theme, styleConfig.bar);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求柱状图数据失败: ' + (res.err || res.data.msg));
@@ -375,7 +376,7 @@ export default {
         *fetchPieData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, pieConfig, filters } = chartDesigner;
+                const { code, pieConfig, filters, theme, styleConfig } = chartDesigner;
                 const body = {
                     id: code,
                     legendData: {
@@ -398,7 +399,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('pie', res.data.data, pieConfig);
+                    let option = parseChartOption('pie', res.data.data, pieConfig, theme, styleConfig.pie);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求饼图数据失败: ' + (res.err || res.data.msg));
@@ -413,7 +414,7 @@ export default {
         *fetchLineData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, lineConfig, filters } = chartDesigner;
+                const { code, lineConfig, filters, theme, styleConfig } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -435,7 +436,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('line', res.data.data, lineConfig);
+                    let option = parseChartOption('line', res.data.data, lineConfig, theme, styleConfig.line);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求折线图数据失败: ' + (res.err || res.data.msg));
@@ -450,7 +451,7 @@ export default {
         *fetchScatterData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, scatterConfig, filters } = chartDesigner;
+                const { code, scatterConfig, filters, theme, styleConfig } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -472,7 +473,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('scatter', res.data.data, scatterConfig);
+                    let option = parseChartOption('scatter', res.data.data, scatterConfig, theme, styleConfig.scatter);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求散点图数据失败: ' + (res.err || res.data.msg));
@@ -487,7 +488,7 @@ export default {
         *fetchDataViewData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, dataViewConfig, filters } = chartDesigner;
+                const { code, dataViewConfig, filters, theme, styleConfig } = chartDesigner;
                 const { page, pageSize } = action;
                 const body = {
                     id: code,
@@ -507,7 +508,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('dataView', res.data.data, dataViewConfig);
+                    let option = parseChartOption('dataView', res.data.data, dataViewConfig, theme, styleConfig.dataView);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求列表数据失败: ' + (res.err || res.data.msg));
@@ -522,7 +523,7 @@ export default {
         *fetchAggregateTableData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, aggregateTableConfig, filters } = chartDesigner;
+                const { code, aggregateTableConfig, filters, theme, styleConfig } = chartDesigner;
                 const { targetColumn, statistics } = aggregateTableConfig;
 
                 const body = {
@@ -543,7 +544,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('aggregateTable', res.data.data, aggregateTableConfig);
+                    let option = parseChartOption('aggregateTable', res.data.data, aggregateTableConfig, theme, styleConfig.aggregateTable);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求统计数据失败: ' + (res.err || res.data.msg));

src/models/parseChartOption.js

@@ -3,36 +3,45 @@
  */
 import moment from 'moment'
 import EllipsisTooltip from '../components/common/ellipsisTooltip/index'
+import { deepAssign } from '../utils/baseUtils'
 import STATISTICS_OPTION from '../components/chartDesigner/sections/statisticsOption.json'
+import themes from './theme/index'
 
-export default function(viewType, data, chartConfig) {
+export default function(viewType, data, chartConfig, themeName, styleConfig) {
     if(!data) {
         return {};
     }
     try {
-        let o;
+        let theme = themes[themeName] || themes['default']
+        let o, themeConfig;
         switch(viewType) {
             case 'bar': {
-                o = barOption(data, chartConfig);
+                themeConfig = Object.assign({}, theme.base, theme.bar);
+                o = barOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }
             case 'pie': {
-                o = pieOption(data, chartConfig);
+                themeConfig = Object.assign({}, theme.base, theme.pie);
+                o = pieOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }
             case 'line': {
-                o = lineOption(data, chartConfig);
+                themeConfig = Object.assign({}, theme.base, theme.line);
+                o = lineOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }
             case 'scatter': {
-                o = scatterOption(data, chartConfig);
+                themeConfig = Object.assign({}, theme.base, theme.scatter);
+                o = scatterOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }
             case 'aggregateTable': {
-                o = aggregateTableOption(data, chartConfig);
+                themeConfig = theme.aggregateTable;
+                o = aggregateTableOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }case 'dataView' : {
-                o = dataViewOption(data, chartConfig);
+                themeConfig = theme.dataView;
+                o = dataViewOption(data, chartConfig, themeConfig, styleConfig);
                 break;
             }
             default:{
@@ -46,12 +55,12 @@ export default function(viewType, data, chartConfig) {
     }
 }
 
-function barOption(data, barConfig) {
+function barOption(data, barConfig, themeConfig, styleConfig) {
     let xTitle = barConfig.xAxis?`${barConfig.xAxis.column.label}${barConfig.xAxis.granularity.value?'('+barConfig.xAxis.granularity.label+')':''}`:null
     let yTitle = barConfig.yAxis?`${barConfig.yAxis.column.label}${barConfig.yAxis.gauge.value?'('+barConfig.yAxis.gauge.label+')':''}`:null
     data.serieses = data.serieses || [];
 
-    let option = {
+    let option = deepAssign({
         tooltip : {
             trigger: "axis",
             axisPointer: {
@@ -104,15 +113,15 @@ function barOption(data, barConfig) {
                 // stack: s.stack
             }
         }) 
-    }
+    }, themeConfig, styleConfig);
     
     return option;
 }
 
-function pieOption(data, pieConfig) {
+function pieOption(data, pieConfig, themeConfig, styleConfig) {
     let columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
       
-    let option = {
+    let option = deepAssign({
         tooltip : {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -182,17 +191,17 @@ function pieOption(data, pieConfig) {
                 }
             }
         ]
-    };
+    }, themeConfig, styleConfig);
 
     return option;
 }
 
-function lineOption(data, lineConfig) {
+function lineOption(data, lineConfig, themeConfig, styleConfig) {
     let xTitle = lineConfig.xAxis?`${lineConfig.xAxis.column.label}${lineConfig.xAxis.granularity.value?'('+lineConfig.xAxis.granularity.label+')':''}`:null
     let yTitle = lineConfig.yAxis?`${lineConfig.yAxis.column.label}${lineConfig.yAxis.gauge.value?'('+lineConfig.yAxis.gauge.label+')':''}`:null
     data.serieses = data.serieses || [];
 
-    let option = {
+    let option = deepAssign({
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -220,16 +229,16 @@ function lineOption(data, lineConfig) {
                 }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
             }
         })
-    };
+    }, themeConfig, styleConfig);
 
     return option;
 }
 
-function scatterOption(data, scatterConfig) {
+function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
     let xTitle = scatterConfig.xAxis?`${scatterConfig.xAxis.column.label}${scatterConfig.xAxis.granularity.value?'('+scatterConfig.xAxis.granularity.label+')':''}`:null
     let yTitle = scatterConfig.yAxis?`${scatterConfig.yAxis.column.label}${scatterConfig.yAxis.gauge.value?'('+scatterConfig.yAxis.gauge.label+')':''}`:null
     
-    let option = {
+    let option = deepAssign({
         tooltip : {
             showDelay : 0,
             axisPointer:{
@@ -273,12 +282,12 @@ function scatterOption(data, scatterConfig) {
                 })
             }
         })
-    };
+    }, themeConfig, styleConfig);
 
     return option;
 }
 
-function aggregateTableOption( data, aggregateTableConfig) {
+function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleConfig) {
     const resData = data.valueList;
     const { targetColumn, statistics } = aggregateTableConfig;
     
@@ -344,7 +353,7 @@ function aggregateTableOption( data, aggregateTableConfig) {
     return option;
 }
 
-function dataViewOption(data, dataViewConfig) {
+function dataViewOption(data, dataViewConfig, themeConfig, styleConfig) {
     const { list, pageNum, pageSize, pages, total } = data.valueList;
 
     let columns = dataViewConfig.viewColumns || [];

src/models/theme/default.json

@@ -0,0 +1,162 @@
+{
+    "base": {
+        "color": [
+            "#3fb1e3",
+            "#6be6c1",
+            "#626c91",
+            "#a0a7e6",
+            "#c4ebad",
+            "#96dee8"
+        ],
+        "backgroundColor": "rgba(252,252,252,0)",
+        "textStyle": {},
+        "legend": {
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "tooltip": {
+            "axisPointer": {
+                "lineStyle": {
+                    "color": "#cccccc",
+                    "width": 1
+                },
+                "crossStyle": {
+                    "color": "#cccccc",
+                    "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",
+            "handleSize": "100%",
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "markPoint": {
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#ffffff"
+                    }
+                },
+                "emphasis": {
+                    "textStyle": {
+                        "color": "#ffffff"
+                    }
+                }
+            }
+        }
+    },
+    "bar": {
+        "bar": {
+            "itemStyle": {
+                "normal": {
+                    "barBorderWidth": 0,
+                    "barBorderColor": "#ccc"
+                },
+                "emphasis": {
+                    "barBorderWidth": 0,
+                    "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": {
+        "pie": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        }
+    },
+    "scatter": {
+        "scatter": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "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"
+                    }
+                }
+            }
+        }
+    }
+}

src/models/theme/index.js

@@ -0,0 +1,5 @@
+import defaultTheme from './default.json'
+
+export default {
+    default: defaultTheme,
+}