echarts饼状图开始展示城市,点击城市显示他下面的所有区县

您可以使用 ECharts 的事件绑定机制，在饼状图上绑定点击事件，然后在事件处理函数中获取点击的城市信息，再根据城市信息获取该城市下的所有区县信息，最后更新饼状图的数据并重新渲染。

以下是一个简单的示例代码：

// 初始化饼状图
var myChart = echarts.init(document.getElementById('myChart'));

// 绑定点击事件
myChart.on('click', function (params) {
  // 获取点击的城市信息
  var city = params.name;
  
  // 根据城市信息获取该城市下的所有区县信息
  var districts = getDistrictsByCity(city);
  
  // 更新饼状图数据并重新渲染
  myChart.setOption({
    series: [{
      data: districts
    }]
  });
});

// 初始数据
var data = [
  {name: '北京', value: 10},
  {name: '上海', value: 20},
  {name: '广州', value: 30},
  {name: '深圳', value: 40},
  {name: '杭州', value: 50}
];

// 渲染饼状图
myChart.setOption({
  series: [{
    type: 'pie',
    data: data
  }]
});

// 根据城市信息获取该城市下的所有区县信息的示例函数
function getDistrictsByCity(city) {
  // TODO: 根据城市信息获取该城市下的所有区县信息
  return [
    {name: '区县1', value: 10},
    {name: '区县2', value: 20},
    {name: '区县3', value: 30},
    {name: '区县4', value: 40},
    {name: '区县5', value: 50}
  ];
}

在示例代码中，我们首先初始化了一个饼状图，并绑定了点击事件。在事件处理函数中，我们获取了点击的城市信息，并根据城市信息获取该城市下的所有区县信息。然后，我们更新了饼状图的数据并重新渲染。这里的更新方式是直接使用 setOption 方法更新数据。最后，我们提供了一个示例函数 getDistrictsByCity，用于根据城市信息获取该城市下的所有区县信息，您需要根据实际情况进行调整。