Theme

luochenxi · Feb 24, 2016 · 4e37451 · 4e37451
1 parent 48ce13b
commit 4e37451
Show file tree

Hide file tree

Showing 9 changed files with 3,562 additions and 34 deletions.
diff --git a/theme/dark.js b/theme/dark.js
@@ -20,35 +20,40 @@
         return;
     }
     var contrastColor = '#eee';
-    var axisCommon = {
-        axisLine: {
-            lineStyle: {
-                color: contrastColor
-            }
-        },
-        axisTick: {
-            lineStyle: {
-                color: contrastColor
-            }
-        },
-        axisLabel: {
-            textStyle: {
-                color: contrastColor
-            }
-        },
-        splitLine: {
-            lineStyle: {
-                color: contrastColor
-            }
-        },
-        splitArea: {
-            areaStyle: {
-                color: contrastColor
+    var axisCommon = function () {
+        return {
+            axisLine: {
+                lineStyle: {
+                    color: contrastColor
+                }
+            },
+            axisTick: {
+                lineStyle: {
+                    color: contrastColor
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: contrastColor
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#aaa'
+                }
+            },
+            splitArea: {
+                areaStyle: {
+                    color: contrastColor
+                }
             }
-        }
+        };
     };
-    echarts.registerTheme('dark', {
-        color: ['#dd6b66','#e69d87','#8dc1a9','#759aa0','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
+
+    var colorPalette = ['#dd6b66','#e69d87','#8dc1a9','#759aa0','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'];
+    var theme = {
+        color: colorPalette,
         backgroundColor: '#333',
         legend: {
             textStyle: {
@@ -73,9 +78,14 @@
                 }
             }
         },
-        timeAxis: axisCommon,
-        logAxis: axisCommon,
-        valueAxis: axisCommon,
-        categoryAxis: axisCommon
-    });
+        graph: {
+            color: colorPalette
+        },
+        timeAxis: axisCommon(),
+        logAxis: axisCommon(),
+        valueAxis: axisCommon(),
+        categoryAxis: axisCommon()
+    };
+    theme.categoryAxis.splitLine.show = false;
+    echarts.registerTheme('dark', theme);
 }));
diff --git a/theme/tool/option/area.js b/theme/tool/option/area.js
@@ -0,0 +1,60 @@
+module.exports = {
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday']
+    },
+    yAxis: {
+        type: 'value',
+        splitNumber: 3
+    },
+    series: [
+        {
+            name:'邮件营销',
+            type:'line',
+            stack: '总量',
+            areaStyle: {normal: {}},
+            data:[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name:'联盟广告',
+            type:'line',
+            stack: '总量',
+            areaStyle: {normal: {}},
+            data:[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name:'视频广告',
+            type:'line',
+            stack: '总量',
+            areaStyle: {normal: {}},
+            data:[150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            name:'直接访问',
+            type:'line',
+            stack: '总量',
+            areaStyle: {normal: {}},
+            data:[320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'搜索引擎',
+            type:'line',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'top'
+                }
+            },
+            areaStyle: {normal: {}},
+            data:[820, 932, 901, 934, 1290, 1330, 1320]
+        }
+    ]
+};
diff --git a/theme/tool/option/bar.js b/theme/tool/option/bar.js
@@ -0,0 +1,76 @@
+module.exports = {
+    grid: {
+        left: '13%',
+        right: '5%',
+        bottom: '5%'
+    },
+    xAxis: {
+        type: 'value'
+    },
+    yAxis: {
+        type: 'category',
+        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday']
+    },
+    series: [
+        {
+            name:'直接访问',
+            type:'bar',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'insideRight'
+                }
+            },
+            data:[320, 302, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'邮件营销',
+            type:'bar',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'insideRight'
+                }
+            },
+            data:[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name:'联盟广告',
+            type:'bar',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'insideRight'
+                }
+            },
+            data:[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name:'视频广告',
+            type:'bar',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'insideRight'
+                }
+            },
+            data:[150, 212, 201, 154, 190, 330, 410]
+        },
+        {
+            name:'搜索引擎',
+            type:'bar',
+            stack: '总量',
+            label: {
+                normal: {
+                    show: true,
+                    position: 'insideRight'
+                }
+            },
+            data:[820, 832, 901, 934, 1290, 1330, 1320]
+        }
+    ]
+};