Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 1b4a0691 编写于 作者: K kener
浏览文件
操作

bar item的边线可配

上级 e29f7ecd
隐藏空白更改
内联 并排
Showing with 108 addition and 41 deletion
doc/example/bar.html
浏览文件 @ 1b4a0691
......@@ -104,6 +104,7 @@ option = {
type:'bar',
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
lineStyle:{color:'red'},
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
......@@ -113,6 +114,7 @@ option = {
})()
},
emphasis: {
lineStyle:{width:5, color:'green'},
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
......@@ -144,9 +146,11 @@ option = {
stack: '总量',
itemStyle: { // 系列级个性化
normal: {
lineStyle:{width:10,color:'tomato'},
color: 'red'
},
emphasis: {
lineStyle:{color:'red'},
color: 'blue'
}
},
......
src/chart/bar.js
浏览文件 @ 1b4a0691
......@@ -495,10 +495,10 @@ define(function(require) {
hasFound = false; // 同一堆叠第一个barWidth生效
for (var m = 0, n = locationMap[j].length; m < n; m++) {
seriesIndex = locationMap[j][m];
queryTarget = [series[seriesIndex]];
queryTarget = series[seriesIndex];
if (!ignoreUserDefined) {
if (!hasFound) {
sBarWidth = self.deepQuery(
sBarWidth = self.query(
queryTarget,
'barWidth'
);
......@@ -513,19 +513,19 @@ define(function(require) {
}
}
barMinHeightMap[seriesIndex] = self.deepQuery(
barMinHeightMap[seriesIndex] = self.query(
queryTarget,
'barMinHeight'
);
barGap = typeof barGap != 'undefined'
? barGap
: self.deepQuery(
: self.query(
queryTarget,
'barGap'
);
barCategoryGap = typeof barCategoryGap != 'undefined'
? barCategoryGap
: self.deepQuery(
: self.query(
queryTarget,
'barCategoryGap'
);
......@@ -630,14 +630,23 @@ define(function(require) {
var data = serie.data[dataIndex];
// 多级控制
var defaultColor = _sIndex2colorMap[seriesIndex];
var queryTarget = [data, serie];
var normalColor = self.deepQuery(
[data, serie],
queryTarget,
'itemStyle.normal.color'
) || defaultColor;
var emphasisColor = self.deepQuery(
[data, serie],
queryTarget,
'itemStyle.emphasis.color'
);
var normalLineStyle = self.deepMerge(
queryTarget,
'itemStyle.normal.lineStyle'
);
var emphasisLineStyle = self.deepMerge(
queryTarget,
'itemStyle.emphasis.lineStyle'
);
barShape = {
shape : 'rectangle',
zlevel : _zlevelBase,
......@@ -649,7 +658,8 @@ define(function(require) {
height : height,
brushType : 'both',
color : normalColor,
strokeColor : '#fff'
lineWidth : normalLineStyle.width,
strokeColor : normalLineStyle.color
},
highlightStyle : {
color : emphasisColor
......@@ -657,19 +667,30 @@ define(function(require) {
? zrColor.lift(normalColor, -0.2)
: normalColor
),
strokeColor : 'rgba(0,0,0,0)'
lineWidth : emphasisLineStyle.width,
strokeColor : emphasisLineStyle.color
},
_orient : orient
};
// 考虑线宽的显示优化
if (barShape.style.height > normalLineStyle.width
&& barShape.style.width > normalLineStyle.width
) {
barShape.style.y += normalLineStyle.width / 2;
barShape.style.height -= normalLineStyle.width;
barShape.style.x += normalLineStyle.width / 2;
barShape.style.width -= normalLineStyle.width;
}
else {
// 太小了，废了边线
barShape.style.brushType = 'fill';
}
barShape.highlightStyle.textColor = barShape.highlightStyle.color;
barShape = self.addLabel(barShape, serie, data, name, orient);
if (self.deepQuery(
[data, serie, option],
'calculable'
)
) {
if (self.deepQuery([data, serie, option],'calculable')) {
self.setCalculable(barShape);
barShape.draggable = true;
}
......
src/component/base.js
浏览文件 @ 1b4a0691
......@@ -99,39 +99,39 @@ define(function(require) {
}
/**
* 获取多级控制嵌套属性的基础方法
* 返回ctrList中优先级最高（最靠前）的非undefined属性，ctrList中均无定义则返回undefined
* 获取嵌套选项的基础方法
* 返回optionTarget中位于optionLocation上的值，如果没有定义，则返回undefined
*/
var deepQuery = (function() {
/**
* 获取嵌套选项的基础方法
* 返回optionTarget中位于optionLocation上的值，如果没有定义，则返回undefined
*/
function _query(optionTarget, optionLocation) {
function query(optionTarget, optionLocation) {
if (typeof optionTarget == 'undefined') {
return undefined;
}
if (!optionLocation) {
return optionTarget;
}
optionLocation = optionLocation.split('.');
var length = optionLocation.length;
var curIdx = 0;
while (curIdx < length) {
optionTarget = optionTarget[optionLocation[curIdx]];
if (typeof optionTarget == 'undefined') {
return undefined;
}
if (!optionLocation) {
return optionTarget;
}
optionLocation = optionLocation.split('.');
var length = optionLocation.length;
var curIdx = 0;
while (curIdx < length) {
optionTarget = optionTarget[optionLocation[curIdx]];
if (typeof optionTarget == 'undefined') {
return undefined;
}
curIdx++;
}
return optionTarget;
curIdx++;
}
return optionTarget;
}
/**
* 获取多级控制嵌套属性的基础方法
* 返回ctrList中优先级最高（最靠前）的非undefined属性，ctrList中均无定义则返回undefined
*/
var deepQuery = (function() {
return function(ctrList, optionLocation) {
var finalOption;
for (var i = 0, l = ctrList.length; i < l; i++) {
finalOption = _query(ctrList[i], optionLocation);
finalOption = query(ctrList[i], optionLocation);
if (typeof finalOption != 'undefined') {
return finalOption;
}
......@@ -139,6 +139,33 @@ define(function(require) {
return undefined;
};
})();
/**
* 获取多级控制嵌套属性的基础方法
* 根据ctrList中优先级合并产出目标属性
*/
var deepMerge = (function() {
return function(ctrList, optionLocation) {
var finalOption;
var tempOption;
var len = ctrList.length;
while (len--) {
tempOption = query(ctrList[len], optionLocation);
if (typeof tempOption != 'undefined') {
if (typeof finalOption == 'undefined') {
finalOption = tempOption;
}
else {
zrUtil.merge(
finalOption, tempOption,
{ 'overwrite': true, 'recursive': true }
);
}
}
}
return finalOption;
};
})();
/**
* 获取自定义和默认配置合并后的字体设置
......@@ -284,7 +311,7 @@ define(function(require) {
}
}
}
// 还原自适应原始定义，resize用
function restoreAdaptiveParams(series, attrs, isAll) {
for (var i = 0, l = series.length; i < l; i++) {
......@@ -297,7 +324,12 @@ define(function(require) {
}
}
}
// 亚像素优化
function subPixelOptimize(position, lineWidth) {
position += position == Math.ceil(position) ? 0.5 : 0;
}
function resize() {
self.refresh && self.refresh();
}
......@@ -329,7 +361,9 @@ define(function(require) {
self.getZlevelBase = getZlevelBase;
self.reformOption = reformOption;
self.reformCssArray = reformCssArray;
self.query = query;
self.deepQuery = deepQuery;
self.deepMerge = deepMerge;
self.getFont = getFont;
self.addLabel = addLabel;
self.parsePercent = parsePercent;
......
src/config.js
浏览文件 @ 1b4a0691
......@@ -384,6 +384,10 @@ define(function() {
barCategoryGap : '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: '#fff'
},
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
......@@ -393,6 +397,10 @@ define(function() {
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(0,0,0,0)'
},
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或