Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

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

力导布局legend升级

上级 4b93a1a8
隐藏空白更改
内联 并排
Showing with 142 addition and 69 deletion
doc/example/force.html
浏览文件 @ 8e0b1b01
......@@ -72,77 +72,82 @@ option = {
trigger: 'axis'
},
legend: {
data:['利润', '支出', '收入']
data:['收入','支出']
},
series : [
{
type:'force',
categories : [{
style : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab',
lineWidth : 2
categories : [
{
name: '收入',
itemStyle: {
normal: {
color : '#f08c2e',
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab',
lineWidth : 2
},
lineStyle : {
strokeColor : '#5182ab'
}
},
emphasis: {
//同上
}
},
style : { //这个改为上面的格式吧，跟其他保持一致，legend就有效了
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab',
lineWidth : 2
}
},
{
name:'支出',
itemStyle: {
normal: {
color : '#c5dcf0'
}
},
style : {
brushType : 'both',
color : '#c5dcf0',
strokeColor : '#5182ab',
lineWidth : 2
}
}
}, {
style : {
brushType : 'both',
color : '#c5dcf0',
strokeColor : '#5182ab',
lineWidth : 2
}
}],
],
minRadius : 5,
maxRadius : 10,
density : 1.2,
nodes:[{
category : 0,
value : 200,
}, {
category : 0,
value : 200,
}, {
category : 1,
value : 200,
}, {
category : 1,
value : 200
}, {
//孤立点
value : 300,
style : {
color : '#b10101'
nodes:[
{category : 0, value : 200},
{category : 0, value : 200},
{category : 1, value : 200},
{category : 1, value : 200},
{
value : 300, //孤立点
style : {
color : '#b10101'
}
}
}],
links : [{
source : 0,
target : 1,
weight : 1
}, {
source : 1,
target : 2,
weight : 1
}, {
source : 2,
target : 3,
weight : 1
}, {
source : 3,
target : 0,
weight : 1
}, {
source : 0,
target : 2,
weight : 1
}, {
source : 1,
target : 3,
weight : 1
}, {
source : 1,
target : 4,
weight : 2
}]
],
links : [
{source : 0, target : 1, weight : 1},
{source : 1, target : 2, weight : 1},
{source : 2, target : 3, weight : 1},
{source : 3, target : 0, weight : 1},
{source : 0, target : 2, weight : 1},
{source : 1, target : 3, weight : 1},
{source : 1, target : 4, weight : 2}
]
}
]
};
......
src/chart/force.js
浏览文件 @ 8e0b1b01
......@@ -77,7 +77,7 @@ define(function(require) {
var mouseX, mouseY;
function _buildShape() {
var legend = component.legend;
temperature = 1.0;
viewportWidth = zr.getWidth();
viewportHeight = zr.getHeight();
......@@ -95,6 +95,18 @@ define(function(require) {
density = self.deepQuery([serie], 'density');
categories = self.deepQuery([serie], 'categories');
// 同步selected状态
for (var j = 0, len = categories.length; j < len; j++) {
if (categories[j].name) {
if (legend){
self.selectedMap[categories[j].name] =
legend.isSelected(categories[j].name);
} else {
self.selectedMap[categories[j].name] = true;
}
}
}
linkStyle = self.deepQuery([serie], 'linkStyle');
nodeStyle = self.deepQuery([serie], 'nodeStyle');
......@@ -105,7 +117,8 @@ define(function(require) {
var area = viewportWidth * viewportHeight;
// Formula in 'Graph Drawing by Force-directed Placement'
k = 0.5 * Math.sqrt( area / nodesRawData.length );
// 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑
_buildLinkShapes(nodesRawData, linksRawData);
_buildNodeShapes(nodesRawData, minRadius, maxRadius);
}
......@@ -407,7 +420,6 @@ define(function(require) {
// 处理完拖拽事件后复位
self.isDragstart = false;
// 我想你需要这个
zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
}
......@@ -426,7 +438,7 @@ define(function(require) {
// 别status = {}赋值啊！！
status.dragIn = true;
//你自己refresh的话把他设为false，设true就会重新掉refresh接口
//你自己refresh的话把他设为false，设true就会重新调refresh接口
status.needRefresh = false;
// 处理完拖拽事件后复位
......
src/component/legend.js
浏览文件 @ 8e0b1b01
......@@ -283,6 +283,8 @@ define(function (require) {
*/
function _getSeriesByName(name) {
var series = option.series;
var hasFind;
var data;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].name == name) {
// 系列名称优先
......@@ -291,8 +293,8 @@ define(function (require) {
if (series[i].type == ecConfig.CHART_TYPE_PIE) {
// 饼图得查找里面的数据名字
var hasFind = false;
var data = series[i].data;
hasFind = false;
data = series[i].data;
for (var j = 0, k = data.length; j < k; j++) {
if (data[j].name == name) {
hasFind = true;
......@@ -303,6 +305,22 @@ define(function (require) {
return series[i];
}
}
else if (series[i].type == ecConfig.CHART_TYPE_FORCE) {
// 力导布局查找categories配置
hasFind = false;
data = series[i].categories;
for (var j = 0, k = data.length; j < k; j++) {
if (data[j].name == name) {
data = data[j];
data.type = ecConfig.CHART_TYPE_FORCE;
hasFind = true;
break;
}
}
if (hasFind) {
return data;
}
}
}
return;
}
......@@ -542,6 +560,9 @@ define(function (require) {
},
bar : function (ctx, style) {
ctx.rect(style.x, style.y + 1, style.width, style.height - 2);
},
force : function(ctx, style) {
require('zrender/shape').get('icon').get('circle')(ctx, style);
}
}
......
src/config.js
浏览文件 @ 8e0b1b01
......@@ -443,6 +443,41 @@ define(function() {
density : 1.0,
// 分类里如果有样式会覆盖节点默认样式
categories : [],
itemStyle: {
normal: {
// color: 各异,
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab'
},
lineStyle : {
strokeColor : '#5182ab'
}
},
emphasis: {
// color: 各异,
label: {
show: false,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab'
},
lineStyle : {
strokeColor : '#5182ab'
}
}
},
//建议下面两个改成上面的格式
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
......@@ -450,7 +485,7 @@ define(function() {
},
linkStyle : {
strokeColor : '#5182ab'
},
}
},
EVENT: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或