帮我写一个wxml代码，左边我想展示八个不同的中医流派，右边展示每个流派对应的人物，在右边下方放一个散点图，当我点击流派按钮时，右边的人物数据和散点图数据会更新当前点击的流派，再给出wxss代码

好的，下面是一个简单的wxml和wxss代码示例，用于展示左边的中医流派列表和右边的对应人物以及下方的散点图。当点击左边的流派按钮时，右边的内容和散点图会更新显示所选流派的对应人物和数据。

wxml代码示例：

<view class="container">
  <view class="stream-list">
    <block wx:for="{{streams}}" wx:key="unique">
      <button bindtap="updateStream" data-stream="{{item.name}}">
        {{item.name}}
      </button>
    </block>
  </view>
  <view class="stream-details">
    <view class="selected-stream">
      <!-- 显示选中的流派信息 -->
      当前选中的流派：{{currentStream.name}}
    </view>
    <view class="selected-sages">
      <!-- 显示选中流派的对应人物 -->
      对应人物：
      <block wx:for="{{currentStream.sages}}" wx:key="unique">
        {{item.name}}
      </block>
    </view>
    <canvas canvas-id="scatterChart" class="scatter-chart"></canvas>
  </view>
</view>

wxss代码示例：

.container {
  display: flex;
}

.stream-list {
  width: 30%;
}

.stream-details {
  width: 70%;
  padding: 10px;
}

.stream-details .selected-stream {
  font-weight: bold;
}

.stream-details .selected-sages {
  margin-top: 10px;
}

.scatter-chart {
  width: 100%;
  height: 200px;
}

JavaScript逻辑处理示例（这部分通常放在单独的`.js`文件中）：

Page({
  data: {
    streams: [
      { name: '伤寒派', sages: [{ name: '张仲景' }] },
      { name: '温病派', sages: [{ name: '吴鞠通' }] },
      // ... 其他流派
    ],
    currentStream: null
  },
  updateStream: function(e) {
    const selectedStreamName = e.currentTarget.dataset.stream;
    const selectedStream = this.data.streams.find(stream => stream.name === selectedStreamName);
    this.setData({
      currentStream: selectedStream
    });
    
    // 这里应该调用API或者使用静态数据来更新散点图的数据
    // 以下是模拟数据更新的过程
    this.drawScatterChart(selectedStream.scatterChartData); // 假设scatterChartData是散点图所需的数据
  },
  drawScatterChart: function(data) {
    // 这里应该是一个绘制散点图的方法，具体实现依赖于所使用的图表库
  }
});

请注意，实际的散点图绘制需要依赖于小程序的图表库，如`wx-charts`等。这里没有展示散点图的绘制代码，因为它通常需要根据所选的库来具体实现。你需要查阅你所使用的图表库的文档来了解如何在canvas上绘制散点图。