Can't resolve 'echarts/components' Vue

I have this error when i want to run the "yarn serve" code in my console of my vue project. Also have this other errors:

• Can't resolve 'echarts/core'.
• Can't resolve 'echarts/renderers'.
• Can't resolve 'echarts/charts'.
• Can't resolve 'echarts/components'.

this is my file.vue where i want to watch the created graphics with echart

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
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,
]);

export default {
  name: "HelloWorld",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  data() {
    return {
      option: {
        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>
.chart {
  height: 400px;
}
</style>

this is my main.js file in my project vue:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import "@babel/polyfill";
import moment from "moment";
import axios from "axios";
import JsonExcel from "vue-json-excel";
import excel from "vue-excel-export";
import ECharts from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
Vue.component("v-chart", ECharts);

Vue.use(excel);
Vue.prototype.$http = axios;
moment.locale("es");
Vue.prototype.moment = moment;
Vue.component("downloadExcel", JsonExcel);
Vue.config.productionTip = false;
Vue.prototype.now = moment().format("YYYY-MM-DD HH:mm:ss");
Vue.prototype.urlBase = "https://localhost:5001/api/";
Vue.prototype.traduccionTabla = {
  showFirstLastPage: true,
  firstIcon: "mdi-arrow-collapse-left",
  lastIcon: "mdi-arrow-collapse-right",
  prevIcon: "mdi-minus",
  nextIcon: "mdi-plus",
  "items-per-page-text": "Registros Por Pagina",
  pageText: "{0}-{1} de {2}",
  itemsPerPageOptions: [5, 10, 20, 50, 100, { text: "Todos", value: -1 }],
};

Vue.mixin({
  methods: {
    verificarSesion: function () {
      if (
        this.moment().format("YYYY-MM-DD HH:mm:ss") >
        this.moment(sessionStorage.getItem("FechaExpiracion")).format(
          "YYYY-MM-DD HH:mm:ss"
        )
      ) {
        sessionStorage.clear();
        sessionStorage.setItem("SesionAbierta", 1);
        this.$router.push({ name: "login" });
        location.reload();
        return true;
      }
    },
  },
});

new Vue({
  router,
  store,
  vuetify,
  moment,
  render: (h) => h(App),
}).$mount("#app");