echart5 示例的自定义的聚合分割形变图(散点-饼图) 饼图添加标签会导致图形消失

nanxi1994 commented 3 years ago

Version

5.0.2

Steps to reproduce

示例中的自定义系列聚合分割形变(散点-饼图)添加 style.text 或 textContent

myChart=echarts.init(document.getElementById("main"));
var PIE_COLORS = [
    '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
];
var ANIMATION_DURATION_UPDATE = 1500;

var RAW_DATA = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];

$.when(
    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
).done(function () {

    init();

    var currentIsPie = false;
    setScatterOption();

    setInterval(function () {
        if (currentIsPie) {
            currentIsPie = false;
            setScatterOption();
        }
        else {
            currentIsPie = true;
            setPieOption();
        }
    }, 3000);

});

function init() {

    echarts.registerTransform(ecSimpleTransform.aggregate);

    var baseOption = {
        dataset: [{
            id: 'raw_dataset',
            dimensions: ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG', 'ID'],
            source: RAW_DATA
        }, {
            id: 'mTagSum_dataset',
            fromDatasetId: 'raw_dataset',
            transform: {
                type: 'ecSimpleTransform:aggregate',
                config: {
                    resultDimensions: [
                        { from: 'COUNT', method: 'sum' },
                        { from: 'PRICE', method: 'sum' },
                        { from: 'WEIGHT', method: 'sum' },
                        { from: 'M_TAG' }
                    ],
                    groupBy: 'M_TAG'
                }
            }
        }],
        tooltip: {}
    };

    myChart.setOption(baseOption, { lazyUpdate: true });
}

function setScatterOption() {
    var option = {
        grid: {
            containLabel: true
        },
        xAxis: {
            name: 'PRICE'
        },
        yAxis: {
            name: 'COUNT'
        },
        series: {
            type: 'custom',
            coordinateSystem: 'cartesian2d',
            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
            datasetId: 'raw_dataset',
            encode: {
                itemName: 'ID',
                x: 'PRICE',
                y: 'COUNT',
                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
            },
            renderItem: function (params, api) {
                var pos = api.coord([
                    api.value('PRICE'),
                    api.value('COUNT')
                ]);
                return {
                    type: 'circle',
                    morph: true,
                    shape: {
                        cx: pos[0],
                        cy: pos[1],
                        r: 10
                    },
                    style: {
                        text:api.value('PRICE'),
                        fill: '#5470c6'
                    },
                    transition: ['shape', 'style']
                };
            }
        }
    };

    myChart.setOption(option, {
        replaceMerge: ['xAxis', 'yAxis'],
        transition: {
            from: { seriesIndex: 0, dimension: 'M_TAG' },
            to: { seriesIndex: 0, dimension: 'M_TAG' }
        }
    });
}

function setPieOption() {
    var option = {
        series: {
            type: 'custom',
            coordinateSystem: 'none',
            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
            datasetId: 'mTagSum_dataset',
            encode: {
                itemName: 'ID',
                value: 'COUNT',
                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
            },
            renderItem: function (params, api) {
                var context = params.context;
                if (!context.layout) {
                    context.layout = true;
                    var totalValue = 0;
                    for (var i = 0; i < params.dataInsideLength; i++) {
                        totalValue += api.value('COUNT', i);
                    }
                    var angles = [];
                    var colors = [];
                    var currentAngle = -Math.PI / 2;
                    for (var i = 0; i < params.dataInsideLength; i++) {
                        colors.push(PIE_COLORS[i]);
                        var angle = api.value('COUNT', i) / totalValue * Math.PI * 2;
                        angles.push([currentAngle, angle + currentAngle - 0.01]);
                        currentAngle += angle;
                    }
                    context.angles = angles;
                    context.colors = colors;
                }

                var width = myChart.getWidth();
                var height = myChart.getHeight();
                return {
                    type: 'sector',
                    morph: true,
                    shape: {
                        cx: width / 2,
                        cy: height / 2,
                        r: Math.min(width, height) / 3,
                        r0: Math.min(width, height) / 5,
                        startAngle: context.angles[params.dataIndex][0],
                        endAngle: context.angles[params.dataIndex][1],
                        clockwise: true
                    },
                    style: {
                        text:api.value('count'),
                        fill: context.colors[params.dataIndex]
                    },
                    transition: ['shape', 'style']
                };
            }
        }
    };

    myChart.setOption(option, {
        replaceMerge: ['xAxis', 'yAxis', 'viusalMap'],
        transition: {
            from: { seriesIndex: 0, dimension: 'M_TAG' },
            to: { seriesIndex: 0, dimension: 'M_TAG' }
        }
    });
}

What is expected?

正常显示标签

What is actually happening?

不显示标签且图形闪烁消失

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

@nanxi1994 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** The custom aggregated segmentation deformation graph (scatter-pie chart) of the echart5 example. Adding labels to the pie chart will cause the graph to disappear **BODY** ### Version 5.0.2 ### Steps to reproduce Add style.text or textContent to the custom series in the example Aggregate Split Deformation (Scatter-Pie Chart) ### What is expected? Display label normally ### What is actually happening? The label is not displayed and the graphic flickers disappear

nanxi1994 commented 3 years ago

尝试之后发现
transition: { from: { seriesIndex: 0, dimension: 'ID' }, to: { seriesIndex: 0, dimension: 'ID' }

如果是一对一、多对一，添加textContent不会有问题，但是一对多的形变添加text之后不能显示标签且会导致图形消失

nanxi1994 commented 3 years ago

尝试之后发现
transition: { from: { seriesIndex: 0, dimension: 'ID' }, to: { seriesIndex: 0, dimension: 'ID' }

如果是一对一、多对一，添加textContent不会有问题，但是一对多的形变添加text之后不能显示标签且会导致图形消失

echarts-bot[bot] commented 3 years ago

@nanxi1994 Please provide a demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

nanxi1994 commented 3 years ago

demo: https://codepen.io/nanxi1994/pen/ExZLNNB

github-actions[bot] commented 11 months ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 11 months ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

apache / echarts