Renderer 'undefined' is not imported. Please import it first.

[MuNineyi]

请确认

• [X] 我可以确认这个问题无法在 ECharts 项目本身中复现。

您是如何将 Vue-ECharts 引入项目的？

通过 ES 模块 import

版本信息

`-- vue-echarts@6.6.9 -> .\node_modules\.store\vue-echarts@6.6.9\node_modules\vue-echarts
  +-- echarts@5.5.0 -> .\node_modules\.store\echarts@5.5.0\node_modules\echarts
  +-- vue-demi@0.13.11 -> .\node_modules\.store\vue-demi@0.13.11\node_modules\vue-demi
  | `-- vue@3.3.9 -> .\node_modules\.store\vue@3.3.9\node_modules\vue
  `-- vue@3.3.9 -> .\node_modules\.store\vue@3.3.9\node_modules\vue
    `-- @vue/server-renderer@3.3.9 -> .\node_modules\.store\@vue+server-renderer@3.3.9\node_modules\@vue\server-renderer
      `-- vue@3.3.9 -> .\node_modules\.store\vue@3.3.9\node_modules\vue

问题详情

在若依项目(版本为 ruoyi-vue3)中尝试使用 该组件

<template>
  <div class="app-container home">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script setup name="Index">
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

provide(THEME_KEY, 'dark');

const option = ref({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

</script>

<style scoped lang="scss">
.chart {
  height: 100%;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

按照 Demo 引入依赖及相关代码, 提示如下错误

vue-router.js?v=dce2c992:2504 Error: Renderer 'undefined' is not imported. Please import it first.
    at new ZRender2 (vue-echarts.js?t=1712916365115&v=34b693ba:6414:15)
    at init (vue-echarts.js?t=1712916365115&v=34b693ba:6588:12)
    at new ECharts2 (vue-echarts.js?t=1712916365115&v=34b693ba:20619:28)
    at init2 (vue-echarts.js?t=1712916365115&v=34b693ba:22098:15)
    at W (vue-echarts.js?t=1712916365115&v=34b693ba:26421:26)
    at vue-echarts.js?t=1712916365115&v=34b693ba:26494:5
    at chunk-WDHLSXU5.js?v=7af21e3d:4138:88
    at callWithErrorHandling (chunk-WDHLSXU5.js?v=7af21e3d:1552:18)
    at callWithAsyncErrorHandling (chunk-WDHLSXU5.js?v=7af21e3d:1560:17)
    at hook.__weh.hook.__weh (chunk-WDHLSXU5.js?v=7af21e3d:4118:19)
triggerError @ vue-router.js?v=dce2c992:2504
(anonymous) @ vue-router.js?v=dce2c992:2529
Show 2 more frames

使用普通的 echarts.init 方式初始化可正常使用

问题复现

https://github.com/MuNineyi/ruoyi-vue3-echarts

[Justineo]

请提供一个最小的复现，不要发完整的项目。

[Justineo]

先关闭了，可以在准备好最小化复现后重新发 issue。

[Darkmift]

I am facing same issue (could not trnaslate your conversation)

[javanoclaw]

Error: Renderer 'undefined' is not imported. Please import it first. https://github.com/apache/echarts/issues/14138 @Justineo

[javanoclaw]

全局引入解决：

import * as echarts from "echarts";
import VChart from "vue-echarts";

或按需引入解决： import { use } from "echarts/core"; import { CanvasRenderer } from "echarts/renderers"; import { PieChart } from "echarts/charts"; import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components"; import VChart, { THEME_KEY } from "vue-echarts"; import { ref, provide } from "vue";

use([ CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent ]);

[wuhan169]

6.7.3全局引入没问题，按需引入就报这个错了。6.7.2正常

[Justineo]

6.7.3全局引入没问题，按需引入就报这个错了。6.7.2正常

有复现代码吗？

[wuhan169]

删掉node_nodules，重新install之后好了。。 谢谢回复