Riot-echarts — это простой тег Riot для удобной визуализации диаграмм с помощью Baidu ECharts, аналогично Google Chart.

Особенности

• Использование Baidu ECharts.
• Простота представления данных с использованием структуры DataTable. Это будет знакомо тем, кто использовал Google Charts.
• Удобство работы с SQL-запросами (без преобразования строк и столбцов).

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

Импортируйте ECharts или используйте CDN:

https://cdn.bootcss.com/echarts/3.3.2/echarts.min.js

Установите riot-echarts:

npm install riot-echarts --save

Импортируйте riot-echarts:

import 'riot-echarts'

<app>
    <p>chart</p>
    <echart simple="{ option }"></echart>
    <script>
        this.option = {type:'pie',
            data: [
                ['name', 'value'],
                ['a', 10],
                ['b', 20],
                ['c', 25],
                ['d', 15],
                ['e', 55]
            ]
        }
    </script>
    <style>
        echart {
            display:block;
            width: 100%;
            height: 500px;
        }
    </style>
</app>

Обратите внимание: контейнер диаграмм должен быть видимым и иметь заданные высоту и ширину перед рендерингом диаграммы. Для получения дополнительной информации см. пример.

Поддерживаемые атрибуты тега riot echart

Атрибут simple

simple={type:string, data, color:Array<string>}

type: pie | bar | line data:

• может быть массивом, первая строка которого — столбцы;
• может быть объектом DataTable;
• может быть thenable-объектом, который в конечном итоге разрешается в массив или DataTable;
• может быть функцией, которая возвращает массив, DataTable или thenable;
• может быть функцией, принимающей обратный вызов и в конечном итоге разрешающейся в массив или DataTable. color: цветовые листы, если не указано, будут использоваться встроенные.

Атрибут option

option={}

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

Планы

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

Лицензия

MIT