echarts对象数组的输入格式的柱状图展示城市下的区县人口,当我点击城市时只展示这个城市的区县

您好，关于您的问题，可以通过以下步骤来实现：

1.准备数据

首先需要准备好数据，数据格式为对象数组，每个对象包含城市和区县信息以及对应的人口数据。例如：

var data = [
  {city: '北京', area: '东城区', population: 1000},
  {city: '北京', area: '西城区', population: 2000},
  {city: '北京', area: '朝阳区', population: 3000},
  {city: '上海', area: '黄浦区', population: 1500},
  {city: '上海', area: '徐汇区', population: 2500},
  {city: '上海', area: '长宁区', population: 3500},
  // more data...
];

2.绘制柱状图

使用 ECharts 的柱状图组件，将数据绘制成柱状图。其中，x 轴表示区县，y 轴表示人口数量，柱状图的颜色可以根据城市不同进行区分。

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 绘制柱状图
myChart.setOption({
  xAxis: {
    type: 'category',
    data: ['东城区', '西城区', '朝阳区', '黄浦区', '徐汇区', '长宁区'], // 区县名称
    axisLabel: {
      interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效
      rotate: 45, // 坐标轴刻度标签的旋转角度
      margin: 8 // 刻度标签与轴线之间的距离
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function (value, index) {
        return value + '人'; // 格式化人口数量
      }
    }
  },
  series: [{
    type: 'bar',
    data: [1000, 2000, 3000, 1500, 2500, 3500], // 区县人口数量
    itemStyle: {
      color: function (params) {
        // 根据城市不同设置不同颜色
        return params.dataIndex < 3 ? '#5470c6' : '#91cc75';
      }
    }
  }]
});

3.添加点击事件

通过 ECharts 的点击事件，当用户点击某个城市时，只展示该城市下的区县数据。具体实现方式如下：

// 点击事件
myChart.on('click', function (params) {
  var selectedCity = params.name; // 获取用户点击的城市名称

  // 过滤数据，只显示该城市下的区县数据
  var filteredData = data.filter(function (item) {
    return item.city === selectedCity;
  });

  // 更新柱状图数据
  myChart.setOption({
    xAxis: {
      data: filteredData.map(function (item) {
        return item.area;
      })
    },
    series: [{
      data: filteredData.map(function (item) {
        return item.population;
      })
    }]
  });
});

以上就是实现柱状图展示城市下的区县人口，并且能够根据用户点击的城市进行数据过滤的完整步骤。