echarts柱状图筛选

### 实现ECharts柱状图的数据筛选功能

为了实现在ECharts中的数据筛选功能，可以通过前端交互逻辑来控制显示哪些数据条目。具体来说，在用户界面提供筛选条件输入框或下拉菜单等控件，当用户选择特定条件时，JavaScript代码会根据这些条件过滤原始数据集并重新渲染图表。

#### 数据准备阶段
假设有一个`EchartsRes`对象用于存储X轴标签(`xData`)以及对应的Y轴数值(`yData`)：

public class EchatsRes {
    private List<String> xData;
    private List<Double> yData;

    // getter and setter methods...
}

此部分描述了后端返回给前端的数据结构[^3]。

#### 前端HTML页面设置
在网页上创建一个简单的表单供用户输入筛选条件，比如按名称模糊匹配或者范围查询等。这里仅展示基本框架：

<div>
  <label for="filter">Filter by name:</label>
  <input type="text" id="filter">
  <button onclick="applyFilter()">Apply</button>

  <!-- Chart container -->
  <div id="main" style="width: 600px;height:400px;"></div>
</div>

#### JavaScript函数定义
编写一段脚本来处理用户的筛选请求并将结果应用到图表中：

let chartInstance = echarts.init(document.getElementById('main'));

// Assume `dataFromServer` is the JSON object received from server-side.
const rawData = dataFromServer; 

function applyFilter() {
    const filterValue = document.getElementById('filter').value.toLowerCase();
    
    let filteredData = {};
    if (filterValue === '') {
        // If no filter applied, show all data points.
        filteredData['name'] = 'All Data';
        filteredData['type'] = 'bar'; 
        filteredData['data'] = rawData.yData;
        filteredData['category'] = rawData.xData;
    } else {
        // Filter based on user input.
        filteredData['name'] = 'Filtered Data';
        filteredData['type'] = 'bar';

        filteredData['data'] = rawData.yData.filter((item, index) => 
            rawData.xData[index].toLowerCase().includes(filterValue));
        
        filteredData['category'] = rawData.xData.filter(item =>
            item.toLowerCase().includes(filterValue));
    }

    updateChart(filteredData);
}

function updateChart(data){
    option = {
      title: {
          text: `${data.name}`
      },
      tooltip: {},
      xAxis: {
          data: data.category,
          axisLabel: {
              rotate: 45
          }
      },
      yAxis: {},
      series: [{
          name: data.name,
          type: data.type,
          data: data.data
      }]
    };
  
    chartInstance.setOption(option);
}

上述代码片段展示了如何基于用户提供的关键词对数据进行简单字符串包含关系的筛选操作，并将筛选后的数据显示出来[^1]。