Theme

theme/dark.js

-define(function() {
-
-var theme = {
-    // 全图默认背景
-    backgroundColor: '#3e4957',
-
-    // 默认色板
-    color:  ['#d96666', '#8bced3', '#f0df95', '#b9dcae', '#76b8d1', '#ebe4af', '#bf9fc9', '#ea8092'],
-
-    // 图表标题
-    title: {
-        textStyle: {
-            fontWeight: 'normal',
-            color: '#fff'          // 主标题文字颜色
-        }
-    },
-
-    // 图例
-    legend: {
-        textStyle: {
-            color: '#ccc'          // 图例文字颜色
-        }
-    },
-
-    // 值域
-    dataRange: {
-        itemWidth: 15,
-        color: ['#FFF808','#21BCF9'],
-        textStyle: {
-            color: '#ccc'          // 值域文字颜色
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
         }
-    },
-
-    toolbox: {
-        color : ['#fff', '#fff', '#fff', '#fff'],
-        effectiveColor : '#FE8463',
-        disableColor: '#666'
-    },
-
-    // 提示框
-    tooltip: {
-        backgroundColor: 'rgba(250,250,250,0.8)',     // 提示背景颜色，默认为透明度为0.7的黑色
-        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
-            type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
-            lineStyle : {          // 直线指示器样式设置
-                color: '#aaa'
-            },
-            crossStyle: {
-                color: '#aaa'
-            },
-            shadowStyle : {                     // 阴影指示器样式设置
-                color: 'rgba(200,200,200,0.2)'
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    var contrastColor = '#eee';
+    var axisCommon = {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
             }
         },
-        textStyle: {
-            color: '#333'
-        }
-    },
-
-    // 区域缩放控制器
-    dataZoom: {
-        dataBackgroundColor: '#555',            // 数据背景颜色
-        fillerColor: 'rgba(200,200,200,0.2)',   // 填充颜色
-        handleColor: '#eee'     // 手柄颜色
-    },
-
-    // 网格
-    grid: {
-        borderWidth: 0
-    },
-
-    // 类目轴
-    categoryAxis: {
-        axisLine: {            // 坐标轴线
-            show: true,
+        axisTick: {
             lineStyle: {
-                width: 1,
-                color: ['#aaa']
+                color: contrastColor
             }
         },
-        axisTick: {            // 坐标轴小标记
-            show: false
-        },
-        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
-            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                color: '#ccc'
+        axisLabel: {
+            textStyle: {
+                color: contrastColor
             }
         },
-        splitLine: {           // 分隔线
-            show: false
-        }
-    },
-
-    // 数值型坐标轴默认参数
-    valueAxis: {
-        axisLine: {            // 坐标轴线
-            show: false
-        },
-        axisTick: {            // 坐标轴小标记
-            show: false
-        },
-        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
-            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                color: '#ccc'
+        splitLine: {
+            lineStyle: {
+                color: contrastColor
             }
         },
-        splitLine: {           // 分隔线
-            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
-                color: ['#aaa'],
-                type: 'dashed'
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
             }
-        },
-        splitArea: {           // 分隔区域
-            show: false
         }
-    },
-
-    polar : {
-        name : {
-            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                color: '#ccc'
+    };
+    echarts.registerTheme('dark', {
+        color: ['#dd6b66','#e69d87','#8dc1a9','#759aa0','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
+        backgroundColor: '#333',
+        legend: {
+            textStyle: {
+                color: contrastColor
             }
         },
-        axisLine: {            // 坐标轴线
-            lineStyle: {       // 属性lineStyle控制线条样式
-                color: '#ddd'
-            }
+        textStyle: {
+            color: contrastColor
         },
-        splitArea : {
-            show : true,
-            areaStyle : {
-                color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
+        title: {
+            textStyle: {
+                color: contrastColor
             }
         },
-        splitLine : {
-            lineStyle : {
-                color : '#ddd'
-            }
-        }
-    },
-
-    timeline : {
-        label: {
-            textStyle:{
-                color: '#ccc'
-            }
-        },
-        lineStyle : {
-            color : '#aaa'
-        },
-        controlStyle : {
-            normal : { color : '#fff'},
-            emphasis : { color : '#FE8463'}
+        line: {
+            symbol: 'circle'
         },
-        symbolSize : 3
-    },
-
-    // 折线图默认参数
-    line: {
-        smooth : true
-    },
-
-    // K线图默认参数
-    k: {
-        itemStyle: {
-            normal: {
-                color: '#FE8463',       // 阳线填充颜色
-                color0: '#9BCA63',      // 阴线填充颜色
-                lineStyle: {
-                    width: 1,
-                    color: '#FE8463',   // 阳线边框颜色
-                    color0: '#9BCA63'   // 阴线边框颜色
-                }
-            }
-        }
-    },
-
-    // 雷达图默认参数
-    radar : {
-        symbol: 'emptyCircle',    // 图形类型
-        symbolSize:3
-        //symbol: null,         // 拐点图形类型
-        //symbolRotate : null,  // 图形旋转控制
-    },
-
-    pie: {
-        itemStyle: {
-            normal: {
-                borderWidth: 1,
-                borderColor : 'rgba(255, 255, 255, 0.5)'
-            },
-            emphasis: {
-                borderWidth: 1,
-                borderColor : 'rgba(255, 255, 255, 1)'
-            }
-        }
-    },
-
-    map: {
-        itemStyle: {
-            normal: {
-                borderColor:'rgba(255, 255, 255, 0.5)',
-                areaStyle: {
-                    color: '#ddd'
-                },
-                label: {
-                    textStyle: {
-                        // color: '#ccc'
-                    }
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    brderColor: contrastColor
                 }
-            },
-            emphasis: {                 // 也是选中样式
-                areaStyle: {
-                    color: '#FE8463'
-                },
-                label: {
-                    textStyle: {
-                        // color: 'ccc'
-                    }
-                }
-            }
-        }
-    },
-
-    force : {
-        itemStyle: {
-            normal: {
-                linkStyle : {
-                    color : '#fff'
-                }
-            }
-        }
-    },
-
-    chord : {
-        itemStyle : {
-            normal : {
-                borderWidth: 1,
-                borderColor: 'rgba(228, 228, 228, 0.2)',
-                chordStyle : {
-                    lineStyle : {
-                        color : 'rgba(228, 228, 228, 0.2)'
-                    }
-                }
-            },
-            emphasis : {
-                borderWidth: 1,
-                borderColor: 'rgba(228, 228, 228, 0.9)',
-                chordStyle : {
-                    lineStyle : {
-                        color : 'rgba(228, 228, 228, 0.9)'
-                    }
-                }
-            }
-        }
-    },
-
-    gauge : {
-        axisLine: {            // 坐标轴线
-            show: true,        // 默认显示，属性show控制显示与否
-            lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[0.2, '#9BCA63'],[0.8, '#60C0DD'],[1, '#D7504B']],
-                width: 3,
-                shadowColor : '#fff', //默认透明
-                shadowBlur: 10
-            }
-        },
-        axisTick: {            // 坐标轴小标记
-            length :15,        // 属性length控制线长
-            lineStyle: {       // 属性lineStyle控制线条样式
-                color: 'auto',
-                shadowColor : '#fff', //默认透明
-                shadowBlur: 10
-            }
-        },
-        axisLabel: {            // 坐标轴小标记
-            textStyle: {       // 属性lineStyle控制线条样式
-                fontWeight: 'bolder',
-                color: '#fff',
-                shadowColor : '#fff', //默认透明
-                shadowBlur: 10
             }
         },
-        splitLine: {           // 分隔线
-            length :25,         // 属性length控制线长
-            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
-                width:3,
-                color: '#fff',
-                shadowColor : '#fff', //默认透明
-                shadowBlur: 10
-            }
-        },
-        pointer: {           // 分隔线
-            shadowColor : '#fff', //默认透明
-            shadowBlur: 5
-        },
-        title : {
-            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: 'bolder',
-                fontSize: 20,
-                fontStyle: 'italic',
-                color: '#fff',
-                shadowColor : '#fff', //默认透明
-                shadowBlur: 10
-            }
-        },
-        detail : {
-            shadowColor : '#fff', //默认透明
-            shadowBlur: 5,
-            offsetCenter: [0, '50%'],       // x, y，单位px
-            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: 'bolder',
-                color: '#fff'
-            }
-        }
-    },
-
-    funnel : {
-        itemStyle: {
-            normal: {
-                borderColor : 'rgba(255, 255, 255, 0.5)',
-                borderWidth: 1
-            },
-            emphasis: {
-                borderColor : 'rgba(255, 255, 255, 1)',
-                borderWidth: 1
-            }
-        }
-    },
-
-    textStyle: {
-        fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
-    }
-};
-
-    return theme;
-});
\ No newline at end of file
+        timeAxis: axisCommon,
+        logAxis: axisCommon,
+        valueAxis: axisCommon,
+        categoryAxis: axisCommon
+    });
+}));
\ No newline at end of file

theme/vintage.js

+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    echarts.registerTheme('vintage', {
+        color: ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'],
+        backgroundColor: '#fef8ef'
+    });
+}));
\ No newline at end of file