This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new 292fabe refact: fix new style encoding on pie/funnel
292fabe is described below
commit 292fabe8e8a9602ae5081fcf0b85648374323fd4
Author: pissang <[email protected]>
AuthorDate: Tue Apr 14 18:51:35 2020 +0800
refact: fix new style encoding on pie/funnel
---
src/data/List.ts | 3 +
src/visual/helper.ts | 2 +
src/visual/style.ts | 26 ++++--
test/pie-visual.html | 252 +++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 277 insertions(+), 6 deletions(-)
diff --git a/src/data/List.ts b/src/data/List.ts
index 1a0c93b..a13a6ef 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -139,6 +139,9 @@ export interface DefaultDataVisual {
// visualMap will inject visualMeta data
visualMeta?: VisualMeta[]
+
+ // If color is encoded from palette
+ colorFromPalette?: boolean
}
class List<
diff --git a/src/visual/helper.ts b/src/visual/helper.ts
index 814ef31..29b8079 100644
--- a/src/visual/helper.ts
+++ b/src/visual/helper.ts
@@ -70,6 +70,8 @@ export function setItemVisualFromData(data: List, dataIndex:
number, key: string
// Make sure not sharing style object.
const style = data.ensureUniqueItemVisual(dataIndex, 'style');
style[data.getVisual('drawType')] = value;
+ // Mark the color has been changed, not from palette anymore
+ data.setItemVisual(dataIndex, 'colorFromPalette', false);
break;
case 'opacity':
data.ensureUniqueItemVisual(dataIndex, 'style').opacity = value;
diff --git a/src/visual/style.ts b/src/visual/style.ts
index 78f2d56..6f0015d 100644
--- a/src/visual/style.ts
+++ b/src/visual/style.ts
@@ -82,12 +82,13 @@ const seriesStyleTask: StageHandler = {
// TODO style callback
const colorCallback = isFunction(color) ? color as unknown as
ColorCallback : null;
- // Default
- if ((!globalStyle[colorKey] || colorCallback) &&
!seriesModel.useColorPaletteOnData) {
+ // Get from color palette by default.
+ if (!globalStyle[colorKey] || colorCallback) {
globalStyle[colorKey] = seriesModel.getColorFromPalette(
// TODO series count changed.
seriesModel.name, null, ecModel.getSeriesCount()
);
+ data.setVisual('colorFromPalette', true);
}
data.setVisual('style', globalStyle);
@@ -95,6 +96,8 @@ const seriesStyleTask: StageHandler = {
// Only visible series has each data be visual encoded
if (!ecModel.isSeriesFiltered(seriesModel) && colorCallback) {
+ data.setVisual('colorFromPalette', false);
+
return {
dataEach(data, idx) {
const dataParams = seriesModel.getDataParams(idx);
@@ -122,6 +125,8 @@ const dataStyleTask: StageHandler = {
// Set in itemStyle
const getStyle = getStyleMapper(seriesModel, stylePath);
+ const colorKey = data.getVisual('drawType');
+
return {
dataEach: data.hasItemOption ? function (data, idx) {
// Not use getItemModel for performance considuration
@@ -132,12 +137,17 @@ const dataStyleTask: StageHandler = {
const existsStyle = data.ensureUniqueItemVisual(idx,
'style');
extend(existsStyle, style);
+
+ if (colorKey in style) {
+ data.setItemVisual(idx, 'colorFromPalette', false);
+ }
}
} : null
};
}
};
+// Pick color from palette for the data which has not been set with color yet.
const dataColorPaletteTask: StageHandler = {
createOnAllSeries: true,
performRawSeries: true,
@@ -181,10 +191,14 @@ const dataColorPaletteTask: StageHandler = {
// Consistent when toggling legend.
dataAll.each(function (rawIdx) {
const idx = idxMap[rawIdx];
- const existsStyle = data.ensureUniqueItemVisual(idx, 'style');
- if (!existsStyle[colorKey]) {
- // Get color from palette.
- existsStyle[colorKey] = seriesModel.getColorFromPalette(
+ const fromPalette = data.getItemVisual(idx,
'colorFromPalette');
+ // Get color from palette for each data only when the color is
inherited from series color, which is
+ // also picked from color palette. So following situation is
not in the case:
+ // 1. series.itemStyle.color is set
+ // 2. color is encoded by visualMap
+ if (fromPalette) {
+ const itemStyle = data.ensureUniqueItemVisual(idx,
'style');
+ itemStyle[colorKey] = seriesModel.getColorFromPalette(
dataAll.getName(rawIdx) || (rawIdx + ''),
colorScope,
dataAll.count()
diff --git a/test/pie-visual.html b/test/pie-visual.html
new file mode 100644
index 0000000..25e11e8
--- /dev/null
+++ b/test/pie-visual.html
@@ -0,0 +1,252 @@
+<!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>
+ <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ option = {
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {value: 335, name: 'Tom'},
+ {value: 310, name: 'Jack'},
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ],
+ roseType: 'radius'
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Should use color from palette by default'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ option = {
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {value: 335, name: 'Tom'},
+ {value: 310, name: 'Jack'},
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ],
+ itemStyle: {
+ color: '#37A2DA',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Test of itemStyle.color',
+ 'Should all be color #37A2DA'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ option = {
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: 'This color should be purple. Others
will pick from color palette',
+ itemStyle: {
+ color: 'purple'
+ }
+ },
+ {
+ value: 310,
+ name: 'This should has shadow',
+ itemStyle: {
+ shadowBlur: 10
+ }
+ },
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ]
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'data.itemStyle.color should work property '
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ option = {
+ series: [
+ {
+ type: 'pie',
+ itemStyle: {
+ color: function (params) {
+ return echarts.color.modifyAlpha('red',
params.dataIndex / 10 + 0.5);
+ }
+ },
+ label: {
+ formatter: function (params) {
+ return params.name + '(opacity: ' +
(params.dataIndex / 10 + 0.5) + ')';
+ }
+ },
+ data: [
+ {
+ value: 335,
+ name: 'This color should be purple',
+ itemStyle: {
+ color: 'purple'
+ }
+ },
+ {value: 310, name: 'Jack'},
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ]
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Callback of color'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ option = {
+ backgroundColor: '#2c343c',
+ visualMap: {
+ show: false,
+ min: 80,
+ max: 600,
+ inRange: {
+ colorLightness: [0, 1]
+ }
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ center: ['25%', '50%'],
+ data: [
+ {value: 335, name: 'Tom'},
+ {value: 310, name: 'Jack'},
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ].sort(function (a, b) { return a.value - b.value;
}),
+ roseType: 'radius'
+ },
+
+ {
+ type: 'pie',
+ radius: '50%',
+ center: ['75%', '50%'],
+ data: [
+ {
+ value: 335,
+ name: 'This should be pink',
+ itemStyle: {
+ color: 'pink'
+ }
+ },
+ {value: 310, name: 'Jack'},
+ {value: 274, name: 'Bobby'},
+ {value: 235, name: 'Emily'},
+ {value: 400, name: 'Jessy'}
+ ].sort(function (a, b) { return a.value - b.value;
}),
+ roseType: 'radius'
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main4', {
+ title: [
+ 'visualMap will apply lightness modification on series
color',
+ 'data.itemStyle.color should have higher priority.'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
