如何用JavaScript数组填充SELECT下拉菜单并联动展示对应州的饼图

你只需要将原有饼图绘制逻辑封装为可传入州缩写的复用函数，再绑定下拉框的选中事件即可实现联动，完整修改逻辑如下：

实现步骤 #

1. 把饼图绘制逻辑封装为函数，接收州缩写作为入参，同时提前声明全局的图表实例变量，避免重复渲染出现多图重叠问题
2. 给下拉菜单绑定change事件，每次选中状态变更时，将当前选中的州缩写传入绘图函数刷新数据
3. 页面首次加载时默认渲染第一个州的饼图，避免页面初始无内容

完整修改后代码 #

// 全局声明图表实例，用于后续重绘前销毁
let chart = null
const businessData = [
  // 你的原有业务数据保持不变
  { '\ufeffbusiness_id': 'y2gFcAVBXmVxFXAugRe5ig',
    name: 'Scrumptious Crumpets',
    address: '7414 SE Milwaukie Ave',
    city: 'Portland',
    state: 'OR',
    latitude: '45.47107',
    longitude: '-122.64827',
    stars: '5',
    review_count: '23',
    is_open: '0',
    category: 'Coffee & Tea',
    attr_key: 'restaurantspricerange2',
    attr_value: '1'
  }
  // 其余数据保持原有格式即可
]

// render dropdown
const dropdownElement = document.getElementById("state-dropdown");
// 若需要支持加州可在下方数组补充 { name: 'CALIFORNIA', abbreviation: 'CA'}
let states = [ 
    { name: 'OREGON',        abbreviation: 'OR'},
    { name: 'FLORIDA',       abbreviation: 'FL'},
    { name: 'OHIO',          abbreviation: 'OH'},
    { name: 'MASSACHUSETTS', abbreviation: 'MA'},
    { name: 'TEXAS',         abbreviation: 'TX'},
    { name: 'COLORADO',      abbreviation: 'CO'},
    { name: 'GEORGIA',       abbreviation: 'GA'},
    { name: 'WASHINGTON',    abbreviation: 'WA'},
    { name: 'MINNESOTA',     abbreviation: 'MN'},
]

// 原有下拉框生成逻辑保持不变
states.forEach(function(state) {
    const optionElement = document.createElement("option");
    optionElement.value = state.abbreviation
    const node = document.createTextNode(state.name);
    optionElement.appendChild(node);
    dropdownElement.appendChild(optionElement)  
})

// 封装饼图绘制函数
function renderPieChart(stateAbbr) {
  // 按传入的州缩写筛选数据
  const filteredData = businessData.filter(function (obj) {
    return obj.state === stateAbbr; 
  })

  let countOfFiveStars = 0
  let countOfFourStars = 0
  let countOfThreeStars = 0
  let countOfTwoStars = 0
  let countOfOneStar = 0

  filteredData.forEach(function(obj) {
    switch (obj.stars) {
      case "5":
        countOfFiveStars++;
        break;
      case "4":
        countOfFourStars++;
        break;
      case "3":
        countOfThreeStars++;
        break;
      case "2":
        countOfTwoStars++;
        break;
      case "1":
        countOfOneStar++;
        break;
      default: break;
    }
  })

  var options = {
    series: [
      countOfFiveStars, countOfFourStars, countOfThreeStars, countOfTwoStars, countOfOneStar
    ],
    chart: {
      width: 700,
      type: 'pie',
    },
    labels: ['五星', '四星', '三星', '二星', '一星'],
    responsive: [{
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          position: 'bottom'
        }
      }
    }]
  };

  // 如果已有图表实例，先销毁再渲染新的，避免重叠
  if(chart) chart.destroy()
  chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();
}

// 绑定下拉框选中事件
dropdownElement.addEventListener('change', function(e) {
  renderPieChart(e.target.value)
})

// 页面首次加载时默认渲染第一个州的饼图
renderPieChart(states[0].abbreviation)

内容的提问来源于stack exchange，提问作者user2976766