My vue-echarts is not included in the dom. I am using the code from this link.
I am using the vue2 version with the latest version of 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>
I had an error earlier that said: SyntaxError Unexpected token 'export' but resolved it with the solution provided on the link :
https://github.com/ecomfe/vue-echarts/issues/536
What could be causing the chart to be not included in the DOM.
I found the issue, All I needed was to include the following module:
buildModules: ["@nuxtjs/composition-api/module"]
in my nuxt.config.js file.
My package.json file needed both of the following packages installed as well:
"devDependencies": {
"@nuxtjs/composition-api": "^0.29.2",
"@vue/composition-api": "^1.2.2"
}
A working version can be found at here.