Echarts通过Jquery添加下拉列表动态改变展示的数据和图表

以下是一个简化的代码示例，展示了如何使用jQuery和ECharts来根据下拉列表的选择动态更新数据和图表。

HTML部分：

<select id="chart-selector">
  <option value="data1">数据1</option>
  <option value="data2">数据2</option>
</select>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript部分（使用jQuery和ECharts）：

// 假设有两组数据
var data1 = [120, 200, 150, 80, 70, 110, 130];
var data2 = [30, 182, 434, 791, 390, 30, 10];
 
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
 
// 图表配置
var option = {
  // ... 其他图表配置项
};
 
// 设置图表的配置项和数据
function setChartData(data) {
  option.series = [{
    // ... 系列配置
    data: data
  }];
  myChart.setOption(option);
}
 
// 当下拉列表选项变化时更新图表
$('#chart-selector').change(function() {
  var selectedData = $(this).val() === 'data1' ? data1 : data2;
  setChartData(selectedData);
});
 
// 初始化时显示第一个数据集
setChartData(data1);

这段代码首先定义了两组假设的数据，然后初始化了ECharts图表并准备了一个函数setChartData来设置图表的数据。在jQuery的change事件中，我们根据下拉列表的选择来决定使用哪组数据，然后更新图表。最后，我们在页面加载时默认显示第一组数据的图表。