在table中同时渲染多个echarts

一：使用:ref 把列表里面的数据传递进divs中,自定义了一个字段为dataChart用来接收数据

 <el-table-column label="价格折扣率" width="220">
      <template #header>
        <el-space wrap>
          <p class="align-bottom pt-3 fs-5">销量趋势</p>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="热门商品信息名称"
            placement="top-start"
          >
            <el-icon class="align-middle pb-1" style="font-size: 15px"
              ><question-filled
            /></el-icon>
          </el-tooltip>
        </el-space>
      </template>
      <template #default="scope">
        <div
          :dataChart="scope.row"
          :ref="
            (el) => {
              if (el) divs[scope.$index] = el;
            }
          "
          style="width: 220; height: 200px"
        ></div>
      </template>

二:在setup中

const divs = ref([]);
    watchPostEffect(() => {
      console.log("测试数据", divs, divs._value);
      divs._value.forEach((item, index) => {
        console.log("itemmmmmmmmmm", item);
        var myChart = echarts.init(item);
        var option;
        option = {
          xAxis: {
            type: "category",
            data: [ "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [135, 147, 260],
              type: "line",
            },
          ],
        };
         option && myChart.setOption(option);
      });
     
    });

ps:我们传入的数据在item下的v-node中可以找到并使用

标签：el,option,渲染,type,value,item,table,divs,echarts
来源： https://blog.csdn.net/weixin_45629552/article/details/122329620