<el-table :data="tableData" style="width: 500px; margin-top: 15px;" :header-row-class-name="setRowClassName" @row-click="handleRowClick"> <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'> </el-table-column> <el-table-column prop="target" label="目标值" width="70"> </el-table-column> <el-table-column prop="finish" label="完成值" width="70"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="80"> </el-table-column> </el-table>，已有一个div容器负责显示echarts,怎么点击table不同行时，显示div容器并更新里面的数据为改行内容，给我完整的代码

以下是完整代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 500px; margin-top: 15px;"
              :header-row-class-name="setRowClassName" @row-click="handleRowClick">
      <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="target" label="目标值" width="70">
      </el-table-column>
      <el-table-column prop="finish" label="完成值" width="70">
      </el-table-column>
      <el-table-column prop="finishRate" label="完成率%" width="80">
      </el-table-column>
    </el-table>
    <div ref="echartsContainer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRow: null, // 当前选中的行数据
    }
  },
  methods: {
    handleRowClick(row) {
      this.selectedRow = row
    },
    // 更新 echarts 数据
    updateEchartsData(row) {
      // 根据选中的行数据更新 echarts 数据
      // 示例代码
      const echartsInstance = echarts.init(this.$refs.echartsContainer)
      echartsInstance.setOption({
        xAxis: {
          data: ['目标值', '完成值']
        },
        yAxis: {},
        series: [{
          name: '目标值',
          type: 'bar',
          data: [row.target, 0],
        }, {
          name: '完成值',
          type: 'bar',
          data: [row.finish, 0],
        }]
      })
    },
    // 设置表格行样式
    setRowClassName(row, index) {
      return index === 0 ? 'header-row' : ''
    },
  },
  watch: {
    selectedRow() {
      // 监听 selectedRow 变化，更新 echarts 数据
      this.updateEchartsData(this.selectedRow)
    },
  },
  mounted() {
    // 初始化 echarts
    const echartsInstance = echarts.init(this.$refs.echartsContainer)
    echartsInstance.setOption({
      xAxis: {
        data: ['目标值', '完成值']
      },
      yAxis: {},
      series: [{
        name: '目标值',
        type: 'bar',
        data: [0, 0],
      }, {
        name: '完成值',
        type: 'bar',
        data: [0, 0],
      }]
    })
  },
}
</script>

<style>
.header-row {
  font-weight: bold;
}
</style>

在这段代码中，我们在 `<div>` 中添加了一个 ref 为 `echartsContainer` 的 div 容器，用于显示 echarts。在 `handleRowClick` 方法中更新 `selectedRow` 变量的值，并在 `watch` 中监听其变化，更新 echarts 数据。在 `mounted` 钩子函数中初始化 echarts 数据。同时，我们还添加了一个 `setRowClassName` 方法，用于设置表格行样式。