Skip to content

I
incubator-echarts

missman / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 042fa6fc 编写于 作者: L lang
浏览文件
操作

Fix theme

上级 90a7caa6
隐藏空白更改
内联 并排
Showing with 484 addition and 10 deletion
src/component/axis/AxisView.js
浏览文件 @ 042fa6fc
......@@ -159,7 +159,8 @@ define(function (require) {
text: labels[i],
textAlign: labelTextAlign,
textBaseline: labelTextBaseline,
font: textStyleModel.getFont()
font: textStyleModel.getFont(),
fill: textStyleModel.get('color')
},
rotation: labelRotate * Math.PI / 180,
origin: [x, y],
......
src/component/legend/LegendView.js
浏览文件 @ 042fa6fc
......@@ -68,7 +68,7 @@ define(function (require) {
var seriesName = itemModel.get('name');
var seriesModel = ecModel.getSeriesByName(seriesName, true);
legendDataMap[seriesName] = true;
legendDataMap[seriesName] = itemModel;
if (!seriesModel) {
// Series not exists
......@@ -87,7 +87,8 @@ define(function (require) {
var symbolType = data.getVisual('symbol');
this._createItem(
seriesName, legendSymbolType, symbolType,
seriesName, itemModel,
legendSymbolType, symbolType,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
);
......@@ -112,7 +113,8 @@ define(function (require) {
var legendSymbolType = 'roundRect';
this._createItem(
name, legendSymbolType, null,
name, legendDataMap[name],
legendSymbolType, null,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
);
......@@ -129,13 +131,15 @@ define(function (require) {
},
_createItem: function (
name,
name, itemModel,
legendSymbolType, symbolType,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
) {
var itemGroup = new graphic.Group();
var textStyleModel = itemModel.getModel('textStyle');
legendSymbolType = legendSymbolType;
itemGroup.add(symbolCreator.createSymbol(
legendSymbolType, 0, 0, itemWidth, itemHeight, color
......@@ -159,7 +163,8 @@ define(function (require) {
text: name,
x: textX,
y: itemHeight / 2,
fill: '#000',
fill: textStyleModel.get('color'),
textFont: textStyleModel.getFont(),
textAlign: textAlign,
textBaseline: 'middle'
}
......
src/echarts.js
浏览文件 @ 042fa6fc
......@@ -188,6 +188,9 @@ define(function (require) {
this._needsUpdate = false;
// Set background
this._dom.style.backgroundColor = ecModel.get('backgroundColor');
console.timeEnd('update');
},
......
src/model/Global.js
浏览文件 @ 042fa6fc
......@@ -78,11 +78,11 @@ define(function (require) {
_mergeTheme: function (option, theme) {
for (var name in theme) {
// 如果有 component model 则把具体的 merge 逻辑交给该 model 处理
if (! ComponentModel.has[name]) {
if (!ComponentModel.hasClass(name)) {
if (typeof theme[name] === 'object') {
option[name] = option[name]
option[name] = !option[name]
? zrUtil.clone(theme[name])
: zrUtil.merge(option[name], theme[name]);
: zrUtil.merge(option[name], theme[name], false);
}
else {
option[name] = theme[name];
......
test/config.js
浏览文件 @ 042fa6fc
require.config({
paths: {
'geoJson': '../geoData/geoJson'
'geoJson': '../geoData/geoJson',
'theme': '../theme'
},
packages: [
{
......
test/theme.html 0 → 100644
浏览文件 @ 042fa6fc
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
#main {
width: 1000px;
background: #fff;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'theme/dark',
'echarts/chart/bar',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip'
], function (echarts, theme) {
var chart = echarts.init(document.getElementById('main'), theme);
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('类目' + i);
data1.push((Math.random() * 5).toFixed(2));
data2.push(-Math.random().toFixed(2));
data3.push((Math.random() + 0.5).toFixed(2));
data4.push((Math.random() + 0.3).toFixed(2));
}
var itemStyle = {
normal: {
label: {
show: true,
position: 'outside'
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
console.profile('setOption');
chart.setOption({
legend: {
data: [{
name: 'bar'
}, 'bar2', 'bar3', 'bar4'],
selected: {
// 'bar': false
},
orient: 'vertical',
x: 'right',
y: 'bottom',
align: 'right'
},
tooltip: {},
xAxis: {
data: xAxisData,
axisLine: {
onZero: true
},
splitLine: {
show: false
},
splitArea: {
show: false
}
},
yAxis: {
inverse: true,
splitArea: {
show: false
}
},
series: [{
name: 'bar',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data1
}, {
name: 'bar2',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data2
}, {
name: 'bar3',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data: data3
}, {
name: 'bar4',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data: data4
}]
});
console.profileEnd('setOption');
})
</script>
</body>
</html>
\ No newline at end of file
theme/dark.js 0 → 100644
浏览文件 @ 042fa6fc
define(function() {
var theme = {
// 全图默认背景
backgroundColor: '#1b1b1b',
// 默认色板
color: [
'#FE8463','#9BCA63','#FAD860','#60C0DD','#0084C6',
'#D7504B','#C6E579','#26C0C0','#F0805A','#F4E001',
'#B5C334'
],
// 图表标题
title: {
textStyle: {
fontWeight: 'normal',
color: '#fff' // 主标题文字颜色
}
},
// 图例
legend: {
textStyle: {
color: '#ccc' // 图例文字颜色
}
},
// 值域
dataRange: {
itemWidth: 15,
color: ['#FFF808','#21BCF9'],
textStyle: {
color: '#ccc' // 值域文字颜色
}
},
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)'
}
},
textStyle: {
color: '#333'
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#555', // 数据背景颜色
fillerColor: 'rgba(200,200,200,0.2)', // 填充颜色
handleColor: '#eee' // 手柄颜色
},
// 网格
grid: {
borderWidth: 0
},
// 类目轴
categoryAxis: {
axisLine: { // 坐标轴线
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#ccc'
}
},
splitLine: { // 分隔线
show: false
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: { // 坐标轴线
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#ccc'
}
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#aaa'],
type: 'dashed'
}
},
splitArea: { // 分隔区域
show: false
}
},
polar : {
name : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#ccc'
}
},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: '#ddd'
}
},
splitArea : {
show : true,
areaStyle : {
color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
}
},
splitLine : {
lineStyle : {
color : '#ddd'
}
}
},
timeline : {
label: {
textStyle:{
color: '#ccc'
}
},
lineStyle : {
color : '#aaa'
},
controlStyle : {
normal : { color : '#fff'},
emphasis : { color : '#FE8463'}
},
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'
}
}
},
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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或