echarts 图表不显示的问题

是这样的,点击详情,再点击统计,切换的时候就不会显示echarts图表,刚开始使用的是next Tick,没有使用定时器,后来加上了定时器就实现了如下所示:

代码是如下

javascript 复制代码
const chartContainer = ref(null); // 用于引用 DOM 容器
let chartInstance: echarts.ECharts | null = null; // 用于存储 ECharts 实例
// 渲染图表
const renderChart = () => {
  const option = {
    title: {
      text: `调用量统计`,
      left: 10
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false
        },
        saveAsImage: {
          pixelRatio: 2
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      show: true
    },
    dataset: {
      source: [
        ['time', dataCount.value.categories],
        ['completion_token', dataCount.value.comptoken],
        ['prompt_token', dataCount.value.prompttoken],
        ['total_token', dataCount.value.totaltoken]
      ]
    },
    grid: {
      bottom: 90
    },
    dataZoom: [
      {
        type: 'inside'
      },
      {
        type: 'slider'
      }
    ],
    xAxis: {
      data: dataCount.value.categories,
      silent: false,
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    },
    yAxis: [
      { scale: true }
    ],
    series: [
      { type: 'bar', seriesLayoutBy: 'row', name: 'Completion Token', data: dataCount.value.comptoken },
      { type: 'bar', seriesLayoutBy: 'row', name: 'Prompt Token', data: dataCount.value.prompttoken },
      { type: 'bar', seriesLayoutBy: 'row', name: 'Total Token', data: dataCount.value.totaltoken }
    ]
  };
  chartInstance?.setOption(option);
};
// 初始化图表
const initChart = () => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    renderChart();
  }
};
const handleTabChange1 = async (names: string) => {
  if (names === 'oasis') {
    if (chartInstance) {
      chartInstance.dispose(); // 销毁旧的图表实例
    }
      initChart();
  }
};
// 生命周期钩子
onMounted(() => {
    initChart();
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose(); // 销毁 ECharts 实例
    chartInstance = null;
  }
});
  <NTabs default-value="oasis" justify-content="space-evenly" type="line" 		        @update:value="handleTabChange1">
       <NTabPane name="oasis" tab="调用量统计">
        <div ref="chartContainer" class="h-500px w-100%"></div>
       </NTabPane>
       <NTabPane name="the beatles" tab="调用量详情">
         <NDataTable :columns="columns" :data="dataTable" :bordered="false" />
      </NTabPane>
   </NTabs>

刚开始我是这样写的,然后在点击tab切换的时候,echarts图表咋的都出不来,后来看了好多方法,使用nextTick 和定时器 实现了

再点击切换的时候,使用nextTick

javascript 复制代码
const handleTabChange1 = async (names: string) => {
  if (names === 'oasis') {
    if (chartInstance) {
      chartInstance.dispose(); // 销毁旧的图表实例
    }
    await nextTick(() => {
      initChart();
    });
    setTimeout(() => {
      initChart();
    }, 500);
  }
};

希望可以帮到你们!!

相关推荐
你挚爱的强哥29 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js