Echarts如何像Plotly Express一样方便地实现折线图数据分组？

在ECharts中，实现类似于Plotly Express中的折线图数据分组功能，可以通过以下步骤来实现。ECharts本身并没有像Plotly Express那样直接提供“分组”参数，但可以通过配置series和dataset来实现类似的效果。

1. 数据准备

假设你有一个数据集，其中包含多个分组的数据。例如：

[
    {"category": "A", "x": 1, "y": 10},
    {"category": "A", "x": 2, "y": 20},
    {"category": "A", "x": 3, "y": 30},
    {"category": "B", "x": 1, "y": 15},
    {"category": "B", "x": 2, "y": 25},
    {"category": "B", "x": 3, "y": 35}
]

2. 使用dataset和series配置

ECharts中的dataset可以用于定义数据源，而series可以用于定义如何绘制数据。你可以通过dataset来定义数据，并通过series来为每个分组创建一条折线。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    dataset: {
        source: [
            ["category", "x", "y"],
            ["A", 1, 10],
            ["A", 2, 20],
            ["A", 3, 30],
            ["B", 1, 15],
            ["B", 2, 25],
            ["B", 3, 35]
        ]
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            encode: {
                x: 'x',
                y: 'y'
            },
            datasetIndex: 0,
            seriesLayoutBy: 'row',
            name: 'A'
        },
        {
            type: 'line',
            encode: {
                x: 'x',
                y: 'y'
            },
            datasetIndex: 0,
            seriesLayoutBy: 'row',
            name: 'B'
        }
    ]
};

myChart.setOption(option);

3. 动态生成series

如果你的分组是动态的，可以通过JavaScript动态生成series配置。例如：

var data = [
    {"category": "A", "x": 1, "y": 10},
    {"category": "A", "x": 2, "y": 20},
    {"category": "A", "x": 3, "y": 30},
    {"category": "B", "x": 1, "y": 15},
    {"category": "B", "x": 2, "y": 25},
    {"category": "B", "x": 3, "y": 35}
];

var categories = [...new Set(data.map(item => item.category))];

var series = categories.map(category => {
    return {
        type: 'line',
        encode: {
            x: 'x',
            y: 'y'
        },
        datasetIndex: 0,
        seriesLayoutBy: 'row',
        name: category
    };
});

var option = {
    dataset: {
        source: data
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        type: 'value'
    },
    series: series
};

myChart.setOption(option);

4. 使用transform进行数据分组

ECharts 5.0及以上版本支持dataset.transform，可以通过transform对数据进行分组和聚合操作。例如：

var option = {
    dataset: [
        {
            source: [
                ["category", "x", "y"],
                ["A", 1, 10],
                ["A", 2, 20],
                ["A", 3, 30],
                ["B", 1, 15],
                ["B", 2, 25],
                ["B", 3, 35]
            ]
        },
        {
            transform: {
                type: 'filter',
                config: { dimension: 'category', value: 'A' }
            }
        },
        {
            transform: {
                type: 'filter',
                config: { dimension: 'category', value: 'B' }
            }
        }
    ],
    xAxis: {
        type: 'category'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            datasetIndex: 1,
            encode: {
                x: 'x',
                y: 'y'
            },
            name: 'A'
        },
        {
            type: 'line',
            datasetIndex: 2,
            encode: {
                x: 'x',
                y: 'y'
            },
            name: 'B'
        }
    ]
};

myChart.setOption(option);

总结

通过dataset和series的配置，ECharts可以实现类似于Plotly Express的折线图数据分组功能。你可以根据数据的结构和需求，选择合适的方式来配置ECharts图表。