Skip to content

Commit

Permalink
More themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@pissang
pissang committed Mar 1, 2016
1 parent 32fcf15 commit 23cba36
Show file tree
Hide file tree
Showing 7 changed files with 495 additions and 250 deletions.
43 changes: 37 additions & 6 deletions theme/dark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,23 +78,54 @@
color: contrastColor
}
},
line: {
symbol: 'circle'
},
toolbox: {
iconStyle: {
normal: {
borderColor: contrastColor
}
}
},
graph: {
color: colorPalette
timeline: {
lineStyle: {
color: contrastColor
},
itemStyle: {
normal: {
color: colorPalette[1]
}
},
label: {
normal: {
textStyle: {
color: contrastColor
}
}
},
controlStyle: {
normal: {
color: contrastColor,
borderColor: contrastColor
}
}
},
timeAxis: axisCommon(),
logAxis: axisCommon(),
valueAxis: axisCommon(),
categoryAxis: axisCommon()
categoryAxis: axisCommon(),

line: {
symbol: 'circle'
},
graph: {
color: colorPalette
},
gauge: {
title: {
textStyle: {
color: contrastColor
}
}
}
};
theme.categoryAxis.splitLine.show = false;
echarts.registerTheme('dark', theme);
Expand Down
112 changes: 40 additions & 72 deletions theme/infographic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
];

var theme = {
// 默认色板

color: colorPalette,

title: {
Expand All @@ -48,58 +48,49 @@
}
},

// 提示框
tooltip: {
backgroundColor: 'rgba(50,50,50,0.5)', // 提示背景颜色，默认为透明度为0.7的黑色
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
backgroundColor: 'rgba(50,50,50,0.5)',
axisPointer : {
type : 'line',
lineStyle : {
color: '#27727B',
type: 'dashed'
},
crossStyle: {
color: '#27727B'
},
shadowStyle : { // 阴影指示器样式设置
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
dataBackgroundColor: 'rgba(181,195,52,0.3)',
fillerColor: 'rgba(181,195,52,0.2)',
handleColor: '#27727B'
},

// 类目轴
categoryAxis: {
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
axisLine: {
lineStyle: {
color: '#27727B'
}
},
splitLine: { // 分隔线
splitLine: {
show: false
}
},

// 数值型坐标轴默认参数
valueAxis: {
axisLine: { // 坐标轴线
axisLine: {
show: false
},
splitArea : {
show: false
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
splitLine: {
lineStyle: {
color: ['#ccc'],
type: 'dashed'
}
Expand All @@ -111,14 +102,15 @@
color: '#27727B'
},
controlStyle: {
normal: { color : '#27727B'},
emphasis: { color : '#27727B'}
normal: {
color: '#27727B',
borderColor: '#27727B'
}
},
symbol: 'emptyCircle',
symbolSize: 3
},

// 折线图默认参数
line: {
itemStyle: {
normal: {
Expand All @@ -132,20 +124,19 @@
borderWidth:0
}
},
symbol: 'circle', // 拐点图形类型
symbolSize: 3.5 // 拐点图形大小
symbol: 'circle',
symbolSize: 3.5
},

// K线图默认参数
candlestick: {
itemStyle: {
normal: {
color: '#C1232B', // 阳线填充颜色
color0: '#B5C334', // 阴线填充颜色
color: '#C1232B',
color0: '#B5C334',
lineStyle: {
width: 1,
color: '#C1232B', // 阳线边框颜色
color0: '#B5C334' // 阴线边框颜色
color: '#C1232B',
color0: '#B5C334'
}
}
}
Expand Down Expand Up @@ -179,55 +170,32 @@
}
},

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%'
gauge: {
axisLine: {
lineStyle: {
color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']]
}
},
axisTick: { // 坐标轴小标记
splitNumber: 2, // 每份split细分多少段
length: 5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
axisTick: {
splitNumber: 2,
length: 5,
lineStyle: {
color: '#fff'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontWeight:'bolder'
axisLabel: {
textStyle: {
color: '#fff'
}
},
splitLine: { // 分隔线
length: '5%', // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
splitLine: {
length: '5%',
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
}
offsetCenter: [0, -20]
}
}
};
Expand Down
67 changes: 67 additions & 0 deletions theme/roma.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
(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 = ['#E01F54','#001852','#f5e8c8','#b8d2c7','#c6b38e',
'#a4d8c2','#f3d999','#d3758f','#dcc392','#2e4783',
'#82b6e9','#ff6347','#a092f1','#0a915d','#eaf889',
'#6699FF','#ff6666','#3cb371','#d5b158','#38b6b6'
];

var theme = {
color: colorPalette,

visualMap: {
color:['#e01f54','#e7dbc3'],
textStyle: {
color: '#333'
}
},

candlestick: {
itemStyle: {
normal: {
color: '#e01f54',
color0: '#001852',
lineStyle: {
width: 1,
color: '#f5e8c8',
color0: '#b8d2c7'
}
}
}
},

graph: {
color: colorPalette
},

gauge : {
axisLine: {
lineStyle: {
color: [[0.2, '#E01F54'],[0.8, '#b8d2c7'],[1, '#001852']],
width: 8
}
}
}
};

echarts.registerTheme('roma', theme);
}));
Loading

0 comments on commit 23cba36

Please sign in to comment.