Солнечные лучи с дизайном уровня постера в ECharts 4.0.

внешний интерфейс JavaScript дизайн ECharts

16 января 2018 г. ECharts выпустила версию 4.0, которая включает новую серию диаграмм Sunburst.


Нормальная диаграмма солнечных лучей:

Литературное восходящее солнце:


2B Sunburst — это действительно похоже на солнечные лучи щ(ﾟДﾟщ):

Может быть, картинка с солнечными лучами в представлении у всех может выглядеть только как "обычная картинка с солнечными лучами" выше.Трудно представить, что такую ​​дизайнерскую работу можно написать через элементы конфигурации, правда? (Сянь По продает дыни~)

Потому что это солнечные лучи дома ECharts!

В дополнение к внешнему виду мы также предоставляем множество функций, облегчающих использование карты солнечных лучей, в том числе:Детализация данных, визуальное картирование, несколько методов выделения и интерактивная обработкаи т.п. Мы стремимся использовать (черную) технологию, чтобы упростить визуализацию, если вы будете следовать этому руководству, вы сможете легко приступить к работе!

(Звенит школьный звонок~~~)


Вам может быть немного незнакомо название «Солнечные лучи», но на самом деле до того, как мы запустили солнечный луч, на платформе отображения работы EChartsGalleryДа, уже есть пользователи, которые очень наивно сами выбросили карту солнечных лучей——

«Карта восходящего солнца» для создания многослойного пирога из работ сообщества:ECharts Gallery


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


Представлены соответствующие документы

Диаграмма Sunburst — это новый тип диаграммы в ECharts 4.0.Страница загрузки официального сайтаЗагрузите «полную версию» ECharts и импортируйте загруженный файл JavaScript, чтобы создать диаграмму солнечных лучей.

простая диаграмма солнечных лучей

Для создания графика солнечных лучей требуетсяseriesТип, объявленный в элементе конфигурации,'sunburst'серию и объявить ее в древовидной структуреdata:

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
        }]
    }
};

Получил следующий результат:




Цвет и другие настройки стиля

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

  • существует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элемент конфигурации. Это массив, в котором 0-й элемент представляет график, который возвращается на верхний уровень после детализации данных, а каждый последующий элемент представляет собой уровень от центра круга до внешнего слоя.

Например, предположим, что у нас нет детализации данных и мы хотим установить цвет самого внутреннего сектора красным, а текст синим, мы можем установить его следующим образом:

series: {
    // ...
    levels: [
        {
            // 留给数据下钻点的空白配置
        },
        {
            // 最靠内测的第一层
            itemStyle: {
                color: 'red'
            },
            label: {
                color: 'blue'
            }
        },
        {
            // 第二层 ...
        }
    ]
}

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

детализировать данные

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

Когда данные будут детализированы, в середине появится график для возврата к предыдущему слою Стиль графика можно передать черезlevels[0]конфигурация.

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

Выделите связанные сектора

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

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

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

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

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

highlightPolicyдля'descendant'или'ancestor'Эффекты:



Суммировать

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




Категории