Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
强哥很慌张
Echarts
提交
ae4beb59
E
Echarts
项目概览
强哥很慌张
/
Echarts
通知
8
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
Echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ae4beb59
编写于
11月 28, 2019
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(legend): legend of pie/funnel can pick from visualMap encoded color #10766
上级
cfd53f3e
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
226 addition
and
41 deletion
+226
-41
src/chart/funnel/FunnelSeries.js
src/chart/funnel/FunnelSeries.js
+5
-3
src/chart/graph/GraphSeries.js
src/chart/graph/GraphSeries.js
+8
-3
src/chart/pie/PieSeries.js
src/chart/pie/PieSeries.js
+4
-3
src/chart/radar/RadarSeries.js
src/chart/radar/RadarSeries.js
+5
-3
src/chart/themeRiver/ThemeRiverSeries.js
src/chart/themeRiver/ThemeRiverSeries.js
+4
-3
src/component/legend/LegendModel.js
src/component/legend/LegendModel.js
+3
-3
src/component/legend/LegendView.js
src/component/legend/LegendView.js
+10
-8
src/model/Series.js
src/model/Series.js
+2
-2
src/visual/LegendVisualProvider.js
src/visual/LegendVisualProvider.js
+55
-0
src/visual/dataColor.js
src/visual/dataColor.js
+0
-13
test/legend-visualMapColor.html
test/legend-visualMapColor.html
+130
-0
未找到文件。
src/chart/funnel/FunnelSeries.js
浏览文件 @
ae4beb59
...
...
@@ -20,6 +20,8 @@
import
*
as
echarts
from
'
../../echarts
'
;
import
createListSimply
from
'
../helper/createListSimply
'
;
import
{
defaultEmphasis
}
from
'
../../util/model
'
;
import
LegendVisualProvider
from
'
../../visual/LegendVisualProvider
'
;
import
{
bind
}
from
'
zrender/src/core/util
'
;
var
FunnelSeries
=
echarts
.
extendSeriesModel
({
...
...
@@ -30,9 +32,9 @@ var FunnelSeries = echarts.extendSeriesModel({
// Enable legend selection for each data item
// Use a function instead of direct access because data reference may changed
this
.
legend
DataProvider
=
function
()
{
return
this
.
getRawData
();
}
;
this
.
legend
VisualProvider
=
new
LegendVisualProvider
(
bind
(
this
.
getData
,
this
),
bind
(
this
.
getRawData
,
this
)
)
;
// Extend labelLine emphasis
this
.
_defaultLabelLine
(
option
);
},
...
...
src/chart/graph/GraphSeries.js
浏览文件 @
ae4beb59
...
...
@@ -24,6 +24,7 @@ import {defaultEmphasis} from '../../util/model';
import
Model
from
'
../../model/Model
'
;
import
{
encodeHTML
}
from
'
../../util/format
'
;
import
createGraphFromNodeEdge
from
'
../helper/createGraphFromNodeEdge
'
;
import
LegendVisualProvider
from
'
../../visual/LegendVisualProvider
'
;
var
GraphSeries
=
echarts
.
extendSeriesModel
({
...
...
@@ -32,10 +33,14 @@ var GraphSeries = echarts.extendSeriesModel({
init
:
function
(
option
)
{
GraphSeries
.
superApply
(
this
,
'
init
'
,
arguments
);
var
self
=
this
;
function
getCategoriesData
()
{
return
self
.
_categoriesData
;
}
// Provide data for legend select
this
.
legend
DataProvider
=
function
()
{
return
this
.
_categoriesData
;
}
;
this
.
legend
VisualProvider
=
new
LegendVisualProvider
(
getCategoriesData
,
getCategoriesData
)
;
this
.
fillDataTextStyle
(
option
.
edges
||
option
.
links
);
...
...
src/chart/pie/PieSeries.js
浏览文件 @
ae4beb59
...
...
@@ -24,6 +24,7 @@ import * as modelUtil from '../../util/model';
import
{
getPercentWithPrecision
}
from
'
../../util/number
'
;
import
dataSelectableMixin
from
'
../../component/helper/selectableMixin
'
;
import
{
retrieveRawAttr
}
from
'
../../data/helper/dataProvider
'
;
import
LegendVisualProvider
from
'
../../visual/LegendVisualProvider
'
;
var
PieSeries
=
echarts
.
extendSeriesModel
({
...
...
@@ -36,9 +37,9 @@ var PieSeries = echarts.extendSeriesModel({
// Enable legend selection for each data item
// Use a function instead of direct access because data reference may changed
this
.
legend
DataProvider
=
function
()
{
return
this
.
getRawData
();
}
;
this
.
legend
VisualProvider
=
new
LegendVisualProvider
(
zrUtil
.
bind
(
this
.
getData
,
this
),
zrUtil
.
bind
(
this
.
getRawData
,
this
)
)
;
this
.
updateSelectedMap
(
this
.
_createSelectableList
());
...
...
src/chart/radar/RadarSeries.js
浏览文件 @
ae4beb59
...
...
@@ -21,6 +21,7 @@ import SeriesModel from '../../model/Series';
import
createListSimply
from
'
../helper/createListSimply
'
;
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
import
{
encodeHTML
}
from
'
../../util/format
'
;
import
LegendVisualProvider
from
'
../../visual/LegendVisualProvider
'
;
var
RadarSeries
=
SeriesModel
.
extend
({
...
...
@@ -35,9 +36,10 @@ var RadarSeries = SeriesModel.extend({
// Enable legend selection for each data item
// Use a function instead of direct access because data reference may changed
this
.
legendDataProvider
=
function
()
{
return
this
.
getRawData
();
};
this
.
legendVisualProvider
=
new
LegendVisualProvider
(
zrUtil
.
bind
(
this
.
getData
,
this
),
zrUtil
.
bind
(
this
.
getRawData
,
this
)
);
},
getInitialData
:
function
(
option
,
ecModel
)
{
...
...
src/chart/themeRiver/ThemeRiverSeries.js
浏览文件 @
ae4beb59
...
...
@@ -24,6 +24,7 @@ import List from '../../data/List';
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
import
{
groupData
}
from
'
../../util/model
'
;
import
{
encodeHTML
}
from
'
../../util/format
'
;
import
LegendVisualProvider
from
'
../../visual/LegendVisualProvider
'
;
var
DATA_NAME_INDEX
=
2
;
...
...
@@ -49,9 +50,9 @@ var ThemeRiverSeries = SeriesModel.extend({
// Put this function here is for the sake of consistency of code style.
// Enable legend selection for each data item
// Use a function instead of direct access because data reference may changed
this
.
legend
DataProvider
=
function
()
{
return
this
.
getRawData
();
}
;
this
.
legend
VisualProvider
=
new
LegendVisualProvider
(
zrUtil
.
bind
(
this
.
getData
,
this
),
zrUtil
.
bind
(
this
.
getRawData
,
this
)
)
;
},
/**
...
...
src/component/legend/LegendModel.js
浏览文件 @
ae4beb59
...
...
@@ -111,9 +111,9 @@ var LegendModel = echarts.extendComponentModel({
availableNames
.
push
(
seriesName
);
var
isPotential
;
if
(
seriesModel
.
legend
Data
Provider
)
{
var
data
=
seriesModel
.
legendDataProvider
()
;
var
names
=
data
.
mapArray
(
data
.
getName
);
if
(
seriesModel
.
legend
Visual
Provider
)
{
var
provider
=
seriesModel
.
legendVisualProvider
;
var
names
=
provider
.
getAllNames
(
);
if
(
!
ecModel
.
isSeriesFiltered
(
seriesModel
))
{
availableNames
=
availableNames
.
concat
(
names
);
...
...
src/component/legend/LegendView.js
浏览文件 @
ae4beb59
...
...
@@ -175,7 +175,7 @@ export default echarts.extendComponentView({
return
;
}
//
Series legend
//
Legend to control series.
if
(
seriesModel
)
{
var
data
=
seriesModel
.
getData
();
var
color
=
data
.
getVisual
(
'
color
'
);
...
...
@@ -211,22 +211,24 @@ export default echarts.extendComponentView({
legendDrawnMap
.
set
(
name
,
true
);
}
else
{
//
Data legend of pie, funnel
//
Legend to control data. In pie and funnel.
ecModel
.
eachRawSeries
(
function
(
seriesModel
)
{
// In case multiple series has same data name
if
(
legendDrawnMap
.
get
(
name
))
{
return
;
}
if
(
seriesModel
.
legendDataProvider
)
{
var
data
=
seriesModel
.
legendDataProvider
();
var
idx
=
data
.
indexOfName
(
name
);
if
(
idx
<
0
)
{
if
(
seriesModel
.
legendVisualProvider
)
{
var
provider
=
seriesModel
.
legendVisualProvider
;
if
(
!
provider
.
containName
(
name
))
{
return
;
}
var
color
=
data
.
getItemVisual
(
idx
,
'
color
'
);
var
borderColor
=
data
.
getItemVisual
(
idx
,
'
borderColor
'
);
var
idx
=
provider
.
indexOfName
(
name
);
var
color
=
provider
.
getItemVisual
(
idx
,
'
color
'
);
var
borderColor
=
provider
.
getItemVisual
(
idx
,
'
borderColor
'
);
var
legendSymbolType
=
'
roundRect
'
;
...
...
src/model/Series.js
浏览文件 @
ae4beb59
...
...
@@ -62,11 +62,11 @@ var SeriesModel = ComponentModel.extend({
defaultOption
:
null
,
/**
*
Data provided for legend
*
legend visual provider to the legend component
* @type {Function}
*/
// PENDING
legend
Data
Provider
:
null
,
legend
Visual
Provider
:
null
,
/**
* Access path of color for visual
...
...
src/visual/LegendVisualProvider.js
0 → 100644
浏览文件 @
ae4beb59
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* LegendVisualProvider is an bridge that pick encoded color from data and
* provide to the legend component.
* @param {Function} getDataWithEncodedVisual Function to get data after filtered. It stores all the encoding info
* @param {Function} getRawData Function to get raw data before filtered.
*/
function
LegendVisualProvider
(
getDataWithEncodedVisual
,
getRawData
)
{
this
.
getAllNames
=
function
()
{
var
rawData
=
getRawData
();
// We find the name from the raw data. In case it's filtered by the legend component.
// Normally, the name can be found in rawData, but can't be found in filtered data will display as gray.
return
rawData
.
mapArray
(
rawData
.
getName
);
};
this
.
containName
=
function
(
name
)
{
var
rawData
=
getRawData
();
return
rawData
.
indexOfName
(
name
)
>=
0
;
};
this
.
indexOfName
=
function
(
name
)
{
// Only get data when necessary.
// Because LegendVisualProvider constructor may be new in the stage that data is not prepared yet.
// Invoking Series#getData immediately will throw an error.
var
dataWithEncodedVisual
=
getDataWithEncodedVisual
();
return
dataWithEncodedVisual
.
indexOfName
(
name
);
};
this
.
getItemVisual
=
function
(
dataIndex
,
key
)
{
// Get encoded visual properties from final filtered data.
var
dataWithEncodedVisual
=
getDataWithEncodedVisual
();
return
dataWithEncodedVisual
.
getItemVisual
(
dataIndex
,
key
);
};
}
export
default
LegendVisualProvider
;
\ No newline at end of file
src/visual/dataColor.js
浏览文件 @
ae4beb59
...
...
@@ -68,33 +68,20 @@ export default function (seriesType) {
dataAll
.
getName
(
rawIdx
)
||
(
rawIdx
+
''
),
seriesModel
.
__paletteScope
,
dataAll
.
count
()
);
// Legend may use the visual info in data before processed
dataAll
.
setItemVisual
(
rawIdx
,
'
color
'
,
color
);
// Data is not filtered
if
(
filteredIdx
!=
null
)
{
data
.
setItemVisual
(
filteredIdx
,
'
color
'
,
color
);
}
}
else
{
// Set data all color for legend
dataAll
.
setItemVisual
(
rawIdx
,
'
color
'
,
singleDataColor
);
}
if
(
!
singleDataBorderColor
)
{
var
borderColor
=
itemModel
.
get
(
'
itemStyle.borderColor
'
);
// Legend may use the visual info in data before processed
dataAll
.
setItemVisual
(
rawIdx
,
'
borderColor
'
,
borderColor
);
// Data is not filtered
if
(
filteredIdx
!=
null
)
{
data
.
setItemVisual
(
filteredIdx
,
'
borderColor
'
,
borderColor
);
}
}
else
{
// Set data all borderColor for legend
dataAll
.
setItemVisual
(
rawIdx
,
'
borderColor
'
,
singleDataBorderColor
);
}
});
}
};
...
...
test/legend-visualMapColor.html
0 → 100644
浏览文件 @
ae4beb59
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<script
src=
"lib/esl.js"
></script>
<script
src=
"lib/config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
<body>
<style>
</style>
<div
id=
"main0"
></div>
<div
id=
"main1"
></div>
<script>
require
([
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
var
option
;
option
=
{
"
dataset
"
:
[
{
"
source
"
:
[
[
"
Mark3
"
,
"
Mark3_desc
"
,
"
Role4
"
,
"
Role4_desc
"
],
[
"
01
"
,
"
高档
"
,
61278
,
"
61278.00
"
],
[
"
03
"
,
"
中档
"
,
108814
,
"
108814.00
"
],
[
"
04
"
,
"
低档
"
,
242664
,
"
242664.00
"
]
]
}
],
"
series
"
:
[
{
"
type
"
:
"
pie
"
,
"
datasetIndex
"
:
0
,
"
name
"
:
"
销售数量
"
,
"
encode
"
:
{
"
value
"
:
"
Role4
"
,
"
itemName
"
:
"
Mark3_desc
"
}
}
],
"
visualMap
"
:
[
{
"
show
"
:
false
,
"
inRange
"
:
{
"
color
"
:
[
"
#6EB9FF
"
,
"
#99DFA2
"
,
"
#FDAD29
"
]
},
"
dataDefIndex
"
:
0
,
"
field
"
:
"
FA_XS_MONTH.JGDC
"
,
"
type
"
:
"
piecewise
"
,
"
categories
"
:
[
"
高档
"
,
"
中档
"
,
"
低档
"
],
"
dimension
"
:
"
Mark3_desc
"
,
"
seriesIndex
"
:
0
}
],
"
legend
"
:
{
"
show
"
:
true
}
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
title
:
[
'
Legend use color from visualMap
'
,
'
Test case from #10766
'
],
option
:
option
});
});
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录