Плагин интеграции диаграмм BI Echarts

1. Обзор

1.1 Версия

Версия FineBI	Версия пакета FineBI JAR
6.0.13	2023-09-04

1.2 Функциональные сценарии

После установки BI Echarts Chart Integration Plugin, FineBI может взаимодействовать с диаграммами Echarts, а тип компонента диаграммы поддерживает диаграммы Echarts.

2. Знакомство с плагином

2.1 Установка плагина

Приобретение плагина: пожалуйста, отсканируйте QR-код ниже и добавьте WeChat оператора, чтобы получить установочный пакет и пробное руководство

Метод установки подключаемого модуля конструктора см. в разделе: Управление подключаемым модулем конструктора
Метод установки серверного плагина: Управление серверным плагином

2.2 Использование плагина

2.2.1 Создание компонентов диаграммы

В интерфейсе темы анализа добавьте компоненты, войдите в интерфейс редактирования компонентов и выберите в качестве типа диаграммы диаграммы Echarts.

2.2.2 Редактирование компонентов диаграммы

1) Перетаскивание полей данных

Перетащите поля, которые вы хотите использовать в наборе данных, в область редактирования диаграммы.

2) Редактирование данных оператора

Операторы данных, поддерживающие дальнейшую обработку необработанных данных графика (в основном конфигураций полей (fileds) и данных двумерных таблиц (colData), хранящихся в столбцах).

Пример арифметики данных карты восходящего солнца
``` function dataCal(originData) { var dataModels = originData.dataModels; var data; var data; var dataModels[0]. var colData = dataModels[0].colData; var data; var& nbsp;map = {}; var arr = []; for (var i =& nbsp;0; i < colData[0].length; i++) { var id = colData[0][i]; var pid = colData[1][i]; & nbsp; var name = colData[2][i]; var value = colData[3][i]; if (map[id]) { & nbsp; map[id]. nbsp; map[id].name = name; &nbsp ; map[id].value = value; } else { & & & nbsp; map[id] = { & nbsp; name: name, & nbsp; value: value, &nbsp ; children: [] } & nbsp; } if (pid && pid.length >& nbsp;0) { if (!map[pid]) { map[pid] = { children: [] &nbsp ; } & & nbsp; } map[pid].children.push(map[id]); & nbsp; } if (!pid

Пример арифметики данных карты восходящего солнца

``` function dataCal(originData) { var dataModels = originData.dataModels; var data; var data; var dataModels[0]. var colData = dataModels[0].colData; var data; var& nbsp;map = {}; var arr = []; for (var i =& nbsp;0; i < colData[0].length; i++) { var id = colData[0][i]; var pid = colData[1][i]; & nbsp; var name = colData[2][i]; var value = colData[3][i]; if (map[id]) { & nbsp; map[id]. nbsp; map[id].name = name; &nbsp ; map[id].value = value; } else { & & & nbsp; map[id] = { & nbsp; name: name, & nbsp; value: value, &nbsp ; children: [] } & nbsp; } if (pid && pid.length >& nbsp;0) { if (!map[pid]) { map[pid] = { children: [] &nbsp ; } & & nbsp; } map[pid].children.push(map[id]); & nbsp; } if (!pid

3 ) Отредактируйте оператор конфигурации

Оператор конфигурации, который выводит конфигурацию графика (соответствующую конфигурации атрибутов Echarts) на основе данных, обработанных на предыдущем шаге

Пример оператора конфигурации для графа асахи

Пример оператора конфигурации для графа асахи
// вызываем синхронно function optionCal(data, chartConfig) { var option = { &nbsp ; series: { type:& & & nbsp; 'sunburst', // emphasis: { && nbsp; // фокус: 'ancestor' && nbsp; // }, & nbsp; data: data, radius: [0, '90%'], &nbsp nbsp;'90%'], label: { & & & & nbsp; rotate: 'radial' } } }; return option; } // Асинхронный вызов. return option; } // Асинхронные вызовы, необходимо контролировать логику загрузки, например, некоторые асинхронные ресурсы могут быть загружены только один раз function optionCal(data, chartConfig. callbackFun) { var option = { series: { & nbsp; type: 'sunburst', &nbsp // emphasis: { // & nbsp; focus: 'ancestor', &nbsp nbsp; фокус: 'предок' //& nbsp;}, data: data, &nbsp nbsp; радиус: [0, '90%'],   метка: { // & nbsp; фокус: 'предок' //& nbsp; } nbsp; label: { rotate: 'radial' } & nbsp; } }; callbackFun({ option: option , chartContainerCb: function(myChart) { console.log(myChart); & nbsp; }); }); } nbsp; } }); } Описание:

// вызываем синхронно function optionCal(data, chartConfig) { var option = { &nbsp ; series: { type:& & & nbsp; 'sunburst', // emphasis: { && nbsp; // фокус: 'ancestor' && nbsp; // }, & nbsp; data: data, radius: [0,&nbsp;'90%'], &nbsp nbsp;'90%'], label: { & & & & nbsp; rotate: 'radial' } } }; return option; } // Асинхронный вызов. return option; } // Асинхронные вызовы, необходимо контролировать логику загрузки, например, некоторые асинхронные ресурсы могут быть загружены только один раз function optionCal(data, chartConfig. callbackFun) { var option = { series: { & nbsp; type: 'sunburst', &nbsp // emphasis: { // & nbsp; focus: 'ancestor', &nbsp nbsp; фокус: 'предок' //& nbsp;}, data: data, &nbsp nbsp; радиус: [0, '90%'], &nbsp; метка: { // & nbsp; фокус: 'предок' //& nbsp; } nbsp; label: { rotate: 'radial' } & nbsp; } }; callbackFun({ option: option , chartContainerCb: function(myChart) { console.log(myChart); & nbsp; }); }); } nbsp; } }); }

Описание:

4) Диаграмма предварительного просмотра

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

5) Расширенная конфигурация

Вычисление данных на задней панели: по умолчанию выключено, когда арифметика данных переходит к вычислению на задней панели; включено, арифметика данных будет выполняться на задней панели

2.2.3 Управление шаблонами

1) Сохраните другой шаблон

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

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

После успешного сохранения вы можете выбрать соответствующий шаблон во всплывающем окне Template References.

2) Цитировать шаблон

Нажмите на кнопку Cite a Template, чтобы выбрать личные и публичные шаблоны для цитирования во всплывающем окне

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

3) Удалите шаблон

Удаление шаблонов, в настоящее время поддерживается удаление непубличных шаблонов в разделе Личные

2.2.4 Применение компонентов диаграммы

Добавьте компоненты на страницу редактирования приборной панели для их предварительного просмотра

2.2.4 Глобальная конфигурация

JS-движок: вычисления, связанные с бэкендом, по умолчанию вызывают J2V8 (необходимо поддерживать инженерию J2V8), если нет, попробуйте вызвать NASHORN

3. условия

3.1 Преобразование форматов данных: числовые форматы в настоящее время не поддерживаются, передаются только необработанные данные графика; поля даты поддерживают преобразование форматов в режиме внешнего расчета (не поддерживается при включенном внутреннем расчете)

3.2 Отсутствие поддержки мобильных устройств

3.3 Экспорт фоновых изображений не поддерживается

3.4 Переходы и ссылки на другие компоненты в настоящее время не поддерживаются (другие компоненты могут связываться с компонентом echarts chart в одном направлении).