vue根据表格层级实现Eachers图

html代码

  <div class="echarts-container" v-loading="isEchartsLoading">
    <el-table
      @expand-change="expandChange"
      class="table el-table--group"
      border
      :data="oneTableData"
      ref="multipleTableAll"
      height="350"
      row-key="tagName"
      :tree-props="{ children: 'itemList', hasChildren: 'hasChildren' }"
      >
      <el-table-column prop="tagName" label="标签" show-overflow-tooltip  min-width="120"></el-table-column>
      <template v-for="(item,index) in tabletitle" :key="item" >
        <el-table-column  :label="item.name" show-overflow-tooltip   min-width="130">
          <template #default="{row}">
            <span v-if="row.tagAttributeList[index]&&row.tagAttributeList[index].attributeValue==0">{{  row.tagAttributeList[index]? row.tagAttributeList[index].attributeValue: '-'}}</span>
            <span v-else>{{  row.tagAttributeList[index]? row.tagAttributeList[index].attributeValue: '-'}}</span>
            </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="chart">
      <pi-chart :options="optionA"  />
    </div>
  </div>
</div>

js代码

import {  defineComponent, getCurrentInstance,  onMounted,  onBeforeMount, reactive,toRefs,ref,watch, } from "vue";
  const props = defineProps(['searchConditions','dataSource'])
  const isEchartsLoading = ref(false);
  const $store = useStore() 
  const oneTableData = ref([]) 
  const tabletitle = ref([]);
  const optionA = ref({
    tooltip: {
      trigger: "axis",
      // trigger: 'item',
      position: function (point, params, dom, rect, size) {
         var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
                x = pointX + 10;
            } else { // 左边放的下
                x = pointX - boxWidth - 10;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
                y = 5;
            } else { // 上边放得下
                y = pointY - boxHeight;
            }
            return [x, y];
     },
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: "6%",
      right: "2%",
      bottom: "5",
      top:'40',
      containLabel: true,
    },
    legend: {
      top: '0%',
      left: 'center'
    },
    xAxis: [
      {
        type: "category",
        // barWidth: 30,
        axisTick: { show: false },
        axisLabel:{
         rotate: 16, //倾斜
          interval: 0, //强制显示全部x轴坐标
        },
        // data: ['巡航','cutin','变道','避障','路口','地图导航','车位搜索','APA泊入','APA泊出','APA避障','HMI'],
        data: ['巡航','cutin','变道','避障','路口','APA避障','特殊场景','泊车阶段'],
      },
    ],
    yAxis: {
      name: "个",
      type: "value",
      // max: 100,
    },
    series: [],
    color:['#069BE5','#4CAF50','#78909C','#FDD836','#E57373','#26C6DA','#9575CD','#FF9800'],
    });
    //请求接口
      async function labelStatistics() {
const { vehicleNumber, statisticsTime, createTime, statisticsTimeType } =
  props.searchConditions;
  const params = {
    businessGroup: vehicleNumber,
    createTime,
}
  isEchartsLoading.value = true
  const res = await getTagScene(params).finally(() => isEchartsLoading.value = false)
  if(res.code===0&&res.data.tagContentList) {
      tabletitle.value = res.data.tagHead.map((item)=>({name:item.name,code:item.code}))
      oneTableData.value = res.data.tagContentList
  }
  }
    const expandChange = (row,expanded)=>{
      if(expanded){
      // if(expandslist.value.id){
      //     proxy.$refs.multipleTableAll.toggleRowExpansion(expandslist.value.row, false);
      // }
      // expandslist.value.id = row.tagName
      // expandslist.value.row = row
      // 点的名字和接口中相同名字
      let  arr = oneTableData.value.filter(item=>item.tagName===row.tagName)
          drawlineTabs(arr[0].itemList,'sub')
      }else{
          // expandslist.value.id = ''
          // expandslist.value.row = {}
          drawlineTabs(oneTableData.value)
      }
  }
   const drawlineTabs=(arr,flag='')=>{
      optionA.value.series = []
      optionA.value.xAxis[0].data =[]
      arr.forEach((item,index)=>{
          optionA.value.xAxis[0].data.push(item.tagName)
          item.tagAttributeList.forEach((item1,index1)=>{
              if (index == 0) {
                  optionA.value.series.push({
                      name: item1.attributeName,
                      type: "bar",
                      data: [],
                      barWidth: 30,
                  })
              }
              optionA.value.series[index1].data.push(item1.attributeValue)
          })
      })
        optionA.value= {...optionA.value}        
  }