Солнечная диаграмма ECharts

Солнечная диаграмма состоит из нескольких слоев кольцевых диаграмм. С точки зрения структуры данных внутреннее кольцо является родительским узлом для внешнего кольца. Поэтому она может не только показывать долю частей в целом, как круговая диаграмма, но и отображать иерархические связи, как в древовидной карте.

Создать солнечную диаграмму в ECharts очень просто. Нужно только указать в элементе конфигурации series тип какsunburstВот и все. Структура данных объявляется как древовидная структура. Вот простой пример:

Пример

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa'
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }]
        }, {
            name: 'C',
            value: 3
        }]
    }
};

Попробуйте сами »

Настройка цветов и других стилей

По умолчанию цвет из глобальной палитры используется для назначения цветов самому внутреннему слою, а остальные слои используют тот же цвет, что и их родительские элементы.

В диаграмме «солнечные лучи» цвета блоков секторов можно задать следующими тремя способами:

  • В series.data.itemStyle задайте стиль для каждого сектора.
  • В series.levels.itemStyle задайте стиль для каждого уровня.
  • Задайте стиль всей диаграммы «солнечные лучи» в series.itemStyle.

Приоритет трёх вышеперечисленных способов — от высокого к низкому, то есть секторы, настроенные с помощью series.data.itemStyle, переопределяют настройки в series.levels.itemStyle и series.itemStyle.

Затем мы задаём общий цвет как серый#aaaЗадаём цвет самого внутреннего слоя как синий.blueи задаём двум блокам Aa и B красный цветred。

Пример

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa',
                itemStyle: {
                    color: 'red'
                }
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }],
            itemStyle: {
                color: 'red'
            }
        }, {
            name: 'C',
            value: 3
        }],
        itemStyle: {
            color: '#aaa'
        },
        levels: [{
            // Атрибуты узла для детализации данных
        }, {
            itemStyle: {
                color: 'blue'
            }
        }]
    }
};

Попробуйте сами »

Настройка стилей по уровням — очень распространённая функция, которая может значительно повысить эффективность настройки.

Детализация данных

Солнечная диаграмма по умолчанию поддерживает детализацию данных. То есть после щелчка по сектору данные этого сектора используются в качестве корневого узла для дальнейшего отображения деталей данных.

После детализации данных в середине диаграммы появляется графический элемент, используемый для возврата на предыдущий уровень. Стиль этого графического элемента можно настроить с помощью levels

Пример

var data = [{
    name: 'Дедушка',
    children: [{
        name: 'Дядя Лео',
        value: 15,
        children: [{
            name: 'Двоюродный брат Джек',
            value: 2
        }, {
            name: 'Двоюродная сестра Мэри',
            value: 5,
            children: [{
                name: 'Джексон',
                value: 2
            }]
        }, {
            name: 'Двоюродный брат Бен',
            value: 4
        }]
    }, {
        name: 'Отец',
        value: 10,
        children: [{
            name: 'Я',
            value: 5
        }, {
            name: 'Брат Питер',
            value: 1
        }]
    }]
}, {
    name: 'Нэнси',
    children: [{
        name: 'Дядя Найк',
        children: [{
            name: 'Кузина Бетти',
            value: 1
        }, {
            name: 'Кузина Дженни',
            value: 2
        }]
    }]
}];

option = {
    series: {
        type: 'sunburst',
        // highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '90%'],
        label: {
            rotate: 'radial'
        }
    }
};

Попробуйте сами »

Если функция детализации данных не нужна, вы можете отключить её, установив nodeClick в false, или установить его в 'link' и задать data.link равным ссылке, которая открывается при щелчке по секторному блоку.

Подсветка связанных секторных блоков

Диаграмма sunburst поддерживает подсветку связанных блоков данных при наведении мыши на сектор. Вы можете задать highlightPolicy, который включает следующие режимы подсветки:

  • 'descendant' (значение по умолчанию): подсвечивает секторный блок под курсором мыши и его элементы-потомки;
  • 'ancestor': подсвечивает секторный блок под курсором мыши и его элементы-предки;
  • 'self': подсвечивает только секторный блок под курсором мыши;
  • 'none': не будет приглушать другие элементы.

Упомянутый выше «highlight» использует стиль emphasis для сектора под курсором мыши и стиль highlight для других связанных секторов. Таким образом, вы можете легко реализовать необходимость выделения связанных данных.

В частности, для параметров конфигурации:

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

highlightPolicy имеет значение 'descendant':

Пример

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'descendant',
        data: [{
            value: 10,
            children: [{
                name: 'target',
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

Попробуйте сами »

highlightPolicy имеет значение 'ancestor':

Пример

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'ancestor',
        data: [{
            value: 10,
            children: [{
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        name: 'target',
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

Попробуйте сами »

Другие примеры

Дополнительные справочные материалы по настройке диаграммы sunburst:https://www.echartsjs.com/zh/option.html#series-sunburst

Другие расширения