数据筛选与过滤

数据筛选与过滤的基本概念

数据筛选与过滤是数据处理的核心环节，尤其在数据可视化领域，它直接影响最终呈现效果。ECharts作为强大的可视化库，提供了多种数据筛选与过滤机制，帮助开发者高效处理复杂数据集。从简单的条件过滤到复杂的交互式筛选，这些功能让数据展示更加灵活精准。

基础数据过滤方法

ECharts中最基础的数据过滤通过dataset和series配置实现。dataset.source可以直接接收过滤后的数据，也可以在series中通过encode属性选择特定字段：

option = {
  dataset: {
    source: [
      ['product', 'sales', 'price'],
      ['A', 120, 18],
      ['B', 200, 22],
      ['C', 150, 19]
    ]
  },
  series: {
    type: 'bar',
    encode: {
      // 只显示sales字段
      x: 'product',
      y: 'sales'
    }
  }
};

对于时间序列数据，可以使用dataZoom组件进行范围过滤：

option = {
  xAxis: {type: 'time'},
  yAxis: {},
  series: {
    type: 'line',
    data: [
      ['2023-01-01', 100],
      ['2023-02-01', 200],
      // ...更多数据
    ]
  },
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'  // 过滤模式
  }]
};

条件过滤与数据转换

ECharts支持通过transform配置实现复杂条件过滤。以下示例筛选出销售额大于150的产品：

option = {
  dataset: [{
    source: [
      ['product', 'sales'],
      ['A', 120],
      ['B', 200],
      ['C', 150]
    ]
  }, {
    transform: {
      type: 'filter',
      config: { dimension: 'sales', '>': 150 }
    }
  }],
  series: {
    type: 'pie',
    datasetIndex: 1  // 使用过滤后的数据集
  }
};

更复杂的多条件过滤可以通过自定义transform函数实现：

option = {
  dataset: {
    source: [
      {name: 'A', value: 120, category: 'X'},
      {name: 'B', value: 200, category: 'Y'},
      {name: 'C', value: 150, category: 'X'}
    ]
  },
  transform: {
    type: 'ecStat:regression',
    config: {
      formula: 'linear',
      // 自定义过滤条件
      filter: function(item) {
        return item.value > 130 && item.category === 'X';
      }
    }
  }
};

交互式数据筛选

ECharts的视觉映射(visualMap)组件提供了直观的交互式筛选能力。以下示例通过颜色映射实现数据筛选：

option = {
  visualMap: {
    type: 'continuous',
    dimension: 1,
    min: 0,
    max: 250,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    // 实时过滤
    pieces: [
      {gt: 180, label: '高销量'},
      {gt: 120, lte: 180, label: '中销量'},
      {lte: 120, label: '低销量'}
    ]
  },
  series: {
    type: 'scatter',
    data: [
      [10, 120],
      [15, 200],
      [18, 150]
    ]
  }
};

结合brush组件可以实现多图表联动筛选：

option = {
  brush: {
    toolbox: ['rect', 'keep', 'clear'],
    xAxisIndex: 0
  },
  xAxis: {data: ['A','B','C','D','E']},
  yAxis: {},
  series: [{
    type: 'bar',
    data: [5, 20, 36, 10, 15]
  }]
};

大数据量下的优化策略

处理大规模数据时，性能优化尤为重要。ECharts提供了large模式和progressive渲染：

option = {
  dataset: {
    source: largeData  // 假设是10万条数据
  },
  series: {
    type: 'scatter',
    large: true,
    progressive: 400,
    dimensions: ['x', 'y'],
    encode: {
      x: 'x',
      y: 'y'
    }
  }
};

对于超大数据集，建议在服务端预先处理：

// 服务端Node.js示例
app.get('/filtered-data', (req, res) => {
  const rawData = require('./large-dataset.json');
  const filtered = rawData.filter(item => 
    item.value > req.query.min && 
    item.category === req.query.category
  );
  res.json(filtered.slice(0, 1000));  // 限制返回数量
});

动态数据更新与过滤

ECharts支持动态更新数据并保持当前过滤状态。以下示例展示如何增量添加数据：

// 获取当前过滤条件
const currentFilter = myChart.getOption().dataZoom[0];
// 添加新数据
const newData = [...oldData, ...freshData];
myChart.setOption({
  series: [{
    data: newData
  }],
  dataZoom: [currentFilter]  // 保持原有过滤
});

响应式设计可以通过connect实现多图表联动：

// 创建多个图表实例
const chart1 = echarts.init(dom1);
const chart2 = echarts.init(dom2);

// 建立联动
echarts.connect([chart1, chart2]);

// 任一图表的筛选操作会自动同步到其他图表

自定义过滤扩展

对于特殊需求，可以扩展ECharts的过滤能力。以下实现一个基于正则表达式的文本过滤：

echarts.registerTransform('regexFilter', function (ecModel, options) {
  ecModel.eachComponent('dataset', function (datasetModel) {
    const source = datasetModel.getSource();
    const regex = new RegExp(options.config.pattern);
    const filteredData = source.filter(item => 
      regex.test(item[options.config.dimension])
    );
    datasetModel.getSource().data = filteredData;
  });
});

// 使用自定义transform
option = {
  dataset: {
    source: [
      {name: 'Apple', value: 100},
      {name: 'Banana', value: 200},
      {name: 'Orange', value: 150}
    ]
  },
  transform: {
    type: 'regexFilter',
    config: {
      dimension: 'name',
      pattern: '^A'  // 匹配A开头的名称
    }
  }
};

性能监控与调试

开发过程中需要监控过滤性能，可以通过ECharts事件系统实现：

myChart.on('rendered', function(params) {
  console.log('渲染耗时:', params.time);
});

// 自定义性能标记
console.time('filter');
applyComplexFilter(data);
console.timeEnd('filter');  // 输出过滤耗时

对于内存敏感场景，注意及时清理无用数据：

// 清理旧数据
myChart.clear();
// 显式释放内存
myChart.dispose();

实际业务场景整合

结合具体业务需求，数据过滤可以更加智能化。电商平台示例：

// 动态价格区间过滤
function updatePriceRange(min, max) {
  const option = myChart.getOption();
  option.dataset.transform = {
    type: 'filter',
    config: {
      dimension: 'price',
      '>=': min,
      '<=': max
    }
  };
  myChart.setOption(option);
}

// 品类多选过滤
function filterByCategories(cats) {
  const option = myChart.getOption();
  option.dataset.transform = {
    type: 'filter',
    config: {
      dimension: 'category',
      in: cats
    }
  };
  myChart.setOption(option);
}