gridy-chart-echarts

GridyGrid chart component ECharts driver

Installation

npm i gridy-grid echarts gridy-chart-echarts gridy-grid-default sk-theme-default

and plug it to your page

<script src="/node_modules/echarts/dist/echarts.js"></script>

then add element to your container or setup it programmatically

    <gridy-grid id="gridyGrid" base-path="/node_modules/gridy-grid/src" sort-field="$.title">
        <gridy-data-source fields='[{ "title": "Name", "path": "$.name" },{ "title": "Value", "path": "$.value"},{ "title": "Color", "path": "$.color"}]'
                       datasource-type="DataSourceLocal" datapath="$.data"></gridy-data-source>
    
        <gridy-chart id="gridyChart2" legend='{"data": ["sales"]}' type="bar" dri="echarts" field-color="Color" field-name="Name" field-value="Value" inner-radius="50" width="400" height="400"></gridy-chart>
    
    </gridy-grid>
    <script type="module">
        import { GridyGrid } from '/node_modules/gridy-grid/src/gridy-grid.js';
        let data = [];
        data.push({ name: 'FooBar1', value: 100 });
        data.push({ name: 'FooBar2', value: 230 });
        data.push({ name: 'FooBar3', value: 340 });
        data.push({ name: 'FooBar4', value: 170 });
        data.push({ name: 'FooBar5', value: 570 });
        let grid = document.querySelector('#gridyGrid');
        grid.addEventListener('bootstraped', () => {
            grid.charts[0].addEventListener('rendered', (event) => {
                grid.dataSource.loadData(data);
            });
        });
        customElements.define('gridy-grid', GridyGrid);
    </script>