Theme infographic and macarons

theme/dark.js

@@ -55,6 +55,16 @@
     var theme = {
         color: colorPalette,
         backgroundColor: '#333',
+        tooltip: {
+            axisPointer: {
+                lineStyle: {
+                    color: contrastColor
+                },
+                crossStyle: {
+                    color: contrastColor
+                }
+            }
+        },
         legend: {
             textStyle: {
                 color: contrastColor

theme/infographic.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;
+    }
+
+    var colorPalette = [
+        '#C1232B','#27727B','#FCCE10','#E87C25','#B5C334',
+        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+    ];
+
+    var theme = {
+        // 默认色板
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#27727B'
+            }
+        },
+
+        visualMap: {
+            color:['#C1232B','#FCCE10']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        // 提示框
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',     // 提示背景颜色，默认为透明度为0.7的黑色
+            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+                type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
+                lineStyle : {          // 直线指示器样式设置
+                    color: '#27727B',
+                    type: 'dashed'
+                },
+                crossStyle: {
+                    color: '#27727B'
+                },
+                shadowStyle : {                     // 阴影指示器样式设置
+                    color: 'rgba(200,200,200,0.3)'
+                }
+            }
+        },
+
+        // 区域缩放控制器
+        dataZoom: {
+            dataBackgroundColor: 'rgba(181,195,52,0.3)',            // 数据背景颜色
+            fillerColor: 'rgba(181,195,52,0.2)',   // 填充颜色
+            handleColor: '#27727B'    // 手柄颜色
+        },
+
+        // 网格
+        grid: {
+            borderWidth:0
+        },
+
+        // 类目轴
+        categoryAxis: {
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: '#27727B'
+                }
+            },
+            splitLine: {           // 分隔线
+                show: false
+            }
+        },
+
+        // 数值型坐标轴默认参数
+        valueAxis: {
+            axisLine: {            // 坐标轴线
+                show: false
+            },
+            splitArea : {
+                show: false
+            },
+            splitLine: {           // 分隔线
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    color: ['#ccc'],
+                    type: 'dashed'
+                }
+            }
+        },
+
+        timeline: {
+            lineStyle: {
+                color: '#27727B'
+            },
+            controlStyle: {
+                normal: { color : '#27727B'},
+                emphasis: { color : '#27727B'}
+            },
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        // 折线图默认参数
+        line: {
+            itemStyle: {
+                normal: {
+                    borderWidth:2,
+                    borderColor:'#fff',
+                    lineStyle: {
+                        width: 3
+                    }
+                },
+                emphasis: {
+                    borderWidth:0
+                }
+            },
+            symbol: 'circle',  // 拐点图形类型
+            symbolSize: 3.5           // 拐点图形大小
+        },
+
+        // K线图默认参数
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#C1232B',       // 阳线填充颜色
+                    color0: '#B5C334',      // 阴线填充颜色
+                    lineStyle: {
+                        width: 1,
+                        color: '#C1232B',   // 阳线边框颜色
+                        color0: '#B5C334'   // 阴线边框颜色
+                    }
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#C1232B'
+                    }
+                },
+                emphasis: {
+                    textStyle: {
+                        color: 'rgb(100,0,0)'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    areaColor: '#ddd',
+                    borderColor: '#eee'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        gauge : {
+            center:['50%','80%'],
+            radius:'100%',
+            startAngle: 180,
+            endAngle : 0,
+            axisLine: {            // 坐标轴线
+                show: true,        // 默认显示，属性show控制显示与否
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']],
+                    width: '40%'
+                }
+            },
+            axisTick: {            // 坐标轴小标记
+                splitNumber: 2,   // 每份split细分多少段
+                length: 5,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: '#fff'
+                }
+            },
+            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    color: '#fff',
+                    fontWeight:'bolder'
+                }
+            },
+            splitLine: {           // 分隔线
+                length: '5%',         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    color: '#fff'
+                }
+            },
+            pointer : {
+                width : '40%',
+                length: '80%',
+                color: '#fff'
+            },
+            title : {
+              offsetCenter: [0, -20],       // x, y，单位px
+              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                color: 'auto',
+                fontSize: 20
+              }
+            },
+            detail : {
+                offsetCenter: [0, 0],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    color: 'auto',
+                    fontSize: 40
+                }
+            }
+        }
+    };
+
+    echarts.registerTheme('infographic', theme);
+}));
\ No newline at end of file

theme/macarons.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;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));
\ No newline at end of file

theme/tool/thumb.js

@@ -41,9 +41,9 @@ glob('../*.js', function (err, themePathList) {
             chart.dispose();
         });
 
-        var outputCanvas = new Canvas(WIDTH * 2, HEIGHT * canvasList.length);
-        var outputCtx = outputCanvas.getContext('2d');
         var columnCount = 2;
+        var outputCanvas = new Canvas(WIDTH * columnCount, HEIGHT * canvasList.length / columnCount);
+        var outputCtx = outputCanvas.getContext('2d');
         canvasList.forEach(function (canvas, idx) {
             outputCtx.drawImage(canvas, idx % columnCount * WIDTH, Math.floor(idx / columnCount) * HEIGHT, WIDTH, HEIGHT);
         });