Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 21bb5cb7 编写于 作者: K Kener
浏览文件
操作

rewrite theme and config

上级 e02b9b8d
隐藏空白更改
内联 并排
Showing with 1430 addition and 309 deletion
src/chart/bar.js
浏览文件 @ 21bb5cb7
......@@ -119,6 +119,7 @@ define(function (require) {
var barShape;
var data;
var value;
var islandR = this.deepQuery([this.ecTheme, ecConfig], 'island.r');
for (var i = 0, l = maxDataLength; i < l; i++) {
if (categoryAxis.getNameByIndex(i) == null) {
// 系列数据超出类目轴长度
......@@ -274,12 +275,12 @@ define(function (require) {
if (this.deepQuery([data, serie, this.option], 'calculable')) {
if (isHorizontal) {
lastP -= this.ecTheme.island.r;
lastP -= islandR;
y = lastP;
}
else {
x = lastP;
lastP += this.ecTheme.island.r;
lastP += islandR;
}
barShape = this._getBarItem(
......@@ -287,8 +288,8 @@ define(function (require) {
categoryAxis.getNameByIndex(i),
x,
y - (isHorizontal ? 0 : curBarWidth),
isHorizontal ? curBarWidth : this.ecTheme.island.r,
isHorizontal ? this.ecTheme.island.r : curBarWidth,
isHorizontal ? curBarWidth : islandR,
isHorizontal ? islandR : curBarWidth,
isHorizontal ? 'vertical' : 'horizontal'
);
barShape.hoverable = false;
......@@ -296,7 +297,8 @@ define(function (require) {
barShape.style.lineWidth = 1;
barShape.style.brushType = 'stroke';
barShape.style.strokeColor = serie.calculableHolderColor
|| this.ecTheme.calculableHolderColor;
|| this.ecTheme.calculableHolderColor
|| ecConfig.calculableHolderColor;
this.shapeList.push(new RectangleShape(barShape));
}
......
src/chart/base.js
浏览文件 @ 21bb5cb7
......@@ -46,7 +46,8 @@ define(function (require) {
var lineWidth = highlightStyle.lineWidth;
highlightStyle.brushType = 'stroke';
highlightStyle.strokeColor = self.ecTheme.calculableColor;
highlightStyle.strokeColor = self.ecTheme.calculableColor
|| ecConfig.calculableColor;
highlightStyle.lineWidth = calculableShape.type === 'icon' ? 30 : 10;
self.zr.addHoverShape(calculableShape);
......@@ -82,7 +83,7 @@ define(function (require) {
* 图形拖拽特性
*/
setCalculable: function (shape) {
shape.dragEnableTime = this.ecTheme.DRAG_ENABLE_TIME;
shape.dragEnableTime = this.ecTheme.DRAG_ENABLE_TIME || ecConfig.DRAG_ENABLE_TIME;
shape.ondragover = this.shapeHandler.ondragover;
shape.ondragend = this.shapeHandler.ondragend;
shape.ondrop = this.shapeHandler.ondrop;
......@@ -668,14 +669,18 @@ define(function (require) {
) {
// 特殊值内置支持
pos = this.getMarkCoord(seriesIndex, mlData);
mlData = [zrUtil.clone(mlData), {}];
mlData[0].name = mlData.name || mlData.type;
mlData[0].value = mlData.type !== 'average'
? pos[3]
: +pos[3].toFixed(
markLine.precision != null
? markLine.precision : this.ecTheme.markLine.precision
);
markLine.data[i] = [zrUtil.clone(mlData), {}];
markLine.data[i][0].name = mlData.name || mlData.type;
markLine.data[i][0].value = mlData.type !== 'average'
? pos[3]
: +pos[3].toFixed(
markLine.precision != null
? markLine.precision
: this.deepQuery(
[this.ecTheme, ecConfig],
'markLine.precision'
)
);
pos = pos[2];
mlData = [{},{}];
}
......@@ -689,10 +694,10 @@ define(function (require) {
// 不在显示区域内
continue;
}
mlData[0].x = mlData[0].x != null ? mlData[0].x : pos[0][0];
mlData[0].y = mlData[0].y != null ? mlData[0].y : pos[0][1];
mlData[1].x = mlData[1].x != null ? mlData[1].x : pos[1][0];
mlData[1].y = mlData[1].y != null ? mlData[1].y : pos[1][1];
markLine.data[i][0].x = mlData[0].x != null ? mlData[0].x : pos[0][0];
markLine.data[i][0].y = mlData[0].y != null ? mlData[0].y : pos[0][1];
markLine.data[i][1].x = mlData[1].x != null ? mlData[1].x : pos[1][0];
markLine.data[i][1].y = mlData[1].y != null ? mlData[1].y : pos[1][1];
}
var shapeList = this._markLine(seriesIndex, markLine);
......@@ -723,9 +728,13 @@ define(function (require) {
var serie = this.series[seriesIndex];
var component = this.component;
zrUtil.merge(
mpOption,
this.ecTheme.markPoint
zrUtil.merge(
mpOption,
zrUtil.clone(this.ecTheme.markPoint || {})
),
zrUtil.clone(ecConfig.markPoint)
);
mpOption.name = serie.name;
var pList = [];
......@@ -828,9 +837,13 @@ define(function (require) {
var serie = this.series[seriesIndex];
var component = this.component;
zrUtil.merge(
mlOption,
this.ecTheme.markLine
zrUtil.merge(
mlOption,
zrUtil.clone(this.ecTheme.markLine || {})
),
zrUtil.clone(ecConfig.markLine)
);
// 标准化一些同时支持Array和String的参数
mlOption.symbol = mlOption.symbol instanceof Array
? mlOption.symbol.length > 1
......
src/chart/chord.js
浏览文件 @ 21bb5cb7
......@@ -20,6 +20,98 @@ define(function (require) {
var BezierCurveShape = require('zrender/shape/BezierCurve');
var ecConfig = require('../config');
// 和弦图默认参数
ecConfig.chord = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
radius: ['65%', '75%'],
center: ['50%', '50%'],
padding: 2,
sort: 'none', // can be 'none', 'ascending', 'descending'
sortSub: 'none', // can be 'none', 'ascending', 'descending'
startAngle: 90,
clockWise: true,
ribbonType: true,
/***************** 下面的配置项在 ribbonType 为 false 时有效 */
// 同force类似
minRadius: 10,
maxRadius: 20,
symbol: 'circle',
/***************** 上面的配置项在 ribbonType 为 false 时有效 */
/***************** 下面的配置项在 ribbonType 为 true 时有效 */
showScale: false,
showScaleText: false,
/***************** 上面的配置项在 ribbonType 为 true 时有效 */
// 分类里如果有样式会覆盖节点默认样式
// categories: [{
// itemStyle
// symbol
// symbolSize
// name
// }],
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#000',
label: {
show: true,
rotate: false,
distance: 5
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
chordStyle: {
/** ribbonType = false 时有效 */
width: 1,
color: 'black',
/** ribbonType = true 时有效 */
borderWidth: 1,
borderColor: '#999',
opacity: 0.5
}
},
emphasis: {
borderWidth: 0,
borderColor: '#000',
chordStyle: {
/** ribbonType = false 时有效 */
width: 1,
color: 'black',
/** ribbonType = true 时有效 */
borderWidth: 1,
borderColor: '#999'
}
}
}
/****** 使用 Data-matrix 表示数据 */
// data: [],
// Source data matrix
/**
* target
* -1--2--3--4--5-
* 1| x x x x x
* 2| x x x x x
* 3| x x x x x source
* 4| x x x x x
* 5| x x x x x
*
* Relation ship from source to target
* https://github.com/mbostock/d3/wiki/Chord-Layout#wiki-chord
*
* Row based
*/
// matrix: [],
/****** 使用 node-links 表示数据 */
// 参考 force
// nodes: [],
// links: []
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var vec2 = require('zrender/tool/vector');
......@@ -979,12 +1071,14 @@ define(function (require) {
reformOption : function (opt) {
var _merge = zrUtil.merge;
opt = _merge(
opt || {},
this.ecTheme.chord
_merge(
opt || {},
this.ecTheme.chord
),
ecConfig.chord
);
opt.itemStyle.normal.label.textStyle = _merge(
opt.itemStyle.normal.label.textStyle || {},
this.ecTheme.textStyle
opt.itemStyle.normal.label.textStyle = this.getTextStyle(
opt.itemStyle.normal.label.textStyle
);
}
};
......
src/chart/eventRiver.js
浏览文件 @ 21bb5cb7
......@@ -19,6 +19,35 @@ define(function (require) {
require('../component/dataZoom');
var ecConfig = require('../config');
// 事件河流图默认参数
ecConfig.eventRiver = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
itemStyle: {
normal: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true,
position: 'inside', // 可选为'left'|'right'|'top'|'bottom'
formatter: '{b}'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true
}
}
}
};
var ecData = require('../util/ecData');
var ecDate = require('../util/date');
var zrUtil = require('zrender/tool/util');
......
src/chart/force.js
浏览文件 @ 21bb5cb7
......@@ -20,6 +20,116 @@ define(function (require) {
var IconShape = require('../util/shape/Icon');
var ecConfig = require('../config');
// 力导向布局图默认参数
ecConfig.force = {
zlevel: 1, // 一级层叠
z: 2, // 二级层叠
// 布局中心
center: ['50%', '50%'],
// 布局大小
size: '100%',
// 防止节点和节点，节点和边之间的重叠
preventOverlap: false,
// 布局冷却因子，值越小结束时间越短，值越大时间越长但是结果也越收敛
coolDown: 0.99,
// 数据映射到圆的半径的最小值和最大值
minRadius: 10,
maxRadius: 20,
// 是否根据屏幕比例拉伸
ratioScaling: false,
// 在 500+ 顶点的图上建议设置 large 为 true, 会使用 Barnes-Hut simulation
// 同时开启 useWorker 并且把 steps 值调大
// 关于Barnes-Hut simulation: http://en.wikipedia.org/wiki/Barnes–Hut_simulation
large: false,
// 是否在浏览器支持 worker 的时候使用 web worker
useWorker: false,
// 每一帧 force 迭代的次数，仅在启用webworker的情况下有用
steps: 1,
// 布局缩放因子，并不完全精确, 效果跟布局大小类似
scaling: 1.0,
// 向心力因子，越大向心力越大（ 所有顶点会往 center 的位置收拢 )
gravity: 1,
symbol: 'circle',
// symbolSize 为 0 的话使用映射到minRadius-maxRadius后的值
symbolSize: 0,
linkSymbol: null,
linkSymbolSize: [10, 15],
draggable: true,
clickable: true,
roam: false,
// 分类里如果有样式会覆盖节点默认样式
// categories: [{
// itemStyle
// symbol
// symbolSize
// name
// }],
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
position: 'inside'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle: {
brushType : 'both',
borderColor : '#5182ab',
borderWidth: 1
},
linkStyle: {
color: '#5182ab',
width: 1,
type: 'line'
}
},
emphasis: {
// color: 各异,
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle: {},
linkStyle: {
opacity: 0
}
}
}
// nodes: [{
// name: 'xxx',
// value: 1,
// itemStyle: {},
// initial: [0, 0],
// fixX: false,
// fixY: false,
// ignore: false,
// symbol: 'circle',
// symbolSize: 0
// }]
// links: [{
// source: 1,
// target: 2,
// weight: 1,
// itemStyle: {}
// }, {
// source: 'xxx',
// target: 'ooo'
// }]
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrConfig = require('zrender/config');
......
src/chart/funnel.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,60 @@ define(function (require) {
var PolygonShape = require('zrender/shape/Polygon');
var ecConfig = require('../config');
// 漏斗图默认参数
ecConfig.funnel = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending', // 'ascending', 'descending'
gap: 0,
funnelAlign: 'center',
itemStyle: {
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: true,
length: 10,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true
},
labelLine: {
show: true
}
}
}
};
var ecData = require('../util/ecData');
var number = require('../util/number');
var zrUtil = require('zrender/tool/util');
......@@ -86,12 +140,8 @@ define(function (require) {
// 计算需要显示的个数和总值
for (var i = 0, l = data.length; i < l; i++) {
itemName = data[i].name;
if (legend){
this.selectedMap[itemName] = legend.isSelected(itemName);
}
else {
this.selectedMap[itemName] = true;
}
this.selectedMap[itemName] = legend ? legend.isSelected(itemName) : true;
if (this.selectedMap[itemName] && !isNaN(data[i].value)) {
selectedData.push(data[i]);
total++;
......@@ -201,6 +251,7 @@ define(function (require) {
lineWidth: 1,
strokeColor: serie.calculableHolderColor
|| this.ecTheme.calculableHolderColor
|| ecConfig.calculableHolderColor
}
};
ecData.pack(funnelCase, serie, seriesIndex, undefined, -1);
......@@ -217,28 +268,18 @@ define(function (require) {
var zrHeight = this.zr.getHeight();
var x = this.parsePercent(gridOption.x, zrWidth);
var y = this.parsePercent(gridOption.y, zrHeight);
var width;
if (gridOption.width == null) {
width = zrWidth - x - this.parsePercent(gridOption.x2, zrWidth);
}
else {
width = this.parsePercent(gridOption.width, zrWidth);
}
var height;
if (gridOption.height == null) {
height = zrHeight - y - this.parsePercent(gridOption.y2, zrHeight);
}
else {
height = this.parsePercent(gridOption.height, zrHeight);
}
var width = gridOption.width == null
? (zrWidth - x - this.parsePercent(gridOption.x2, zrWidth))
: this.parsePercent(gridOption.width, zrWidth)
return {
x: x,
y: y,
width: width,
height: height,
height: gridOption.height == null
? (zrHeight - y - this.parsePercent(gridOption.y2, zrHeight))
: this.parsePercent(gridOption.height, zrHeight),
centerX: x + width / 2
};
},
......@@ -361,14 +402,9 @@ define(function (require) {
var queryTarget = [data, serie];
// 多级控制
var normal = this.deepMerge(
queryTarget,
'itemStyle.normal'
) || {};
var emphasis = this.deepMerge(
queryTarget,
'itemStyle.emphasis'
) || {};
var normal = this.deepMerge(queryTarget, 'itemStyle.normal') || {};
var emphasis = this.deepMerge(queryTarget,'itemStyle.emphasis') || {};
var normalColor = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data)
|| defaultColor;
......@@ -552,8 +588,8 @@ define(function (require) {
else if (typeof formatter === 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
formatter = formatter.replace('{a0}', serie.name)
.replace('{c}','{c0}')
.replace('{a0}', serie.name)
.replace('{b0}', data.name)
.replace('{c0}', data.value);
......
src/chart/gauge.js
浏览文件 @ 21bb5cb7
......@@ -17,6 +17,83 @@ define(function (require) {
var SectorShape = require('zrender/shape/Sector');
var ecConfig = require('../config');
// 仪表盘默认参数
ecConfig.gauge = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
center: ['50%', '50%'], // 默认全局居中
clickable: true,
legendHoverLink: true,
radius: '75%',
startAngle: 225,
endAngle: -45,
min: 0, // 最小值
max: 100, // 最大值
precision: 0, // 小数精度，默认为0，无小数点
splitNumber: 10, // 分割段数，默认为10
axisLine: { // 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 30
}
},
axisTick: { // 坐标轴小标记
show: true, // 属性show控制显示与否，默认不显示
splitNumber: 5, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#eee',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :30, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: '#eee',
width: 2,
type: 'solid'
}
},
pointer: {
show: true,
length: '80%',
width: 8,
color: 'auto'
},
title: {
show: true,
offsetCenter: [0, '-40%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333',
fontSize: 15
}
},
detail: {
show: true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, '40%'], // x, y，单位px
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontSize: 30
}
}
};
var ecData = require('../util/ecData');
var accMath = require('../util/accMath');
var zrUtil = require('zrender/tool/util');
......@@ -95,17 +172,17 @@ define(function (require) {
if (!serie.axisLine.show) {
return;
}
var min = serie.min;
var total = serie.max - min;
var params = this._paramsMap[seriesIndex];
var center = params.center;
var startAngle = params.startAngle;
var totalAngle = params.totalAngle;
var colorArray = params.colorArray;
var lineStyle = serie.axisLine.lineStyle;
var lineWidth = this.parsePercent(lineStyle.width, params.radius[1]);
var r = params.radius[1];
var r0 = r - lineWidth;
var min = serie.min;
var total = serie.max - min;
var params = this._paramsMap[seriesIndex];
var center = params.center;
var startAngle = params.startAngle;
var totalAngle = params.totalAngle;
var colorArray = params.colorArray;
var lineStyle = serie.axisLine.lineStyle;
var lineWidth = this.parsePercent(lineStyle.width, params.radius[1]);
var r = params.radius[1];
var r0 = r - lineWidth;
var sectorShape;
var lastAngle = startAngle;
......@@ -136,14 +213,12 @@ define(function (require) {
var params = this._paramsMap[seriesIndex];
var splitNumber = serie.splitNumber;
var min = serie.min;
var total = serie.max - min;
var splitLine = serie.splitLine;
var length = this.parsePercent(
splitLine.length, params.radius[1]
);
var lineStyle = splitLine.lineStyle;
var color = lineStyle.color;
var min = serie.min;
var total = serie.max - min;
var splitLine = serie.splitLine;
var length = this.parsePercent(splitLine.length, params.radius[1]);
var lineStyle = splitLine.lineStyle;
var color = lineStyle.color;
var center = params.center;
var startAngle = params.startAngle * Math.PI / 180;
var totalAngle = params.totalAngle * Math.PI / 180;
......@@ -189,15 +264,13 @@ define(function (require) {
var params = this._paramsMap[seriesIndex];
var splitNumber = serie.splitNumber;
var min = serie.min;
var total = serie.max - min;
var axisTick = serie.axisTick;
var tickSplit = axisTick.splitNumber;
var length = this.parsePercent(
axisTick.length, params.radius[1]
);
var lineStyle = axisTick.lineStyle;
var color = lineStyle.color;
var min = serie.min;
var total = serie.max - min;
var axisTick = serie.axisTick;
var tickSplit = axisTick.splitNumber;
var length = this.parsePercent(axisTick.length, params.radius[1]);
var lineStyle = axisTick.lineStyle;
var color = lineStyle.color;
var center = params.center;
var startAngle = params.startAngle * Math.PI / 180;
......@@ -246,20 +319,19 @@ define(function (require) {
}
var splitNumber = serie.splitNumber;
var min = serie.min;
var total = serie.max - min;
var textStyle = serie.axisLabel.textStyle;
var textFont = this.getFont(textStyle);
var color = textStyle.color;
var min = serie.min;
var total = serie.max - min;
var textStyle = serie.axisLabel.textStyle;
var textFont = this.getFont(textStyle);
var color = textStyle.color;
var params = this._paramsMap[seriesIndex];
var center = params.center;
var startAngle = params.startAngle;
var totalAngle = params.totalAngle;
var r0 = params.radius[1]
- this.parsePercent(
serie.splitLine.length, params.radius[1]
) - 5;
- this.parsePercent(serie.splitLine.length, params.radius[1])
- 5;
var angle;
var sinAngle;
......@@ -317,9 +389,11 @@ define(function (require) {
var value = this._getValue(seriesIndex);
value = value < serie.max ? value : serie.max;
var angle = (params.startAngle - params.totalAngle / total * (value - serie.min)) * Math.PI / 180;
var angle = (params.startAngle - params.totalAngle / total * (value - serie.min))
* Math.PI / 180;
var color = pointer.color === 'auto'
? this._getColor(seriesIndex, value) : pointer.color;
? this._getColor(seriesIndex, value)
: pointer.color;
var pointShape = new GaugePointerShape({
zlevel: this.getZlevelBase(),
......@@ -375,18 +449,19 @@ define(function (require) {
var data = serie.data[0];
var name = data.name != null ? data.name : '';
if (name !== '') { // 不要帮我代码规范
var title = serie.title;
var offsetCenter = title.offsetCenter;
var textStyle = title.textStyle;
var textColor = textStyle.color;
var params = this._paramsMap[seriesIndex];
var title = serie.title;
var offsetCenter = title.offsetCenter;
var textStyle = title.textStyle;
var textColor = textStyle.color;
var params = this._paramsMap[seriesIndex];
var x = params.center[0] + this.parsePercent(offsetCenter[0], params.radius[1]);
var y = params.center[1] + this.parsePercent(offsetCenter[1], params.radius[1]);
this.shapeList.push(new TextShape({
zlevel: this.getZlevelBase(),
z: this.getZBase()
+ (Math.abs(x - params.center[0]) + Math.abs(y - params.center[1]))
< textStyle.fontSize * 2 ? 2 : 1,
z: this.getZBase() + (
(Math.abs(x - params.center[0]) + Math.abs(y - params.center[1]))
< textStyle.fontSize * 2 ? 2 : 1
),
hoverable: false,
style: {
x: x,
......@@ -410,11 +485,11 @@ define(function (require) {
return;
}
var detail = serie.detail;
var offsetCenter = detail.offsetCenter;
var color = detail.backgroundColor;
var textStyle = detail.textStyle;
var textColor = textStyle.color;
var detail = serie.detail;
var offsetCenter = detail.offsetCenter;
var color = detail.backgroundColor;
var textStyle = detail.textStyle;
var textColor = textStyle.color;
var params = this._paramsMap[seriesIndex];
var value = this._getValue(seriesIndex);
......@@ -424,10 +499,11 @@ define(function (require) {
+ this.parsePercent(offsetCenter[1], params.radius[1]);
this.shapeList.push(new RectangleShape({
zlevel: this.getZlevelBase(),
z: this.getZBase()
+ (Math.abs(x+detail.width/2 - params.center[0])
+ Math.abs(y+detail.height/2 - params.center[1])) < textStyle.fontSize
? 2 : 1,
z: this.getZBase() + (
(Math.abs(x + detail.width / 2 - params.center[0])
+ Math.abs(y + detail.height / 2 - params.center[1])) < textStyle.fontSize
? 2 : 1
),
hoverable: false,
style: {
x: x,
......
src/chart/island.js
浏览文件 @ 21bb5cb7
......@@ -12,6 +12,13 @@ define(function (require) {
var CircleShape = require('zrender/shape/Circle');
var ecConfig = require('../config');
ecConfig.island = {
zlevel: 0, // 一级层叠
z: 5, // 二级层叠
r: 15,
calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrEvent = require('zrender/tool/event');
......@@ -46,12 +53,9 @@ define(function (require) {
var value = ecData.get(shape, 'value');
var dvalue = value * self.option.island.calculateStep;
if (dvalue > 1) {
value = Math.round(value - dvalue * delta);
}
else {
value = (value - dvalue * delta).toFixed(2) - 0;
}
value = dvalue > 1
? (Math.round(value - dvalue * delta))
: +(value - dvalue * delta).toFixed(2);
var name = ecData.get(shape, 'name');
shape.style.text = name + ':' + value;
......
src/chart/k.js
浏览文件 @ 21bb5cb7
......@@ -16,6 +16,34 @@ define(function (require) {
require('../component/dataZoom');
var ecConfig = require('../config');
// K线图默认参数
ecConfig.k = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
hoverable: true,
legendHoverLink: false,
xAxisIndex: 0,
yAxisIndex: 0,
// barWidth: null // 默认自适应
// barMaxWidth: null // 默认自适应
itemStyle: {
normal: {
color: '#fff', // 阳线填充颜色
color0: '#00aa11', // 阴线填充颜色
lineStyle: {
width: 1,
color: '#ff3200', // 阳线边框颜色
color0: '#00aa11' // 阴线边框颜色
}
},
emphasis: {
// color: 各异,
// color0: 各异
}
}
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
......@@ -106,12 +134,10 @@ define(function (require) {
for (var i = 0, l = seriesArray.length; i < l; i++) {
serie = series[seriesArray[i]];
serieName = serie.name;
if (legend){
this.selectedMap[serieName] = legend.isSelected(serieName);
} else {
this.selectedMap[serieName] = true;
}
this.selectedMap[serieName] = legend
? legend.isSelected(serieName)
: true;
if (this.selectedMap[serieName]) {
locationMap.push(seriesArray[i]);
}
......
src/chart/line.js
浏览文件 @ 21bb5cb7
......@@ -18,6 +18,52 @@ define(function (require) {
require('../component/dataZoom');
var ecConfig = require('../config');
// 折线图默认参数
ecConfig.line = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
// stack: null
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor: 'rgba(0,0,0,0)', //默认透明
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
}
},
emphasis: {
// color: 各异,
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
},
// smooth: false,
// symbol: null, // 拐点图形类型
symbolSize: 2, // 拐点图形大小
// symbolRotate: null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrColor = require('zrender/tool/color');
......@@ -54,9 +100,7 @@ define(function (require) {
// 确定类目轴和数值轴，同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
var serie = series[seriesIndex];
var xAxisIndex = serie.xAxisIndex;
var categoryAxis = this.component.xAxis.getAxis(xAxisIndex);
var yAxisIndex; // 数值轴各异
var categoryAxis = this.component.xAxis.getAxis(serie.xAxisIndex || 0);
var valueAxis; // 数值轴各异
var x;
......@@ -77,8 +121,9 @@ define(function (require) {
x = categoryAxis.getCoordByIndex(i);
for (var j = 0, k = locationMap.length; j < k; j++) {
// 堆积数据用第一条valueAxis
yAxisIndex = series[locationMap[j][0]].yAxisIndex || 0;
valueAxis = this.component.yAxis.getAxis(yAxisIndex);
valueAxis = this.component.yAxis.getAxis(
series[locationMap[j][0]].yAxisIndex || 0
);
baseYP = lastYP = baseYN = lastYN = valueAxis.getCoord(0);
for (var m = 0, n = locationMap[j].length; m < n; m++) {
seriesIndex = locationMap[j][m];
......@@ -192,9 +237,7 @@ define(function (require) {
// 确定类目轴和数值轴，同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
var serie = series[seriesIndex];
var yAxisIndex = serie.yAxisIndex;
var categoryAxis = this.component.yAxis.getAxis(yAxisIndex);
var xAxisIndex; // 数值轴各异
var categoryAxis = this.component.yAxis.getAxis(serie.yAxisIndex || 0);
var valueAxis; // 数值轴各异
var x;
......@@ -215,8 +258,9 @@ define(function (require) {
y = categoryAxis.getCoordByIndex(i);
for (var j = 0, k = locationMap.length; j < k; j++) {
// 堆积数据用第一条valueAxis
xAxisIndex = series[locationMap[j][0]].xAxisIndex || 0;
valueAxis = this.component.xAxis.getAxis(xAxisIndex);
valueAxis = this.component.xAxis.getAxis(
series[locationMap[j][0]].xAxisIndex || 0
);
baseXP = lastXP = baseXN = lastXN = valueAxis.getCoord(0);
for (var m = 0, n = locationMap[j].length; m < n; m++) {
seriesIndex = locationMap[j][m];
......@@ -329,16 +373,12 @@ define(function (require) {
var series = this.series;
var curPLMap = {}; // 正在记录的point list(PL)
var xAxis;
var yAxis;
for (var j = 0, k = locationMap.length; j < k; j++) {
for (var m = 0, n = locationMap[j].length; m < n; m++) {
var seriesIndex = locationMap[j][m];
var serie = series[seriesIndex];
var xAxisIndex = serie.xAxisIndex || 0;
xAxis = this.component.xAxis.getAxis(xAxisIndex);
var yAxisIndex = serie.yAxisIndex || 0;
yAxis = this.component.yAxis.getAxis(yAxisIndex);
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex || 0);
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex || 0);
var baseY = yAxis.getCoord(0);
curPLMap[seriesIndex] = curPLMap[seriesIndex] || [];
......@@ -647,7 +687,8 @@ define(function (require) {
_getCalculableItem: function (seriesIndex, dataIndex, name, x, y, orient) {
var series = this.series;
var color = series[seriesIndex].calculableHolderColor
|| this.ecTheme.calculableHolderColor;
|| this.ecTheme.calculableHolderColor
|| ecConfig.calculableHolderColor;
var itemShape = this._getSymbol(
seriesIndex, dataIndex, name,
......
src/chart/map.js
浏览文件 @ 21bb5cb7
......@@ -21,6 +21,59 @@ define(function (require) {
require('../component/roamController');
var ecConfig = require('../config');
// 地图默认参数
ecConfig.map = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
mapType: 'china', // 各省的mapType暂时都用中文
//mapLocation: {
// x: 'center' | 'left' | 'right' | 'x%' | {number},
// y: 'center' | 'top' | 'bottom' | 'x%' | {number}
// width // 自适应
// height // 自适应
//},
// mapValueCalculation: 'sum', // 数值合并方式，默认加和，可选为：
// 'sum' | 'average' | 'max' | 'min'
mapValuePrecision: 0, // 地图数值计算结果小数精度
showLegendSymbol: true, // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
// selectedMode: false, // 选择模式，默认关闭，可选single，multiple
dataRangeHoverLink: true,
hoverable: true,
clickable: true,
// roam: false, // 是否开启缩放及漫游模式
// scaleLimit: null,
itemStyle: {
normal: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
areaStyle: {
color: '#ccc'
},
label: {
show: false,
textStyle: {
color: 'rgb(139,69,19)'
}
}
},
emphasis: { // 也是选中样式
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
areaStyle: {
color: 'rgba(255,215,0,0.8)'
},
label: {
show: false,
textStyle: {
color: 'rgb(100,0,0)'
}
}
}
}
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrConfig = require('zrender/config');
......@@ -648,7 +701,6 @@ define(function (require) {
var data;
var value;
var queryTarget;
var defaultOption = this.ecTheme.map;
var color;
var font;
......@@ -699,7 +751,6 @@ define(function (require) {
}));
}
}
queryTarget.push(defaultOption); // level 1
value = data.value;
}
else {
......@@ -709,9 +760,10 @@ define(function (require) {
for (var key in mapSeries) {
queryTarget.push(series[key]);
}
queryTarget.push(defaultOption);
value = '-';
}
this.ecTheme.map && queryTarget.push(this.ecTheme.map); // level 1
queryTarget.push(ecConfig); // level 1
// 值域控件控制
color = (dataRange && !isNaN(value))
......
src/chart/pie.js
浏览文件 @ 21bb5cb7
......@@ -16,6 +16,66 @@ define(function (require) {
var PolylineShape = require('zrender/shape/Polyline');
var ecConfig = require('../config');
// 饼图默认参数
ecConfig.pie = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
center: ['50%', '50%'], // 默认全局居中
radius: [0, '75%'],
clockWise: true, // 默认顺时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
// selectedMode: false, // 选择模式，默认关闭，可选single，multiple
// roseType: null, // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
itemStyle: {
normal: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
// distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: false
// position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
// distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
},
labelLine: {
show: false,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
}
}
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrMath = require('zrender/tool/math');
......@@ -97,8 +157,7 @@ define(function (require) {
this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink;
serieName = series[i].name || '';
// 系列图例开关
this.selectedMap[serieName] =
legend ? legend.isSelected(serieName) : true;
this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true;
if (!this.selectedMap[serieName]) {
continue;
}
......@@ -122,14 +181,15 @@ define(function (require) {
lineWidth: 1,
strokeColor: series[i].calculableHolderColor
|| this.ecTheme.calculableHolderColor
|| ecConfig.calculableHolderColor
}
};
ecData.pack(pieCase, series[i], i, undefined, -1);
this.setCalculable(pieCase);
pieCase = radius[0] <= 10
? new CircleShape(pieCase)
: new RingShape(pieCase);
? new CircleShape(pieCase)
: new RingShape(pieCase);
this.shapeList.push(pieCase);
}
this._buildSinglePie(i);
......@@ -793,18 +853,18 @@ define(function (require) {
// 常用方法快捷方式
var _merge = zrUtil.merge;
opt = _merge(
opt || {},
this.ecTheme.pie
_merge(
opt || {}, zrUtil.clone(this.ecTheme.pie || {})
),
zrUtil.clone(ecConfig.pie)
);
// 通用字体设置
opt.itemStyle.normal.label.textStyle = _merge(
opt.itemStyle.normal.label.textStyle || {},
this.ecTheme.textStyle
opt.itemStyle.normal.label.textStyle = this.getTextStyle(
opt.itemStyle.normal.label.textStyle
);
opt.itemStyle.emphasis.label.textStyle = _merge(
opt.itemStyle.emphasis.label.textStyle || {},
this.ecTheme.textStyle
opt.itemStyle.emphasis.label.textStyle = this.getTextStyle(
opt.itemStyle.emphasis.label.textStyle
);
return opt;
......
src/chart/radar.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,36 @@
require('../component/polar');
var ecConfig = require('../config');
// 雷达图默认参数
ecConfig.radar = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
polarIndex: 0,
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
},
lineStyle: {
width: 2,
type: 'solid'
}
},
emphasis: {
// color: 各异,
label: {
show: false
}
}
},
// symbol: null, // 拐点图形类型
symbolSize: 2 // 可计算特性参数，空数据拖拽提示图形大小
// symbolRotate: null, // 图形旋转控制
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrColor = require('zrender/tool/color');
......
src/chart/scatter.js
浏览文件 @ 21bb5cb7
......@@ -17,6 +17,43 @@ define(function (require) {
require('../component/dataRange');
var ecConfig = require('../config');
// 散点图默认参数
ecConfig.scatter = {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
clickable: true,
legendHoverLink: true,
xAxisIndex: 0,
yAxisIndex: 0,
// symbol: null, // 图形类型
symbolSize: 4, // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
// symbolRotate: null, // 图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000, // 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: '各异'
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
};
var zrUtil = require('zrender/tool/util');
var zrColor = require('zrender/tool/color');
......
src/component/axis.js
浏览文件 @ 21bb5cb7
......@@ -55,76 +55,78 @@ define(function (require) {
z: this.getZBase() + 3,
hoverable: false
};
var grid = this.grid;
switch (this.option.position) {
case 'left' :
axShape.style = {
xStart: this.grid.getX() - halfLineWidth,
yStart: this.grid.getYend(),
xEnd: this.grid.getX() - halfLineWidth,
yEnd: this.grid.getY(),
xStart: grid.getX() - halfLineWidth,
yStart: grid.getYend(),
xEnd: grid.getX() - halfLineWidth,
yEnd: grid.getY(),
lineCap: 'round'
};
break;
case 'right' :
axShape.style = {
xStart: this.grid.getXend() + halfLineWidth,
yStart: this.grid.getYend(),
xEnd: this.grid.getXend() + halfLineWidth,
yEnd: this.grid.getY(),
xStart: grid.getXend() + halfLineWidth,
yStart: grid.getYend(),
xEnd: grid.getXend() + halfLineWidth,
yEnd: grid.getY(),
lineCap: 'round'
};
break;
case 'bottom' :
axShape.style = {
xStart: this.grid.getX(),
yStart: this.grid.getYend() + halfLineWidth,
xEnd: this.grid.getXend(),
yEnd: this.grid.getYend() + halfLineWidth,
xStart: grid.getX(),
yStart: grid.getYend() + halfLineWidth,
xEnd: grid.getXend(),
yEnd: grid.getYend() + halfLineWidth,
lineCap: 'round'
};
break;
case 'top' :
axShape.style = {
xStart: this.grid.getX(),
yStart: this.grid.getY() - halfLineWidth,
xEnd: this.grid.getXend(),
yEnd: this.grid.getY() - halfLineWidth,
xStart: grid.getX(),
yStart: grid.getY() - halfLineWidth,
xEnd: grid.getXend(),
yEnd: grid.getY() - halfLineWidth,
lineCap: 'round'
};
break;
}
var style = axShape.style;
if (this.option.name !== '') { // 别帮我代码规范
axShape.style.text = this.option.name;
axShape.style.textPosition = this.option.nameLocation;
axShape.style.textFont = this.getFont(this.option.nameTextStyle);
style.text = this.option.name;
style.textPosition = this.option.nameLocation;
style.textFont = this.getFont(this.option.nameTextStyle);
if (this.option.nameTextStyle.align) {
axShape.style.textAlign = this.option.nameTextStyle.align;
style.textAlign = this.option.nameTextStyle.align;
}
if (this.option.nameTextStyle.baseline) {
axShape.style.textBaseline = this.option.nameTextStyle.baseline;
style.textBaseline = this.option.nameTextStyle.baseline;
}
if (this.option.nameTextStyle.color) {
axShape.style.textColor = this.option.nameTextStyle.color;
style.textColor = this.option.nameTextStyle.color;
}
}
axShape.style.strokeColor = this.option.axisLine.lineStyle.color;
style.strokeColor = this.option.axisLine.lineStyle.color;
axShape.style.lineWidth = lineWidth;
style.lineWidth = lineWidth;
// 亚像素优化
if (this.isHorizontal()) {
// 横向布局，优化y
axShape.style.yStart
= axShape.style.yEnd
= this.subPixelOptimize(axShape.style.yEnd, lineWidth);
style.yStart
= style.yEnd
= this.subPixelOptimize(style.yEnd, lineWidth);
}
else {
// 纵向布局，优化x
axShape.style.xStart
= axShape.style.xEnd
= this.subPixelOptimize(axShape.style.xEnd, lineWidth);
style.xStart
= style.xEnd
= this.subPixelOptimize(style.xEnd, lineWidth);
}
axShape.style.lineType = this.option.axisLine.lineStyle.type;
style.lineType = this.option.axisLine.lineStyle.type;
axShape = new LineShape(axShape);
this.shapeList.push(axShape);
......
src/component/base.js
浏览文件 @ 21bb5cb7
......@@ -20,10 +20,7 @@ define(function (require) {
this.series = option.series;
this.myChart = myChart;
this.component = myChart.component;
this._zlevelBase = (this.ecTheme[this.type] || {}).zlevel;
this._zBase = (this.ecTheme[this.type] || {}).z;
this.shapeList = [];
this.effectList = [];
......@@ -54,64 +51,30 @@ define(function (require) {
*/
Base.prototype = {
canvasSupported: require('zrender/tool/env').canvasSupported,
_getZ : function(zWhat) {
var opt = this.ecTheme[this.type];
if (opt && opt[zWhat] != null) {
return opt[zWhat]
}
opt = ecConfig[this.type];
if (opt && opt[zWhat] != null) {
return opt[zWhat]
}
return 0;
},
/**
* 获取zlevel基数配置
*/
getZlevelBase: function () {
return this._zlevelBase;
/*
contentType = contentType || this.type + '';
switch (contentType) {
case ecConfig.COMPONENT_TYPE_GRID :
case ecConfig.COMPONENT_TYPE_AXIS_CATEGORY :
case ecConfig.COMPONENT_TYPE_AXIS_VALUE :
case ecConfig.COMPONENT_TYPE_POLAR :
return 0;
case ecConfig.CHART_TYPE_LINE :
case ecConfig.CHART_TYPE_BAR :
case ecConfig.CHART_TYPE_SCATTER :
case ecConfig.CHART_TYPE_PIE :
case ecConfig.CHART_TYPE_RADAR :
case ecConfig.CHART_TYPE_MAP :
case ecConfig.CHART_TYPE_K :
case ecConfig.CHART_TYPE_CHORD:
case ecConfig.CHART_TYPE_GUAGE:
case ecConfig.CHART_TYPE_FUNNEL:
case ecConfig.CHART_TYPE_EVENTRIVER:
return 2;
case ecConfig.COMPONENT_TYPE_LEGEND :
case ecConfig.COMPONENT_TYPE_DATARANGE:
case ecConfig.COMPONENT_TYPE_DATAZOOM :
case ecConfig.COMPONENT_TYPE_TIMELINE :
case ecConfig.COMPONENT_TYPE_ROAMCONTROLLER :
return 4;
case ecConfig.CHART_TYPE_ISLAND :
return 5;
case ecConfig.COMPONENT_TYPE_TOOLBOX :
case ecConfig.COMPONENT_TYPE_TITLE :
return 6;
// ecConfig.EFFECT_ZLEVEL = 7;
case ecConfig.COMPONENT_TYPE_TOOLTIP :
return 8;
default :
return 0;
}
*/
return this._getZ('zlevel');
},
/**
* 获取z基数配置
*/
getZBase: function() {
return this._zBase;
return this._getZ('z');
},
/**
......@@ -121,9 +84,13 @@ define(function (require) {
* @return {Object} 修正后的参数
*/
reformOption: function (opt) {
// 默认配置项动态多级合并，依赖加载的组件选项未被merge到ecTheme里，需要从config里取
return zrUtil.merge(
opt || {},
zrUtil.clone(this.ecTheme[this.type] || {})
zrUtil.merge(
opt || {},
zrUtil.clone(this.ecTheme[this.type] || {})
),
zrUtil.clone(ecConfig[this.type] || {})
);
},
......@@ -163,15 +130,24 @@ define(function (require) {
* 获取自定义和默认配置合并后的字体设置
*/
getFont: function (textStyle) {
var finalTextStyle = zrUtil.merge(
zrUtil.clone(textStyle) || {},
this.ecTheme.textStyle
var finalTextStyle = this.getTextStyle(
zrUtil.clone(textStyle)
);
return finalTextStyle.fontStyle + ' '
+ finalTextStyle.fontWeight + ' '
+ finalTextStyle.fontSize + 'px '
+ finalTextStyle.fontFamily;
},
/**
* 获取统一主题字体样式
*/
getTextStyle: function(targetStyle) {
return zrUtil.merge(
targetStyle || {},
this.ecTheme.textStyle || ecConfig.textStyle
);
},
getItemStyleColor: function (itemColor, seriesIndex, dataIndex, data) {
return typeof itemColor === 'function'
......
src/component/categoryAxis.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,65 @@ define(function (require) {
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
// 类目轴
ecConfig.categoryAxis = {
zlevel: 0, // 一级层叠
z: 0, // 二级层叠
show: true,
position: 'bottom', // 位置
name: '', // 坐标轴名字，默认为空
nameLocation: 'end', // 坐标轴名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐标轴文字样式，默认取全局样式
boundaryGap: true, // 类目起始和结束两端空白策略
axisLine: { // 坐标轴线
show: true, // 默认显示，属性show控制显示与否
onZero: true,
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴小标记
show: true, // 属性show控制显示与否，默认不显示
interval: 'auto',
inside: false, // 控制小标记是否在grid里
// onGap: null,
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
// clickable: false,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
// onGap: null,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显示，属性show控制显示与否
// onGap: null,
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
};
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
......@@ -608,9 +667,8 @@ define(function (require) {
if (newOption) {
this.option = this.reformOption(newOption);
// 通用字体设置
this.option.axisLabel.textStyle = zrUtil.merge(
this.option.axisLabel.textStyle || {},
this.ecTheme.textStyle
this.option.axisLabel.textStyle = this.getTextStyle(
this.option.axisLabel.textStyle
);
}
this.clear();
......
src/component/dataRange.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,44 @@ define(function (require) {
var HandlePolygonShape = require('../util/shape/HandlePolygon');
var ecConfig = require('../config');
// 值域
ecConfig.dataRange = {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: true,
orient: 'vertical', // 布局方式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
// min: null, // 最小值
// max: null, // 最大值
precision: 0, // 小数精度，默认为0，无小数点
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
calculable: false, // 是否值域漫游，启用后无视splitNumber，线性渐变
selectedMode: true, // 选择模式，默认开启值域开关
hoverLink: true,
realtime: true,
color:['#006edd','#e0ffff'],//颜色
// formatter: null,
// text:['高','低'], // 文本，默认为数值文本
textStyle: {
color: '#333' // 值域文字颜色
}
};
var zrUtil = require('zrender/tool/util');
var zrEvent = require('zrender/tool/event');
var zrArea = require('zrender/tool/area');
......
src/component/dataZoom.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,33 @@ define(function (require) {
var IconShape = require('../util/shape/Icon');
var ecConfig = require('../config');
// 区域缩放控制器
ecConfig.dataZoom = {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: false,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)', // 手柄颜色
handleSize: 8,
showDetail: true,
// xAxisIndex: [], // 默认控制所有横向类目
// yAxisIndex: [], // 默认控制所有横向类目
// start: 0, // 默认为0
// end: 100, // 默认为全部 100%
realtime: true
// zoomLock: false // 是否锁定选择区域大小
};
var ecDate = require('../util/date');
var zrUtil = require('zrender/tool/util');
......
src/component/grid.js
浏览文件 @ 21bb5cb7
......@@ -12,6 +12,21 @@ define(function (require) {
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
// 网格
ecConfig.grid = {
zlevel: 0, // 一级层叠
z: 0, // 二级层叠
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
};
var zrUtil = require('zrender/tool/util');
/**
......
src/component/legend.js
浏览文件 @ 21bb5cb7
......@@ -17,6 +17,36 @@ define(function (require) {
var CandleShape = require('../util/shape/Candle');
var ecConfig = require('../config');
// 图例
ecConfig.legend = {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: true,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
},
selectedMode: true // 选择模式，默认开启图例开关
// selected: null, // 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
// data: [], // 图例内容（详见legend.data，数组中每一项代表一个item
};
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
......@@ -552,11 +582,15 @@ define(function (require) {
itemShape.style.brushType = 'both';
itemShape.highlightStyle.lineWidth = 3;
itemShape.highlightStyle.color =
itemShape.style.color = this.query(this.ecTheme, 'k.itemStyle.normal.color')
|| '#fff';
itemShape.style.color = this.deepQuery(
[this.ecTheme, ecConfig], 'k.itemStyle.normal.color'
) || '#fff';
itemShape.style.strokeColor = color != '#ccc'
? (this.query(this.ecTheme, 'k.itemStyle.normal.lineStyle.color')
|| '#ff3200')
? (
this.deepQuery(
[this.ecTheme, ecConfig], 'k.itemStyle.normal.lineStyle.color'
) || '#ff3200'
)
: color;
break;
case 'image':
......
src/component/polar.js
浏览文件 @ 21bb5cb7
......@@ -16,6 +16,53 @@ define(function (require) {
var Ring = require('zrender/shape/Ring');
var ecConfig = require('../config');
ecConfig.polar = {
zlevel: 0, // 一级层叠
z: 0, // 二级层叠
center: ['50%', '50%'], // 默认全局居中
radius: '75%',
startAngle: 90,
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
splitNumber: 5,
name: {
show: true,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
axisLine: { // 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#ccc',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: false,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: '#ccc'
}
},
type: 'polygon'
// indicator: []
};
var zrUtil = require('zrender/tool/util');
var ecCoordinates = require('../util/coordinates');
......
src/component/roamController.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,29 @@ define(function (require) {
var CircleShape = require('zrender/shape/Circle');
var ecConfig = require('../config');
ecConfig.roamController = {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: true,
x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
width: 80,
height: 120,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
handleColor: '#6495ed',
fillerColor: '#fff',
step: 15, // 移动幅度
mapTypeControl: null
};
var zrUtil = require('zrender/tool/util');
var zrColor = require('zrender/tool/color');
var zrEvent = require('zrender/tool/event');
......
src/component/timeline.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,66 @@ define(function (require) {
var ChainShape = require('../util/shape/Chain');
var ecConfig = require('../config');
ecConfig.timeline = {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: true,
type: 'time', // 模式是时间类型，支持 number
notMerge: false,
realtime: true,
x: 80,
// y: {number},
x2: 80,
y2: 0,
// width: {totalWidth} - x - x2,
height: 50,
backgroundColor: 'rgba(0,0,0,0)', // 时间轴背景颜色
borderColor: '#ccc', // 时间轴边框颜色
borderWidth: 0, // 时间轴边框线宽，单位px，默认为0（无边框）
padding: 5, // 时间轴内边距，单位px，默认各方向内边距为5，
controlPosition: 'left', // 'right' | 'none'
autoPlay: false,
loop: true,
playInterval: 2000, // 播放时间间隔，单位ms
lineStyle: {
width: 1,
color: '#666',
type: 'dashed'
},
label: { // 文本标签
show: true,
interval: 'auto',
rotate: 0,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
checkpointStyle: {
symbol: 'auto',
symbolSize: 'auto',
color: 'auto',
borderColor: 'auto',
borderWidth: 'auto',
label: { // 文本标签
show: false,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
}
},
controlStyle: {
itemSize: 15,
itemGap: 5,
normal: { color: '#333'},
emphasis: { color: '#1e90ff'}
},
symbol: 'emptyDiamond',
symbolSize: 4,
currentIndex: 0
// data: []
};
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
var zrEvent = require('zrender/tool/event');
......@@ -108,7 +168,9 @@ define(function (require) {
function() {
self.play();
},
this.ecTheme.animationDuration
this.ecTheme.animationDuration != null
? this.ecTheme.animationDuration
: ecConfig.animationDuration
);
}
}
......@@ -784,13 +846,11 @@ define(function (require) {
setTheme: function(needRefresh) {
this.timelineOption = this.reformOption(zrUtil.clone(this.option.timeline));
// 通用字体设置
this.timelineOption.label.textStyle = zrUtil.merge(
this.timelineOption.label.textStyle || {},
this.ecTheme.textStyle
this.timelineOption.label.textStyle = this.getTextStyle(
this.timelineOption.label.textStyle
);
this.timelineOption.checkpointStyle.label.textStyle = zrUtil.merge(
this.timelineOption.checkpointStyle.label.textStyle || {},
this.ecTheme.textStyle
this.timelineOption.checkpointStyle.label.textStyle = this.getTextStyle(
this.timelineOption.checkpointStyle.label.textStyle
);
if (!this.myChart.canvasSupported) {
// 不支持Canvas的强制关闭实时动画
......
src/component/title.js
浏览文件 @ 21bb5cb7
......@@ -13,6 +13,40 @@ define(function (require) {
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
// 图表标题
ecConfig.title = {
zlevel: 0, // 一级层叠
z: 6, // 二级层叠
show: true,
text: '',
// link: null, // 超链接跳转
// target: null, // 仅支持self | blank
subtext: '',
// sublink: null, // 超链接跳转
// subtarget: null, // 仅支持self | blank
x: 'left', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 5, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
};
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
var zrColor = require('zrender/tool/color');
......@@ -254,13 +288,11 @@ define(function (require) {
this.option.title = this.reformOption(this.option.title);
this.titleOption = this.option.title;
this.titleOption.textStyle = zrUtil.merge(
this.titleOption.textStyle,
this.ecTheme.textStyle
this.titleOption.textStyle = this.getTextStyle(
this.titleOption.textStyle
);
this.titleOption.subtextStyle = zrUtil.merge(
this.titleOption.subtextStyle,
this.ecTheme.textStyle
this.titleOption.subtextStyle = this.getTextStyle(
this.titleOption.subtextStyle
);
}
......
src/component/toolbox.js
浏览文件 @ 21bb5cb7
......@@ -15,6 +15,97 @@ define(function (require) {
var IconShape = require('../util/shape/Icon');
var ecConfig = require('../config');
ecConfig.toolbox = {
zlevel: 0, // 一级层叠
z: 6, // 二级层叠
show: false,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],
disableColor: '#ddd',
effectiveColor: 'red',
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
showTitle: true,
// textStyle: {},
feature: {
mark: {
show: false,
title: {
mark: '辅助线开关',
markUndo: '删除辅助线',
markClear: '清空辅助线'
},
lineStyle: {
width: 1,
color: '#1e90ff',
type: 'dashed'
}
},
dataZoom: {
show: false,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
}
},
dataView: {
show: false,
title: '数据视图',
readOnly: false,
lang: ['数据视图', '关闭', '刷新']
},
magicType: {
show: false,
title: {
line: '折线图切换',
bar: '柱形图切换',
stack: '堆积',
tiled: '平铺',
force: '力导向布局图切换',
chord: '和弦图切换',
pie: '饼图切换',
funnel: '漏斗图切换'
},
/*
option: {
line: {},
bar: {},
stack: {},
tiled: {},
force: {},
chord: {},
pie: {},
funnel: {}
},
*/
type: [] // 'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel'
},
restore: {
show: false,
title: '还原'
},
saveAsImage: {
show: false,
title: '保存为图片',
type: 'png',
lang: ['点击保存']
}
}
};
var zrUtil = require('zrender/tool/util');
var zrConfig = require('zrender/config');
var zrEvent = require('zrender/tool/event');
......
src/component/tooltip.js
浏览文件 @ 21bb5cb7
......@@ -15,6 +15,49 @@ define(function (require) {
var rectangleInstance = new RectangleShape({});
var ecConfig = require('../config');
// 提示框
ecConfig.tooltip = {
zlevel: 1, // 一级层叠，频繁变化的tooltip指示器在pc上独立一层
z: 8, // 二级层叠
show: true,
showContent: true, // tooltip主体内容
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
// position: null // 位置 {Array} | {Function}
// formatter: null // 内容格式器：{string}（Template） ¦ {Function}
islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration: 0.4, // 动画变换时间，单位s
enterable: false,
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow' | 'cross'
lineStyle: { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
},
shadowStyle: { // 阴影指示器样式设置
color: 'rgba(150,150,150,0.3)', // 阴影颜色
width: 'auto', // 阴影大小
type: 'default'
}
},
textStyle: {
color: '#fff'
}
};
var ecData = require('../util/ecData');
var zrConfig = require('zrender/config');
var zrEvent = require('zrender/tool/event');
......@@ -898,6 +941,7 @@ define(function (require) {
var value = ecData.get(this._curTarget, 'value');
var special = ecData.get(this._curTarget, 'special');
var special2 = ecData.get(this._curTarget, 'special2');
var queryTarget = [data, serie, this.option];
// 从低优先级往上找到trigger为item的formatter和样式
var formatter;
var position;
......@@ -925,9 +969,9 @@ define(function (require) {
}
else {
this._lastItemTriggerId = NaN;
showContent = this.deepQuery([data, serie, this.option], 'tooltip.showContent');
formatter = this.deepQuery([data, serie, this.option], 'tooltip.islandFormatter');
position = this.deepQuery([data, serie, this.option], 'tooltip.islandPosition');
showContent = this.deepQuery(queryTarget, 'tooltip.showContent');
formatter = this.deepQuery(queryTarget, 'tooltip.islandFormatter');
position = this.deepQuery(queryTarget, 'tooltip.islandPosition');
}
// 复位item trigger和axis trigger间短距离来回变换时的不响应
......@@ -1018,17 +1062,9 @@ define(function (require) {
var x = zrEvent.getX(this._event);
var y = zrEvent.getY(this._event);
var axisPointer = this.query(this.option, 'tooltip.trigger') == 'item'
&& this.option.tooltip.axisPointer;
axisPointer = (this.query(serie, 'tooltip.trigger') == 'item'
&& serie.tooltip.axisPointer)
|| axisPointer;
axisPointer = (this.query(data, 'tooltip.trigger') == 'item'
&& data.tooltip.axisPointer)
|| axisPointer;
if (axisPointer && this.component.grid) {
if (this.deepQuery(queryTarget, 'tooltip.axisPointer.show')
&& this.component.grid
) {
this._styleAxisPointer(
[serie],
this.component.grid.getX(), y,
......@@ -1660,6 +1696,7 @@ define(function (require) {
if (newOption) {
this.option = newOption;
this.option.tooltip = this.reformOption(this.option.tooltip);
this.option.tooltip.textStyle = zrUtil.merge(
this.option.tooltip.textStyle,
this.ecTheme.textStyle
......
src/component/valueAxis.js
浏览文件 @ 21bb5cb7
......@@ -14,6 +14,64 @@ define(function (require) {
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
// 数值型坐标轴默认参数
ecConfig.valueAxis = {
zlevel: 0, // 一级层叠
z: 0, // 二级层叠
show: true,
position: 'left', // 位置
name: '', // 坐标轴名字，默认为空
nameLocation: 'end', // 坐标轴名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐标轴文字样式，默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
// min: null, // 最小值
// max: null, // 最大值
// scale: false, // 脱离0值比例，放大聚焦到最终_min，_max区间
// splitNumber: 5, // 分割段数，默认为5
axisLine: { // 坐标轴线
show: true, // 默认显示，属性show控制显示与否
onZero: true,
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否，默认不显示
inside: false, // 控制小标记是否在grid里
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// clickable: false,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显示，属性show控制显示与否
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
};
var ecDate = require('../util/date');
var zrUtil = require('zrender/tool/util');
......
src/echarts.js
浏览文件 @ 21bb5cb7
......@@ -90,7 +90,7 @@ define(function (require) {
// Just set something to let it be!
// by kener 2015-01-09
dom.innerHTML = '';
this._themeConfig = zrUtil.clone(ecConfig);
this._themeConfig = {}; // zrUtil.clone(ecConfig);
this.dom = dom;
// this._zr;
......@@ -229,18 +229,18 @@ define(function (require) {
var Island = require('./chart/island');
this._island = new Island(this._themeConfig, this._messageCenter, _zr, {}, this);
this.chart.island = this._island;
// 内置通用组件
// 工具箱
var Toolbox = require('./component/toolbox');
this._toolbox = new Toolbox(this._themeConfig, this._messageCenter, _zr, {}, this);
this.component.toolbox = this._toolbox;
var componentLibrary = require('./component');
componentLibrary.define('title', require('./component/title'));
componentLibrary.define('tooltip', require('./component/tooltip'));
componentLibrary.define('legend', require('./component/legend'));
if (_zr.getWidth() === 0 || _zr.getHeight() === 0) {
console.error('Dom’s width & height should be ready before init.');
}
......@@ -629,12 +629,15 @@ define(function (require) {
// 空数据
this.clear();
var loadOption = (this._option && this._option.noDataLoadingOption)
|| this._themeConfig.noDataLoadingOption
|| this._themeConfig.noDataLoadingOption
|| ecConfig.noDataLoadingOption
|| {
text: (this._option && this._option.noDataText)
|| this._themeConfig.noDataText,
|| this._themeConfig.noDataText
|| ecConfig.noDataText,
effect: (this._option && this._option.noDataEffect)
|| this._themeConfig.noDataEffect
|| ecConfig.noDataEffect
};
this.showLoading(loadOption);
return true;
......@@ -897,14 +900,16 @@ define(function (require) {
while (len--) {
var mergeItem = mergeList[len];
if (magicOption[mergeItem] == null) {
magicOption[mergeItem] = this._themeConfig[mergeItem];
magicOption[mergeItem] = this._themeConfig[mergeItem] != null
? this._themeConfig[mergeItem]
: ecConfig[mergeItem];
}
}
// 数值系列的颜色列表，不传则采用内置颜色，可配数组，借用zrender实例注入，会有冲突风险，先这样
var themeColor = magicOption.color;
if (!(themeColor && themeColor.length)) {
themeColor = this._themeConfig.color;
themeColor = this._themeConfig.color || ecConfig.color;
}
this._zr.getColor = function (idx) {
......@@ -1564,7 +1569,7 @@ define(function (require) {
var finalTextStyle = zrUtil.merge(
zrUtil.clone(textStyle),
this._themeConfig.textStyle
this._themeConfig.textStyle || ecConfig.textStyle
);
textStyle.textFont = finalTextStyle.fontStyle + ' '
+ finalTextStyle.fontWeight + ' '
......@@ -1573,7 +1578,8 @@ define(function (require) {
textStyle.text = loadingOption.text
|| (this._option && this._option.loadingText)
|| this._themeConfig.loadingText;
|| this._themeConfig.loadingText
|| ecConfig.loadingText;
if (loadingOption.x != null) {
textStyle.x = loadingOption.x;
......@@ -1591,6 +1597,7 @@ define(function (require) {
loadingOption.effect
|| (this._option && this._option.loadingEffect)
|| this._themeConfig.loadingEffect
|| ecConfig.loadingEffect
]
|| effectList.spin;
}
......@@ -1628,28 +1635,34 @@ define(function (require) {
theme = theme || {};
}
// 复位默认配置
// this._themeConfig会被别的对象引用持有
// 所以不能改成this._themeConfig = {};
for (var key in this._themeConfig) {
delete this._themeConfig[key];
}
for (var key in ecConfig) {
this._themeConfig[key] = zrUtil.clone(ecConfig[key]);
}
// // 复位默认配置
// // this._themeConfig会被别的对象引用持有
// // 所以不能改成this._themeConfig = {};
// for (var key in this._themeConfig) {
// delete this._themeConfig[key];
// }
// for (var key in ecConfig) {
// this._themeConfig[key] = zrUtil.clone(ecConfig[key]);
// }
// 颜色数组随theme，不merge
theme.color && (this._themeConfig.color = []);
// // 颜色数组随theme，不merge
// theme.color && (this._themeConfig.color = []);
// 默认标志图形类型列表，不merge
theme.symbolList && (this._themeConfig.symbolList = []);
// // 默认标志图形类型列表，不merge
// theme.symbolList && (this._themeConfig.symbolList = []);
// 应用新主题
zrUtil.merge(this._themeConfig, zrUtil.clone(theme), true);
// // 应用新主题
// zrUtil.merge(this._themeConfig, zrUtil.clone(theme), true);
this._themeConfig = theme;
}
if (!_canvasSupported) { // IE8-
this._themeConfig.textStyle.fontFamily = this._themeConfig.textStyle.fontFamily2;
var textStyle = this._themeConfig.textStyle;
textStyle && textStyle.fontFamily && textStyle.fontFamily2
&& (textStyle.fontFamily = textStyle.fontFamily2);
textStyle = ecConfig.textStyle;
textStyle.fontFamily = textStyle.fontFamily2;
}
this._timeline && this._timeline.setTheme(true);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或