ECharts 5 使用 transform filter 实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts 5 使用 transform filter 实例</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: 600px;height:400px;"></div>
    <script type="text/javascript">
        var ROOT_PATH = 'https://demo.runoops.com';
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

var option;

$.get(
            ROOT_PATH + '/data/life-expectancy-table.json',
            function (_rawData) {
                run(_rawData);
            }
        );
        function run(_rawData) {
            option = {
                dataset: [
                    {
                        id: 'dataset_raw',
                        source: _rawData
                    },
                    {
                        id: 'dataset_since_1950_of_germany',
                        fromDatasetId: 'dataset_raw',
                        transform: {
                            type: 'filter',
                            config: {
                                and: [
                                    { dimension: 'Year', gte: 1950 },
                                    { dimension: 'Country', '=': 'Germany' }
                                ]
                            }
                        }
                    },
                    {
                        id: 'dataset_since_1950_of_france',
                        fromDatasetId: 'dataset_raw',
                        transform: {
                            type: 'filter',
                            config: {
                                and: [
                                    { dimension: 'Year', gte: 1950 },
                                    { dimension: 'Country', '=': 'France' }
                                ]
                            }
                        }
                    }
                ],
                title: {
                    text: 'Income of Germany and France since 1950'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    nameLocation: 'middle'
                },
                yAxis: {
                    name: 'Income'
                },
                series: [
                    {
                        type: 'line',
                        datasetId: 'dataset_since_1950_of_germany',
                        showSymbol: false,
                        encode: {
                            x: 'Year',
                            y: 'Income',
                            itemName: 'Year',
                            tooltip: ['Income']
                        }
                    },
                    {
                        type: 'line',
                        datasetId: 'dataset_since_1950_of_france',
                        showSymbol: false,
                        encode: {
                            x: 'Year',
                            y: 'Income',
                            itemName: 'Year',
                            tooltip: ['Income']
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

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

</html>