apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.2k stars 19.61k forks source link

旭日图下钻后,无法上卷 #9482

Closed leexuGit closed 5 years ago

leexuGit commented 5 years ago

General Questions

PLEASE MAKE SURE OF ALL THE FOLLOWING OPTIONS IN REQUIRED FIELDS ARE TICKED (with x)! Otherwise, the issue will not be answered. And think before you tick. :) 请确保以下每项都打上勾了!并且确保都做了这些事哦~ 这将大量简化我们的工作流程,使你的问题更快速得到解答。

In this issue, I have provided information with: 在这个 issue 中我提供了以下信息:

Issue Type

Issue Details

先点击第三层及以上,然后再不断的点击中心上卷,就会出现如图情况,没有显示中心点,无法上卷;

Expected Behavior

旭日图下钻后,可以上卷,回到初始状态

Current Behavior

旭日图下钻后,无法上卷

Online Example

THIS IS REQUIRED FOR ALL BUG REPORTS AND QUESTIONS!!! 如果是提问或报 bug 一定要提供这一项!

http://gallery.echartsjs.com/editor.html?c=xoJdFfRpPL&comment=0

var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555']; var bgColor = '#2E2733';

var itemStyle = { star5: { color: colors[0] }, star4: { color: colors[1] }, star3: { color: colors[2] }, star2: { color: colors[3] } };

var data = [{ name: '虚构', itemStyle: { normal: { color: colors[1] } }, children: [{ name: '小说', children: [{ name: '5☆', children: [{ name: '疼' }, { name: '慈悲' }, { name: '楼下的房客' }] }, { name: '4☆', children: [{ name: '虚无的十字架' }, { name: '无声告白' }, { name: '童年的终结' }] }, { name: '3☆', children: [{ name: '疯癫老人日记' }] }] }, { name: '其他', children: [{ name: '5☆', children: [{ name: '纳博科夫短篇小说全集' }] }, { name: '4☆', children: [{ name: '安魂曲' }, { name: '人生拼图版' }] }, { name: '3☆', children: [{ name: '比起爱你,我更需要你' }] }] }] }, { name: '非虚构', itemStyle: { color: colors[2] }, children: [{ name: '设计', children: [{ name: '5☆', children: [{ name: '无界面交互' }] }, { name: '4☆', children: [{ name: '数字绘图的光照与渲染技术' }, { name: '日本建筑解剖书' }] }, { name: '3☆', children: [{ name: '奇幻世界艺术\n&RPG地图绘制讲座' }] }] }, { name: '社科', children: [{ name: '5☆', children: [{ name: '痛点' }] }, { name: '4☆', children: [{ name: '卓有成效的管理者' }, { name: '进化' }, { name: '后物欲时代的来临', }] }, { name: '3☆', children: [{ name: '疯癫与文明' }] }] }, { name: '心理', children: [{ name: '5☆', children: [{ name: '我们时代的神经症人格' }] }, { name: '4☆', children: [{ name: '皮格马利翁效应' }, { name: '受伤的人' }] }, { name: '3☆', }, { name: '2☆', children: [{ name: '迷恋' }] }] }, { name: '居家', children: [{ name: '4☆', children: [{ name: '把房子住成家' }, { name: '只过必要生活' }, { name: '北欧简约风格' }] }] }, { name: '绘本', children: [{ name: '5☆', children: [{ name: '设计诗' }] }, { name: '4☆', children: [{ name: '假如生活糊弄了你' }, { name: '博物学家的神秘动物图鉴' }] }, { name: '3☆', children: [{ name: '方向' }] }] }, { name: '哲学', children: [{ name: '4☆', children: [{ name: '人生的智慧' }] }] }, { name: '技术', children: [{ name: '5☆', children: [{ name: '代码整洁之道' }] }, { name: '4☆', children: [{ name: 'Three.js 开发指南' }] }] }] }];

for (var j = 0; j < data.length; ++j) { var level1 = data[j].children; for (var i = 0; i < level1.length; ++i) { var block = level1[i].children; var bookScore = []; var bookScoreId; for (var star = 0; star < block.length; ++star) { var style = (function (name) { switch (name) { case '5☆': bookScoreId = 0; return itemStyle.star5; case '4☆': bookScoreId = 1; return itemStyle.star4; case '3☆': bookScoreId = 2; return itemStyle.star3; case '2☆': bookScoreId = 3; return itemStyle.star2; } })(block[star].name);

        block[star].label = {
            color: style.color,
            downplay: {
                opacity: 0.5
            }
        };

        if (block[star].children) {
            style = {
                opacity: 1,
                color: style.color
            };
            block[star].children.forEach(function (book) {
                book.value = 1;
                book.itemStyle = style;

                book.label = {
                    color: style.color
                };

                var value = 1;
                if (bookScoreId === 0 || bookScoreId === 3) {
                    value = 5;
                }

                if (bookScore[bookScoreId]) {
                    bookScore[bookScoreId].value += value;
                }
                else {
                    bookScore[bookScoreId] = {
                        color: colors[bookScoreId],
                        value: value
                    };
                }
            });
        }
    }

    level1[i].itemStyle = {
        color: data[j].itemStyle.color
    };
}

}

option = { backgroundColor: bgColor, color: colors, series: [{ type: 'sunburst', center: ['50%', '48%'], data: data, sort: function (a, b) { if (a.depth === 1) { return b.getValue() - a.getValue(); } else { return a.dataIndex - b.dataIndex; } }, label: { rotate: 'radial', color: bgColor }, itemStyle: { borderColor: bgColor, borderWidth: 2 }, levels: [{}, { r0: 0, r: 40, label: { rotate: 0 } }, { r0: 40, r: 105 }, { r0: 115, r: 140, itemStyle: { shadowBlur: 2, shadowColor: colors[2], color: 'transparent' }, label: { rotate: 'tangential', fontSize: 10, color: colors[0] } }, { r0: 140, r: 145, itemStyle: { shadowBlur: 80, shadowColor: colors[0] }, label: { position: 'outside', textShadowBlur: 5, textShadowColor: '#333', }, downplay: { label: { opacity: 0.5 } } }] }] };

Topics

Anything Else We Need to Know

{DESCRIBE_HERE}

Environment

Ovilia commented 5 years ago

@leexuGit I think this may not be a bug since it defines r0 to be 0 in levels[0]. This makes the inner width of the first level to be at the center point and making returning to a higher level impossible. I will remove the bug label for now. You are welcomed to discuss how to design this feature to make it better.

leexuGit commented 5 years ago

@Ovilia 那这种配置的图形就不该被返回吗?或者这种图形应该怎样配置才可以返回到上一层?

Ovilia commented 5 years ago

如果需要数据下钻,建议不要写半径……别的我似乎没想到很好的办法,你有什么建议吗?

echarts-bot[bot] commented 5 years ago

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.