vue v-for 循环出的标签 添加echarts 不显示

使用this.$nextTick方法 确保获取到dom 不使用可能标签dom没加载出来

this.$nextTick方法的讲解：5.7 Vue中this.$nextTick()方法的使用及代码示例-CSDN博客

我的代码

  <div class='chart'>
    <div class="card"
         v-for="(item, index) in dataList"
         :key="index">
      <div class="title">
        {{ item.name }}
      </div>
      <div class="content">
        <div class="content-item">
          <div class="item">
            <div class="count">
              {{ item.value1 }}
              <span>
                项
              </span>
            </div>
            <div class="unit">
              基表
            </div>
          </div>
          <div class="content-img">
            <div :class="'tableEcharts'+index"
                 style="width:100%; height:100%;"></div>
          </div>
        </div>
        <div class="content-item">
          <div class="item">
            <div class="count">
              {{ item.value2 }}
              <span>
                条
              </span>
            </div>
            <div class="unit">
              数据
            </div>
          </div>
          <div class="content-img">
            <div :class="'dataEcharts'+index"
                 style="width:100%; height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  data() {
    return {
      dataList: [],
    }
  },  
mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const url = '接口名'
      requestNetwork({}, url).then((res) => {
        if (res.Success) {
          this.dataList = res.Data
          console.log('JCSJFLTJ', this.dataList)
          this.dataList.forEach((item, index) => {
            item.value1 = item.value1
              .toString()
              .replace(/(?=\B(\d{3})+$)/g, ',')
            item.value2 = item.value2
              .toString()
              .replace(/(?=\B(\d{3})+$)/g, ',')
            this.tableEcharts(index, item.arr1)
          })
        }
      })
    },
    tableEcharts(index, arr) {
        // 关键点this.$nextTick 重新加载
      this.$nextTick(() => {
        var myChart = this.$echarts.init(
          document.querySelector('.tableEcharts' + index)
        )
        const bgColor = '#fff'
        const color = getColor() // 封装的颜色方法
        const hexToRgba = (hex, opacity) => {
          let rgbaColor = ''
          const reg = /^#[\da-f]{6}$/i
          if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
              '0x' + hex.slice(3, 5)
            )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
          }
          return rgbaColor
        }
        var option = {
          backgroundColor: bgColor,
          color: color,
          legend: {
            right: 10,
            top: 10,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              show: false,
            },
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '3%',
            bottom: '10%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color[0],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(color[0], 0.5),
                  shadowOffsetY: 8,
                },
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: hexToRgba(color[0], 0.3),
                      },
                      {
                        offset: 1,
                        color: hexToRgba(color[0], 0.1),
                      },
                    ],
                    false
                  ),
                  shadowColor: hexToRgba(color[0], 0.1),
                  shadowBlur: 10,
                },
              },
              data: arr,
            },
          ],
        }
        myChart.setOption(option)
      })
    },
}