Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
3c78e968
I
incubator-echarts
项目概览
半栈学徒
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3c78e968
编写于
9月 19, 2019
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(clip): support clip in custom series and large bar.
上级
de98ef69
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
241 addition
and
19 deletion
+241
-19
src/chart/bar/BarSeries.js
src/chart/bar/BarSeries.js
+6
-1
src/chart/bar/BarView.js
src/chart/bar/BarView.js
+17
-0
src/chart/bar/BaseBarSeries.js
src/chart/bar/BaseBarSeries.js
+0
-3
src/chart/custom.js
src/chart/custom.js
+19
-1
test/clip.html
test/clip.html
+199
-14
未找到文件。
src/chart/bar/BarSeries.js
浏览文件 @
3c78e968
...
...
@@ -48,6 +48,11 @@ export default BaseBarSeries.extend({
progressiveThreshold
=
largeThreshold
;
}
return
progressiveThreshold
;
}
}
,
defaultOption
:
{
// If clipped
// Only available on cartesian2d
clip
:
true
}
});
src/chart/bar/BarView.js
浏览文件 @
3c78e968
...
...
@@ -26,6 +26,7 @@ import Model from '../../model/Model';
import
barItemStyle
from
'
./barItemStyle
'
;
import
Path
from
'
zrender/src/graphic/Path
'
;
import
{
throttle
}
from
'
../../util/throttle
'
;
import
{
createClipPath
}
from
'
../helper/createClipPathFromCoordSys
'
;
var
BAR_BORDER_WIDTH_QUERY
=
[
'
itemStyle
'
,
'
barBorderWidth
'
];
var
_eventPos
=
[
0
,
0
];
...
...
@@ -97,6 +98,11 @@ export default echarts.extendChartView({
var
needsClip
=
seriesModel
.
get
(
'
clip
'
);
// If there is clipPath created in large mode. Remove it.
group
.
removeClipPath
();
// We don't use clipPath in normal mode because we needs a perfect animation
// And don't want the label are clipped.
data
.
diff
(
oldData
)
.
add
(
function
(
dataIndex
)
{
if
(
!
data
.
hasValue
(
dataIndex
))
{
...
...
@@ -181,6 +187,17 @@ export default echarts.extendChartView({
_renderLarge
:
function
(
seriesModel
,
ecModel
,
api
)
{
this
.
_clear
();
createLarge
(
seriesModel
,
this
.
group
);
// Use clipPath in large mode.
var
clipPath
=
seriesModel
.
get
(
'
clip
'
)
?
createClipPath
(
seriesModel
.
coordinateSystem
,
false
,
seriesModel
)
:
null
;
if
(
clipPath
)
{
this
.
group
.
setClipPath
(
clipPath
);
}
else
{
this
.
group
.
removeClipPath
(
null
);
}
},
_incrementalRenderLarge
:
function
(
params
,
seriesModel
)
{
...
...
src/chart/bar/BaseBarSeries.js
浏览文件 @
3c78e968
...
...
@@ -65,9 +65,6 @@ export default SeriesModel.extend({
progressive
:
3
e3
,
progressiveChunkMode
:
'
mod
'
,
// If clipped
// Only available on cartesian2d
clip
:
true
,
// barMaxWidth: null,
// 默认自适应
// barWidth: null,
...
...
src/chart/custom.js
浏览文件 @
3c78e968
...
...
@@ -27,6 +27,7 @@ import DataDiffer from '../data/DataDiffer';
import
SeriesModel
from
'
../model/Series
'
;
import
Model
from
'
../model/Model
'
;
import
ChartView
from
'
../view/Chart
'
;
import
{
createClipPath
}
from
'
./helper/createClipPathFromCoordSys
'
;
import
prepareCartesian2d
from
'
../coord/cartesian/prepareCustom
'
;
import
prepareGeo
from
'
../coord/geo/prepareCustom
'
;
...
...
@@ -80,7 +81,13 @@ SeriesModel.extend({
z
:
2
,
legendHoverLink
:
true
,
useTransform
:
true
useTransform
:
true
,
// Custom series will not clip by default.
// Some case will use custom series to draw label
// For example https://echarts.apache.org/examples/en/editor.html?c=custom-gantt-flight
// Only works on polar and cartesian2d coordinate system.
clip
:
false
// Cartesian coordinate system
// xAxisIndex: 0,
...
...
@@ -159,6 +166,17 @@ ChartView.extend({
})
.
execute
();
// Do clipping
var
clipPath
=
customSeries
.
get
(
'
clip
'
)
?
createClipPath
(
customSeries
.
coordinateSystem
,
false
,
customSeries
)
:
null
;
if
(
clipPath
)
{
group
.
setClipPath
(
clipPath
);
}
else
{
group
.
removeClipPath
();
}
this
.
_data
=
data
;
},
...
...
test/clip.html
浏览文件 @
3c78e968
...
...
@@ -43,18 +43,6 @@ under the License.
}
</style>
<div
class=
"chart"
id=
"scatter-clip-cartesian"
></div>
<div
class=
"chart"
id=
"scatter-clip-polar"
></div>
<!-- <h1>Scatter Clip with Incremental Rendering</h1>
<div class="chart" id="scatter-clip-incremental"></div> -->
<div
class=
"chart"
id=
"large-scatter-clip"
></div>
<div
class=
"chart"
id=
"lines-clip"
></div>
<div
class=
"chart"
id=
"line-dataZoom-time"
></div>
<div
class=
"chart"
id=
"line-dataZoom-category"
></div>
<div
class=
"chart"
id=
"bar-clip"
></div>
<div
class=
"chart"
id=
"custom-clip"
></div>
<div
class=
"chart"
id=
"candlestick-clip"
></div>
<script>
function
makeToggleChartButtons
(
toggleClip
)
{
return
[{
...
...
@@ -71,6 +59,7 @@ under the License.
}
</script>
<div
class=
"chart"
id=
"scatter-clip-cartesian"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -116,8 +105,7 @@ under the License.
<div
class=
"chart"
id=
"scatter-clip-polar"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -167,6 +155,7 @@ under the License.
<div
class=
"chart"
id=
"large-scatter-clip"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -246,6 +235,7 @@ under the License.
<div
class=
"chart"
id=
"lines-clip"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -369,6 +359,7 @@ under the License.
<div
class=
"chart"
id=
"line-dataZoom-time"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -536,6 +527,7 @@ under the License.
<div
class=
"chart"
id=
"line-dataZoom-category"
></div>
<script>
require
([
'
echarts
'
...
...
@@ -647,6 +639,7 @@ under the License.
</script>
<div
class=
"chart"
id=
"bar-clip"
></div>
<script>
require
([
...
...
@@ -767,5 +760,197 @@ under the License.
});
});
</script>
<div
class=
"chart"
id=
"bar-large-clip"
></div>
<script>
require
([
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
var
xAxisData
=
[];
var
data1
=
[];
var
data2
=
[];
var
data3
=
[];
var
data4
=
[];
for
(
var
i
=
0
;
i
<
1000
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
((
Math
.
random
()
*
5
).
toFixed
(
2
));
data2
.
push
(
Math
.
random
().
toFixed
(
2
));
data3
.
push
((
Math
.
random
()
+
0.5
).
toFixed
(
2
));
data4
.
push
((
Math
.
random
()
+
0.3
).
toFixed
(
2
));
}
var
isLarge
=
true
;
var
option
=
{
xAxis
:
{
data
:
xAxisData
,
silent
:
false
,
splitLine
:
{
show
:
false
},
splitArea
:
{
show
:
false
}
},
yAxis
:
{
min
:
1
,
max
:
4
,
splitArea
:
{
show
:
false
}
},
series
:
[{
name
:
'
bar
'
,
type
:
'
bar
'
,
stack
:
'
one
'
,
data
:
data1
,
large
:
true
},
{
show
:
false
,
name
:
'
bar2
'
,
type
:
'
bar
'
,
stack
:
'
one
'
,
data
:
data2
,
large
:
true
},
{
name
:
'
bar3
'
,
type
:
'
bar
'
,
stack
:
'
two
'
,
data
:
data3
,
large
:
true
},
{
name
:
'
bar4
'
,
type
:
'
bar
'
,
stack
:
'
two
'
,
data
:
data4
,
large
:
true
}]
}
function
setLarge
(
large
)
{
chart
.
setOption
({
series
:
[{
large
:
large
},
{
large
:
large
},
{
large
:
large
},
{
large
:
large
}]
})
}
var
chart
=
testHelper
.
create
(
echarts
,
'
bar-large-clip
'
,
{
option
:
option
,
title
:
'
Bar clip with large mode
'
,
buttons
:
makeToggleChartButtons
(
function
(
clip
)
{
chart
.
setOption
({
series
:
[{
clip
:
clip
},
{
clip
:
clip
},
{
clip
:
clip
},
{
clip
:
clip
}]
})
}).
concat
([{
text
:
'
Set large
'
,
onclick
:
function
()
{
setLarge
(
true
);
}
},
{
text
:
'
Set normal
'
,
onclick
:
function
()
{
setLarge
(
false
);
}
}])
});
});
</script>
<div
class=
"chart"
id=
"custom-clip"
></div>
<script>
require
([
'
echarts
'
],
function
(
echarts
)
{
var
data
=
[];
var
dataCount
=
20
;
for
(
var
i
=
0
;
i
<
dataCount
;
i
++
)
{
var
val
=
Math
.
random
()
*
1000
;
data
.
push
([
echarts
.
number
.
round
(
Math
.
random
()
*
100
),
echarts
.
number
.
round
(
Math
.
random
()
*
400
)
]);
}
function
renderItem
(
params
,
api
)
{
if
(
params
.
context
.
rendered
)
{
return
;
}
params
.
context
.
rendered
=
true
;
var
points
=
[];
for
(
var
i
=
0
;
i
<
data
.
length
;
i
++
)
{
points
.
push
(
api
.
coord
(
data
[
i
]));
}
var
color
=
api
.
visual
(
'
color
'
);
return
{
type
:
'
polygon
'
,
shape
:
{
points
:
points
},
style
:
api
.
style
({
fill
:
color
,
stroke
:
echarts
.
color
.
lift
(
color
)
})
};
}
option
=
{
tooltip
:
{
trigger
:
'
axis
'
},
legend
:
{
data
:
[
'
bar
'
,
'
error
'
]
},
dataZoom
:
[{
type
:
'
slider
'
,
filterMode
:
'
none
'
,
end
:
40
},
{
type
:
'
inside
'
,
filterMode
:
'
none
'
}],
xAxis
:
{},
yAxis
:
{},
series
:
[{
type
:
'
custom
'
,
renderItem
:
renderItem
,
data
:
data
,
clip
:
true
}]
};
var
chart
=
testHelper
.
create
(
echarts
,
'
custom-clip
'
,
{
title
:
'
Clip custon series
'
,
option
:
option
,
height
:
400
,
buttons
:
makeToggleChartButtons
(
function
(
clip
)
{
chart
.
setOption
({
series
:
[{
clip
:
clip
}]
})
})
});
});
</script>
<div
class=
"chart"
id=
"candlestick-clip"
></div>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录