Ovilia commented on code in PR #19435:
URL: https://github.com/apache/echarts/pull/19435#discussion_r1436346552
##########
src/chart/pie/PieSeries.ts:
##########
@@ -54,6 +54,8 @@ interface PieItemStyleOption<TCbParams = never> extends
ItemStyleOption<TCbParam
export interface PieCallbackDataParams extends CallbackDataParams {
percent: number
+ maxValue?: number
Review Comment:
How about `max` for simplicity?
##########
src/chart/pie/PieSeries.ts:
##########
@@ -107,6 +109,7 @@ export interface PieSeriesOption extends
type?: 'pie'
roseType?: 'radius' | 'area'
+ itemRadiusScale?: (dataParams: PieCallbackDataParams) => number
Review Comment:
I would suggest considering another name than `radius` because it may cause
confusion with
[emphasis.scaleSize](https://echarts.apache.org/en/option.html#series-pie.emphasis.scaleSize),
which is the enlarging animation when emphasizing. You are welcomed to suggest
a new name.
##########
test/pie-itemRadiusScale.html:
##########
@@ -0,0 +1,291 @@
+<!--
+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">
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <style>
+ body {
+ margin: 0;
+ }
+
+ #main {
+ width: 100%;
+ height: 92%;
+ }
+
+ p {
+ text-align: center;
+ }
+
+ button {
+ padding: 5px 15px;
+ background: lightgray;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background: transparent;
+ }
+ </style>
+</head>
+<body>
+<p>
+ <button type="button"
+ onclick="selectRandomValues()">
+ Random selection
+ </button>
+</p>
+<div id="main"></div>
+<script>
+ let dataset = {
+ dimensions: ['key', 'value', 'selected'],
+ source: [
+ ['A', 1092, 112],
+ ['B', 768, 499],
+ ['C', 604, 257],
+ ['D', 238, 180]
+ ],
+ };
+
+ function selectRandomValues() {
+ dataset.source.forEach(row => {
+ row[2] = row[1] * Math.random();
+ });
+ chart.setOption({dataset});
+ }
+
+
+ function itemScale(params) {
+ const {data = []} = params;
+ return data[2] / data[1];
+ }
+
+ function itemScaleQuadratic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 2);
+ }
+
+ function itemScaleCubic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 3);
+ }
+
+ let chart;
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ chart = echarts.init(document.getElementById('main'), null, {});
+
+ chart.setOption({
+ legend: {
+ itemStyle: {
+ opacity: 1
+ }
+ },
+ tooltip: {trigger: 'item'},
+ dataset: dataset,
+ title: [
+ createTitle([1, 1], 'default'),
+ createTitle([1, 2], 'extra pie as background'),
+ createTitle([1, 3], 'donut style'),
+ createTitle([2, 1], 'cubic scale'),
+ createTitle([2, 2], 'quadratic scale'),
+ createTitle([2, 3], 'quadratic scale + donut style'),
+ ],
+ series: [
+ /** example #1: scaling based on a simple function */
+ createScaledSeries(
+ [1, 1],
+ {},
+ itemScale
+ ),
+
+ /** example #2: add pie with the same angles,
+ * but full radius and semitransparent background */
+ createBackgroundSeries([1, 2]),
Review Comment:
I would suggest providing two new options `series-pie.backgroundStyle` and
`series-pie.backgroundStyle` like
[series-bar.showBackground](https://echarts.apache.org/en/option.html#series-bar.showBackground)
and
[series-bar.backgroundStyle](https://echarts.apache.org/en/option.html#series-bar.backgroundStyle),
where `series-pie.backgroundStyle.color` can be a callback function so that
developers can set the background according to the piece color.
##########
test/pie-itemRadiusScale.html:
##########
@@ -0,0 +1,291 @@
+<!--
+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">
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <style>
+ body {
+ margin: 0;
+ }
+
+ #main {
+ width: 100%;
+ height: 92%;
+ }
+
+ p {
+ text-align: center;
+ }
+
+ button {
+ padding: 5px 15px;
+ background: lightgray;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background: transparent;
+ }
+ </style>
+</head>
+<body>
+<p>
+ <button type="button"
+ onclick="selectRandomValues()">
+ Random selection
+ </button>
+</p>
+<div id="main"></div>
+<script>
+ let dataset = {
+ dimensions: ['key', 'value', 'selected'],
+ source: [
+ ['A', 1092, 112],
+ ['B', 768, 499],
+ ['C', 604, 257],
+ ['D', 238, 180]
+ ],
+ };
+
+ function selectRandomValues() {
+ dataset.source.forEach(row => {
+ row[2] = row[1] * Math.random();
+ });
+ chart.setOption({dataset});
+ }
+
+
+ function itemScale(params) {
+ const {data = []} = params;
+ return data[2] / data[1];
+ }
+
+ function itemScaleQuadratic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 2);
+ }
+
+ function itemScaleCubic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 3);
+ }
+
+ let chart;
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ chart = echarts.init(document.getElementById('main'), null, {});
+
+ chart.setOption({
+ legend: {
+ itemStyle: {
+ opacity: 1
+ }
+ },
+ tooltip: {trigger: 'item'},
+ dataset: dataset,
+ title: [
+ createTitle([1, 1], 'default'),
+ createTitle([1, 2], 'extra pie as background'),
+ createTitle([1, 3], 'donut style'),
+ createTitle([2, 1], 'cubic scale'),
+ createTitle([2, 2], 'quadratic scale'),
+ createTitle([2, 3], 'quadratic scale + donut style'),
+ ],
+ series: [
+ /** example #1: scaling based on a simple function */
+ createScaledSeries(
+ [1, 1],
+ {},
+ itemScale
+ ),
+
+ /** example #2: add pie with the same angles,
+ * but full radius and semitransparent background */
+ createBackgroundSeries([1, 2]),
+ createScaledSeries(
+ [1, 2],
+ {},
+ itemScale
+ ),
+
+ /** example #3: add donut with the same angles,
+ * but full outer radius and semitransparent background */
+ createBackgroundSeries(
+ [1, 3],
+ {radius: ['13%', '22%']}
+ ),
+ createScaledSeries(
+ [1, 3],
+ {radius: ['13%', '22%']},
+ itemScale
+ ),
+
+ /** example #4: almost the same as examples #2,
+ * but non-linear function used */
+ createBackgroundSeries([2, 1]),
+ createScaledSeries(
+ [2, 1],
+ {encode: ['value', 'selected']},
+ itemScaleCubic
+ ),
+
+ /** example #5: almost the same as examples #2,
+ * but non-linear function used */
+ createBackgroundSeries([2, 2]),
+ createScaledSeries(
+ [2, 2],
+ {encode: ['value', 'selected']},
+ itemScaleQuadratic
+ ),
+
+ /** example #6: almost the same as examples #3,
+ * but non-linear function used */
+ createBackgroundSeries(
+ [2, 3],
+ {radius: ['13%', '22%']}
+ ),
+ createScaledSeries(
+ [2, 3],
+ {
+ radius: ['13%', '22%'],
+ encode: ['value', 'selected']
+ },
+ itemScaleQuadratic
+ ),
+ ]
+ });
+
+ function createTitle(pos, text) {
+ return {
+ subtext: text,
+ textAlign: 'center',
+ left: `${(pos[1] / 3 - 1 / 6) * 100}%`,
+ top: `${(pos[0] - 1) * 50 + 6}%`
+ };
+ }
+
+ /**
+ * @param pos {number[]}
+ * @param [radius] {string[]|number[]}
+ * @param [encode] {string|string[]}
+ * @param itemRadiusScale {function}
+ * @return {*}
+ */
+ function createScaledSeries(pos, {radius, encode = 'value'} = {},
itemRadiusScale) {
+ return {
+ name: `Selected ${encode instanceof Array ? encode[0] :
encode}`,
+ type: 'pie',
+ center: [
+ `${(pos[1] / 3 - 1 / 6) * 100}%`,
+ `${(pos[0] - 1) * 50 + 25}%`,
+ ],
+ radius: radius || '22%',
+ z: 10,
+ emphasis: {disabled: true},
Review Comment:
If `backgroundStyle` is provided, then there should be no need to disable
emphasis.
##########
test/pie-itemRadiusScale.html:
##########
@@ -0,0 +1,291 @@
+<!--
+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">
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <style>
+ body {
+ margin: 0;
+ }
+
+ #main {
+ width: 100%;
+ height: 92%;
+ }
+
+ p {
+ text-align: center;
+ }
+
+ button {
+ padding: 5px 15px;
+ background: lightgray;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background: transparent;
+ }
+ </style>
+</head>
+<body>
+<p>
+ <button type="button"
+ onclick="selectRandomValues()">
+ Random selection
+ </button>
+</p>
+<div id="main"></div>
+<script>
+ let dataset = {
+ dimensions: ['key', 'value', 'selected'],
+ source: [
+ ['A', 1092, 112],
+ ['B', 768, 499],
+ ['C', 604, 257],
+ ['D', 238, 180]
+ ],
+ };
+
+ function selectRandomValues() {
+ dataset.source.forEach(row => {
+ row[2] = row[1] * Math.random();
+ });
+ chart.setOption({dataset});
+ }
+
+
+ function itemScale(params) {
+ const {data = []} = params;
+ return data[2] / data[1];
+ }
+
+ function itemScaleQuadratic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 2);
+ }
+
+ function itemScaleCubic(params) {
+ const {value, encode} = params;
+ const val = value[encode.value?.[0]];
+ const selected = value[encode.value?.[1]];
+ const scale = selected / val;
+ return Math.pow(scale, 1 / 3);
+ }
+
+ let chart;
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ chart = echarts.init(document.getElementById('main'), null, {});
+
+ chart.setOption({
+ legend: {
+ itemStyle: {
+ opacity: 1
+ }
+ },
+ tooltip: {trigger: 'item'},
+ dataset: dataset,
+ title: [
+ createTitle([1, 1], 'default'),
+ createTitle([1, 2], 'extra pie as background'),
+ createTitle([1, 3], 'donut style'),
+ createTitle([2, 1], 'cubic scale'),
+ createTitle([2, 2], 'quadratic scale'),
+ createTitle([2, 3], 'quadratic scale + donut style'),
+ ],
+ series: [
+ /** example #1: scaling based on a simple function */
+ createScaledSeries(
+ [1, 1],
+ {},
+ itemScale
+ ),
+
+ /** example #2: add pie with the same angles,
+ * but full radius and semitransparent background */
+ createBackgroundSeries([1, 2]),
Review Comment:
You make make a seperate PR (or just in this if you like) for the background
related feature because it also benifits the roseType pies.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
