Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

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

icon升级，legend，line的shape转icon实现 

legend图形shape统一转为icon，带上symbol
line symnol的shape统一转为icon，支持N角星
上级 25ae5528
隐藏空白更改
内联 并排
Showing with 346 addition and 258 deletion
doc/doc.html
浏览文件 @ b17c4abf
......@@ -1395,13 +1395,17 @@ feature : {
<td> {string} symbol </td>
<td> null </td>
<td> 折线图，散点图 </td>
<td> 拐点图形类型，默认自动选择（8种类型循环使用，不显示拐点图形可设为'none'），支持类型有：<br/>'circle' | 'rectangle' | 'triangle' | 'diamond' |<br/>'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'</td>
<td> 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），支持类型有：<br/>
'circle' | 'rectangle' | 'triangle' | 'diamond' |<br/>
'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'<br/>
(另外，还支持一种更特别的标志图形'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星)
</td>
</tr>
<tr>
<td> {number | Function} symbolSize </td>
<td> 4 </td>
<td> 折线图 ，散点图 </td>
<td> 拐点图形大小，可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组）</td>
<td> 标志图形大小，可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组）</td>
</tr>
<tr>
<td> {Array} center </td>
......
doc/example/line.html
浏览文件 @ b17c4abf
......@@ -129,8 +129,8 @@ option = {
120, 82,
{
value:201,
symbol: 'circle', // 数据级个性化拐点图形
symbolSize : 10
symbol: 'star', // 数据级个性化拐点图形
symbolSize : 15
},
{
value:134,
......@@ -159,10 +159,11 @@ option = {
320, 332, '-', 334,
{
value: 390,
symbolSize : 10,
symbol: 'star6',
symbolSize : 15,
itemStyle: { // 数据级个性化折线样式
normal: {
color: 'green'
color: 'yellowgreen'
},
emphasis: {
color: 'orange'
......
src/chart/line.js
浏览文件 @ b17c4abf
......@@ -41,6 +41,10 @@ define(function(require) {
];
var _sIndex2ShapeMap = {}; // series拐点图形类型，seriesIndex索引到shape type
require('zrender/shape').get('icon').define(
'legendLineIcon', legendLineIcon
);
function _buildShape() {
self.selectedMap = {};
......@@ -127,23 +131,37 @@ define(function(require) {
var legend = component.legend;
var locationMap = []; // 需要返回的东西：数组位置映射到系列索引
var maxDataLength = 0; // 需要返回的东西：最大数据长度
var iconShape;
// 计算需要显示的个数和分配位置并记在下面这个结构里
for (var i = 0, l = seriesArray.length; i < l; i++) {
serie = series[seriesArray[i]];
serieName = serie.name;
_sIndex2ShapeMap[seriesArray[i]]
= _sIndex2ShapeMap[seriesArray[i]]
|| self.deepQuery([serie],'symbol')
|| _symbol[i % _symbol.length];
if (legend){
self.selectedMap[serieName] = legend.isSelected(serieName);
_sIndex2ColorMap[seriesArray[i]]
= legend.getColor(serieName);
iconShape = legend.getItemShape(serieName);
if (iconShape) {
// 回调legend，换一个更形象的icon
iconShape.shape = 'icon';
iconShape.style.iconType = 'legendLineIcon';
iconShape.style.symbol =
_sIndex2ShapeMap[seriesArray[i]];
legend.setItemShape(serieName, iconShape);
}
} else {
self.selectedMap[serieName] = true;
_sIndex2ColorMap[seriesArray[i]]
= zr.getColor(seriesArray[i]);
}
_sIndex2ShapeMap[seriesArray[i]]
= _sIndex2ShapeMap[seriesArray[i]]
|| self.deepQuery([serie],'symbol')
|| _symbol[i % _symbol.length];
if (self.selectedMap[serieName]) {
stackKey = serie.stack || (magicStackKey + seriesArray[i]);
......@@ -605,91 +623,39 @@ define(function(require) {
var symbol = self.deepQuery([data], 'symbol')
|| _sIndex2ShapeMap[seriesIndex]
|| 'cricle';
var symbolSize = self.deepQuery(
[data, serie],
'symbolSize'
);
var itemShape;
switch (symbol) {
case 'circle' :
case 'emptyCircle' :
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : symbol == 'circle'
? 'fill' : 'stroke'
}
};
break;
case 'rectangle' :
case 'emptyRectangle' :
itemShape = {
shape : 'rectangle',
style : {
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : symbol == 'rectangle'
? 'fill' : 'stroke'
}
};
break;
case 'triangle' :
case 'emptyTriangle' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y + symbolSize],
[x - symbolSize, y + symbolSize]
],
brushType : symbol == 'triangle'
? 'fill' : 'stroke'
}
};
break;
case 'diamond' :
case 'emptyDiamond' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y],
[x, y + symbolSize],
[x - symbolSize, y]
],
brushType : symbol == 'diamond'
? 'fill' : 'stroke'
}
};
break;
default:
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : 'fill'
}
};
break;
}
itemShape.clickable = true;
itemShape.zlevel = _zlevelBase + 1;
itemShape.style.color = normalColor;
itemShape.style.strokeColor = normalColor;
itemShape.highlightStyle = {
color : emphasisColor,
strokeColor : emphasisColor
var symbolSize = self.deepQuery([data, serie],'symbolSize');
var itemShape = {
shape : 'icon',
zlevel : _zlevelBase + 1,
style : {
iconType : symbol.replace('empty', '').toLowerCase(),
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : 'both',
color : symbol.match('empty') ? '#fff' : normalColor,
strokeColor : normalColor,
lineWidth: 2
},
highlightStyle : {
color : emphasisColor,
strokeColor : emphasisColor
},
clickable : true,
};
if (symbol.match('star')) {
itemShape.style.iconType = 'star';
itemShape.style.n =
(symbol.replace('empty', '').replace('star','') - 0) || 5;
}
if (symbol == 'none') {
itemShape.invisible = true;
itemShape.hoverable = false;
}
if (self.deepQuery([data, serie, option], 'calculable')) {
self.setCalculable(itemShape);
......@@ -797,6 +763,44 @@ define(function(require) {
init(option, component);
}
function legendLineIcon(ctx, style) {
var x = style.x;
var y = style.y;
var width = style.width;
var height = style.height;
var dy = height / 2;
ctx.moveTo(x, y + dy);
ctx.lineTo(x + width, y + dy);
if (style.symbol.match('empty')) {
ctx.fillStyle = '#fff';
}
style.brushType = 'both';
var symbol = style.symbol.replace('empty', '').toLowerCase();
if (symbol.match('star')) {
dy = (symbol.replace('star','') - 0) || 5;
y -= 1;
symbol = 'star';
}
else if (symbol == 'rectangle') {
x += (width - height) / 2;
width = height;
}
symbol = require('zrender/shape').get('icon').get(symbol);
if (symbol) {
symbol(ctx, {
x : x + 3,
y : y + 3,
width : width - 6,
height : height - 6,
n : dy
});
}
}
// 图表注册
require('../chart').define('line', Line);
......
src/chart/scatter.js
浏览文件 @ b17c4abf
......@@ -48,22 +48,32 @@ define(function(require) {
var seriesArray = [];
var serie; // 临时映射变量
var serieName; // 临时映射变量
var iconShape;
for (var i = 0, l = series.length; i < l; i++) {
serie = series[i];
serieName = serie.name;
if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
series[i] = self.reformOption(series[i]);
_sIndex2ShapeMap[i] = self.deepQuery([serie], 'symbol')
|| _symbol[i % _symbol.length];
if (legend){
self.selectedMap[serieName] =
legend.isSelected(serieName);
_sIndex2ColorMap[i] =
zrColor.alpha(legend.getColor(serieName),0.5);
iconShape = legend.getItemShape(serieName);
if (iconShape) {
// 回调legend，换一个更形象的icon
iconShape.shape = 'icon';
iconShape.style.iconType = _sIndex2ShapeMap[i];
legend.setItemShape(serieName, iconShape);
}
} else {
self.selectedMap[serieName] = true;
_sIndex2ColorMap[i] = zr.getColor(i);
}
_sIndex2ShapeMap[i] = self.deepQuery([serie], 'symbol')
|| _symbol[i % _symbol.length];
if (self.selectedMap[serieName]) {
seriesArray.push(i);
......@@ -236,102 +246,49 @@ define(function(require) {
*/
function _getSymbol(
seriesIndex, dataIndex, name,
x, y, symbolSize, symbolType,
x, y, symbolSize, symbol,
nColor, nLineWidth, eColor, eLineWidth
) {
var itemShape;
switch (symbolType) {
case 'circle' :
case 'emptyCircle' :
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : symbolType == 'circle'
? 'fill' : 'stroke'
}
};
break;
case 'rectangle' :
case 'emptyRectangle' :
itemShape = {
shape : 'rectangle',
style : {
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : symbolType == 'rectangle'
? 'fill' : 'stroke'
}
};
break;
case 'triangle' :
case 'emptyTriangle' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y + symbolSize],
[x - symbolSize, y + symbolSize]
],
brushType : symbolType == 'triangle'
? 'fill' : 'stroke'
}
};
break;
case 'diamond' :
case 'emptyDiamond' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y],
[x, y + symbolSize],
[x - symbolSize, y]
],
brushType : symbolType == 'diamond'
? 'fill' : 'stroke'
}
};
break;
default:
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : 'fill'
}
};
break;
}
itemShape.clickable = true;
itemShape._serieIndex = seriesIndex;
itemShape.zlevel = _zlevelBase;
itemShape.style.color = nColor;
itemShape.style.strokeColor = nColor;
itemShape.style.lineWidth = nLineWidth;
itemShape.highlightStyle = {
color : eColor,
strokeColor : eColor,
lineWidth : eLineWidth
var itemShape = {
shape : 'icon',
zlevel : _zlevelBase,
style : {
iconType : symbol.replace('empty', '').toLowerCase(),
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : symbol.match('empty') ? 'stroke' : 'fill',
color : nColor,
strokeColor : nColor,
lineWidth: nLineWidth
},
highlightStyle : {
color : eColor,
strokeColor : eColor,
lineWidth : eLineWidth
},
clickable : true,
};
if (symbol.match('star')) {
itemShape.style.iconType = 'star';
itemShape.style.n =
(symbol.replace('empty', '').replace('star','') - 0) || 5;
}
if (symbol == 'none') {
itemShape.invisible = true;
itemShape.hoverable = false;
}
/*
if (self.deepQuery([data, serie, option], 'calculable')) {
self.setCalculable(itemShape);
itemShape.draggable = true;
}
*/
// for animation
itemShape._x = x;
itemShape._y = y;
ecData.pack(
itemShape,
series[seriesIndex], seriesIndex,
......@@ -339,6 +296,10 @@ define(function(require) {
name
);
// for animation
itemShape._x = x;
itemShape._y = y;
return itemShape;
}
......
src/component/legend.js
浏览文件 @ b17c4abf
......@@ -33,6 +33,11 @@ define(function (require) {
var _colorMap = {};
var _selectedMap = {};
var icon = require('zrender/shape').get('icon');
for (var k in legendIcon) {
icon.define('legendicon' + k, legendIcon[k]);
//console.log('legendicon' + k, legendIcon[k])
}
function _buildShape() {
_itemGroupLocation = _getItemGroupLocation();
......@@ -80,7 +85,7 @@ define(function (require) {
if (itemType) {
itemType = itemType.type;
} else {
itemType = '';
itemType = 'bar';
}
color = getColor(itemName);
......@@ -100,10 +105,8 @@ define(function (require) {
itemShape = _getItemShapeByType(
lastX, lastY,
itemWidth, itemHeight,
(_selectedMap[itemName]
? color : '#ccc'),
itemType,
_selectedMap[itemName]
(_selectedMap[itemName] ? color : '#ccc'),
itemType
);
itemShape._name = itemName;
itemShape.onclick = _legendSelected;
......@@ -305,69 +308,39 @@ define(function (require) {
}
function _getItemShapeByType(x, y, width, height, color, itemType) {
var itemShape = {
shape : 'icon',
zlevel : _zlevelBase,
style : {
iconType : 'legendicon' + itemType,
x : x,
y : y,
width : width,
height : height,
color : color,
strokeColor : color,
lineWidth : 2
},
clickable : true
};
// 特殊设置
switch (itemType) {
case 'line' :
return {
shape : 'line',
zlevel : _zlevelBase,
style : {
xStart : x,
yStart : y + height / 2,
xEnd : x + width,
yEnd : y + height / 2,
strokeColor : color,
lineWidth : 5
},
clickable : true
};
case 'pie' :
return {
shape : 'sector',
zlevel : _zlevelBase,
style : {
x : x + width / 2,
y : y + height + 2,
r : height + 2,
r0 : 6,
startAngle : 45,
endAngle : 135,
color : color
},
clickable : true
};
itemShape.style.brushType = 'stroke';
break;
case 'k' :
return {
shape : 'candle',
zlevel : _zlevelBase,
style : {
x : x + width / 2,
y : [y + 1, y + 1, y + height - 6, y + height],
width : width - 6,
color : self.deepQuery(
[ecConfig], 'k.itemStyle.normal.color'
) || '#fff',
strokeColor : self.deepQuery(
[ecConfig], 'k.itemStyle.normal.lineStyle.color'
) || '#ff3200',
lineWidth : 2,
brushType : 'both'
},
clickable : true
};
default :
return {
shape : 'rectangle',
zlevel : _zlevelBase,
style : {
x : x,
y : y + 1,
width : width,
height : height - 2,
color : color
},
clickable : true
};
itemShape.style.brushType = 'both';
itemShape.style.color = self.deepQuery(
[ecConfig], 'k.itemStyle.normal.color'
) || '#fff';
itemShape.style.strokeColor = color != '#ccc'
? self.deepQuery(
[ecConfig], 'k.itemStyle.normal.lineStyle.color'
) || '#ff3200'
: color;
}
return itemShape;
}
function _legendSelected(param) {
......@@ -475,6 +448,40 @@ define(function (require) {
}
legendOption.data = finalData;
}
/**
* 特殊图形元素回调设置
* @param {Object} name
* @param {Object} itemShape
*/
function getItemShape(name) {
var shape;
for (var i = 0, l = self.shapeList.length; i < l; i++) {
shape = self.shapeList[i];
if (shape._name == name && shape.shape != 'text') {
return shape;
}
}
}
/**
* 特殊图形元素回调设置
* @param {Object} name
* @param {Object} itemShape
*/
function setItemShape(name, itemShape) {
var shape;
for (var i = 0, l = self.shapeList.length; i < l; i++) {
shape = self.shapeList[i];
if (shape._name == name && shape.shape != 'text') {
if (!_selectedMap[name]) {
itemShape.style.color = '#ccc';
itemShape.style.strokeColor = '#ccc';
}
zr.modShape(shape.id, itemShape)
}
}
}
function isSelected(itemName) {
if (typeof _selectedMap[itemName] != 'undefined') {
......@@ -493,11 +500,51 @@ define(function (require) {
self.hasColor = hasColor;
self.add = add;
self.del = del;
self.getItemShape = getItemShape;
self.setItemShape = setItemShape;
self.isSelected = isSelected;
init(option);
}
var legendIcon = {
line : function (ctx, style) {
var dy = style.height / 2;
ctx.moveTo(style.x, style.y + dy);
ctx.lineTo(style.x + style.width,style.y + dy);
},
pie : function (ctx, style) {
var x = style.x;
var y = style.y;
var width = style.width;
var height = style.height;
var sector = require('zrender/shape').get('sector');
sector.buildPath(ctx, {
x : x + width / 2,
y : y + height + 2,
r : height + 2,
r0 : 6,
startAngle : 45,
endAngle : 135
});
},
k : function (ctx, style) {
var x = style.x;
var y = style.y;
var width = style.width;
var height = style.height;
var candle = require('zrender/shape').get('candle');
candle.buildPath(ctx, {
x : x + width / 2,
y : [y + 1, y + 1, y + height - 6, y + height],
width : width - 6
});
},
bar : function (ctx, style) {
ctx.rect(style.x, style.y + 1, style.width, style.height - 2);
}
}
require('../component').define('legend', Legend);
return Legend;
......
src/component/toolbox.js
浏览文件 @ b17c4abf
......@@ -118,7 +118,8 @@ define(function (require) {
shadowColor: '#ccc',
shadowBlur : 2,
shadowOffsetX : 2,
shadowOffsetY : 2
shadowOffsetY : 2,
brushType: 'stroke'
},
highlightStyle : {
lineWidth : 2,
......@@ -633,9 +634,6 @@ define(function (require) {
self.resetMagicType = resetMagicType;
}
// 动态扩展zrender shape：icon
require('../util/shape/icon');
require('../component').define('toolbox', Toolbox);
return Toolbox;
......
src/echarts.js
浏览文件 @ b17c4abf
......@@ -91,6 +91,8 @@ define(function(require) {
_zr.on(zrConfig.EVENT.DRAGLEAVE, _ondragleave);
_zr.on(zrConfig.EVENT.DROP, _ondrop);
// 动态扩展zrender shape：icon
require('./util/shape/icon');
// 内置图表注册
var chartLibrary = require('./chart');
......@@ -99,7 +101,6 @@ define(function(require) {
var Island = chartLibrary.get('island');
_island = new Island(_messageCenter, _zr);
// 内置组件注册
var componentLibrary = require('./component');
require('./component/axis');
......
src/util/shape/icon.js
浏览文件 @ b17c4abf
......@@ -81,7 +81,6 @@ define(
function Icon() {
this.type = 'icon';
this.brushTypeOnly = 'stroke';
this._iconLibrary = {
mark : _iconMark,
markUndo : _iconMarkUndo,
......@@ -89,7 +88,14 @@ define(
refresh : _iconRefresh,
lineChart : _iconLineChart,
barChart : _iconBarChart,
dataView : _iconDataView
dataView : _iconDataView,
cross : _iconCross,
circle : _iconCircle,
rectangle : _iconRectangle,
triangle : _iconTriangle,
diamond : _iconDiamond,
star : _iconStar
};
}
......@@ -169,6 +175,7 @@ define(
ctx.moveTo(style.x + 13 * dx, style.y);
ctx.lineTo(style.x + style.width, style.y + 4 * dy);
ctx.lineTo(style.x + 11 * dx, style.y + 5 * dy);
ctx.moveTo(style.x, style.y); // 避免closePath
}
function _iconLineChart(ctx, style) {
......@@ -183,6 +190,7 @@ define(
ctx.lineTo(style.x + 7 * dx, style.y + 6 * dy);
ctx.lineTo(style.x + 11 * dx, style.y + 11 * dy);
ctx.lineTo(style.x + 15 * dx, style.y + 2 * dy);
ctx.moveTo(style.x, style.y); // 避免closePath
}
function _iconBarChart(ctx, style) {
......@@ -227,7 +235,71 @@ define(
ctx.moveTo(style.x + 3 * dx, style.y + 12 * dx);
ctx.lineTo(style.x + 9 * dx, style.y + 12 * dx);
}
function _iconCross(ctx, style) {
var x = style.x;
var y = style.y;
var width = style.width;
var height = style.height;
ctx.moveTo(x, y + height / 2);
ctx.lineTo(x + width, y + height / 2);
ctx.moveTo(x + width / 2, y);
ctx.lineTo(x + width / 2, y + height);
}
function _iconCircle(ctx, style) {
var width = style.width / 2;
var height = style.height / 2;
ctx.arc(
style.x + width,
style.y + height,
Math.min(width, height),
0,
Math.PI * 2
);
}
function _iconRectangle(ctx, style) {
ctx.rect(style.x, style.y, style.width, style.height);
}
function _iconTriangle(ctx, style) {
var width = style.width / 2;
var height = style.height / 2;
var x = style.x + width;
var y = style.y + height;
var symbolSize = Math.min(width, height);
ctx.moveTo(x, y - symbolSize);
ctx.lineTo(x + symbolSize, y + symbolSize);
ctx.lineTo(x - symbolSize, y + symbolSize);
ctx.lineTo(x, y - symbolSize);
}
function _iconDiamond(ctx, style) {
var width = style.width / 2;
var height = style.height / 2;
var x = style.x + width;
var y = style.y + height;
var symbolSize = Math.min(width, height);
ctx.moveTo(x, y - symbolSize);
ctx.lineTo(x + symbolSize, y);
ctx.lineTo(x, y + symbolSize);
ctx.lineTo(x - symbolSize, y);
ctx.lineTo(x, y - symbolSize);
}
function _iconStar(ctx, style) {
var width = style.width / 2;
var height = style.height / 2;
var star = require('zrender/shape').get('star');
star.buildPath(ctx, {
x : style.x + width,
y : style.y + height,
r : Math.min(width, height),
n : style.n || 5
});
}
Icon.prototype = {
......@@ -320,11 +392,11 @@ define(
},
define : function(iconType, pathMethod) {
_iconLibrary[iconType] = pathMethod;
this._iconLibrary[iconType] = pathMethod;
},
get : function(iconType) {
return _iconLibrary[iconType];
return this._iconLibrary[iconType];
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或