ECharts 5 使用外部的数据转换器 echarts-stat 聚集 (Aggregate) 实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts 5 使用外部的数据转换器 echarts-stat 聚集 (Aggregate) 实例</title>
    <script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
    
    <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
</head>

<body>
    
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        var ROOT_PATH = 'https://demo.runoops.com';
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

var option;

$.when(
            $.get(ROOT_PATH + '/data/life-expectancy-table.json'),
            $.getScript(
                'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
            )
        ).done(function (res) {
            run(res[0]);
        });
        function run(_rawData) {
            echarts.registerTransform(ecSimpleTransform.aggregate);
            option = {
                dataset: [
                    {
                        id: 'raw',
                        source: _rawData
                    },
                    {
                        id: 'since_year',
                        fromDatasetId: 'raw',
                        transform: [
                            {
                                type: 'filter',
                                config: {
                                    dimension: 'Year',
                                    gte: 1950
                                }
                            }
                        ]
                    },
                    {
                        id: 'income_aggregate',
                        fromDatasetId: 'since_year',
                        transform: [
                            {
                                type: 'ecSimpleTransform:aggregate',
                                config: {
                                    resultDimensions: [
                                        { name: 'min', from: 'Income', method: 'min' },
                                        { name: 'Q1', from: 'Income', method: 'Q1' },
                                        { name: 'median', from: 'Income', method: 'median' },
                                        { name: 'Q3', from: 'Income', method: 'Q3' },
                                        { name: 'max', from: 'Income', method: 'max' },
                                        { name: 'Country', from: 'Country' }
                                    ],
                                    groupBy: 'Country'
                                }
                            },
                            {
                                type: 'sort',
                                config: {
                                    dimension: 'Q3',
                                    order: 'asc'
                                }
                            }
                        ]
                    }
                ],
                title: {
                    text: 'Income since 1950'
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true
                },
                xAxis: {
                    name: 'Income',
                    nameLocation: 'middle',
                    nameGap: 30,
                    scale: true
                },
                yAxis: {
                    type: 'category'
                },
                grid: {
                    bottom: 100
                },
                legend: {
                    selected: { detail: false }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    },
                    {
                        type: 'slider',
                        height: 20
                    }
                ],
                series: [
                    {
                        name: 'boxplot',
                        type: 'boxplot',
                        datasetId: 'income_aggregate',
                        itemStyle: {
                            color: '#b8c5f2'
                        },
                        encode: {
                            x: ['min', 'Q1', 'median', 'Q3', 'max'],
                            y: 'Country',
                            itemName: ['Country'],
                            tooltip: ['min', 'Q1', 'median', 'Q3', 'max']
                        }
                    },
                    {
                        name: 'detail',
                        type: 'scatter',
                        datasetId: 'since_year',
                        symbolSize: 6,
                        tooltip: {
                            trigger: 'item'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            align: 'left',
                            verticalAlign: 'middle',
                            rotate: 90,
                            fontSize: 12
                        },
                        itemStyle: {
                            color: '#d00000'
                        },
                        encode: {
                            x: 'Income',
                            y: 'Country',
                            label: 'Year',
                            itemName: 'Year',
                            tooltip: ['Country', 'Year', 'Income']
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

option && myChart.setOption(option);
    </script>
</body>

</html>