Mis vue-echarts no están incluidos en el dom. Estoy usando el código de este enlace.
Estoy usando la versión vue2 con la última versión de nuxt.
<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>Tuve un error anterior que decía: SyntaxError Unexpected token 'export' pero lo resolví con la solución provista en el enlace:
https://github.com/ecomfe/vue-echarts/issues/536
Qué podría estar causando que el gráfico no se incluya en el DOM.
Encontré el problema, todo lo que necesitaba era incluir el siguiente módulo :
buildModules: ["@nuxtjs/composition-api/module"] en mi archivo nuxt.config.js .
Mi archivo package.json también necesitaba que se instalaran los dos paquetes siguientes:
"devDependencies": { "@nuxtjs/composition-api": "^0.29.2", "@vue/composition-api": "^1.2.2" }Una versión de trabajo se puede encontrar aquí .