hjs801012 commented on issue #10478:
URL: https://github.com/apache/echarts/issues/10478#issuecomment-2008365597
We are developing using vue3 + nuxt3 and found a new way to apply echart.
For reference, ssr is set to false. (nuxt.config.ts)
The method I used was defineAsyncComponent and set it in the parent
component that uses echart.
[EChartComponent.vue]
```
<template>
<div class="h-full w-full">
<VChart class="h-full w-full" :option="pieOption" />
</div>
</template>
<script setup>
import { PieChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent, }
from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ref } from 'vue'
import VChart from 'vue-echarts'
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
])
const pieOption = ref({
title: {
text: 'Title Text',
left: 'center',
top: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'horizontal',
left: 'center',
top: '90%',
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
},
height: '100%',
width: '100%',
textStyle: {
fontFamily: 'NanumSquareNeo'
},
series: [
{
name: 'Count',
type: 'pie',
radius: ['30%', '60%'],
center: ['50%', '50%'],
padAngle: 3,
itemStyle: {
borderRadius: 10
},
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: 15,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
});
</script>
<style scoped>
</style>
```
[Parent component using EChartComponent]
```
<script setup>
import {Icon} from "#components";
import { defineAsyncComponent} from "vue";
// import EChartComponent from '~/components/EChartComponent.vue';
const echart = defineAsyncComponent(() =>
import('~/components/EChartComponent.vue')
)
</script>
<template>
<div class="h-full flex flex-col ">
<main class="h-full grow p-2 flex flex-col">
<div class="flex flex-col lg:flex-row gap-2 h-full">
<div class="lg:basis-1/2 h-full">
<echart />
</div>
<div class="lg:basis-1/2 h-full">
<echart />
</div>
</div>
</main>
</div>
</template>
<style scoped lang="scss">
</style>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
