echarts

echarts

// chart.client.ts

import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

// import 'echarts' // all library

// import 'echarts/lib/chart/bar'
// import 'echarts/lib/chart/line'
// import 'echarts/lib/chart/pie'

// import 'echarts/lib/component/title'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/legend'

// import ECharts modules manually to reduce bundle size
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { TitleComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'

use([CanvasRenderer, BarChart, LineChart, PieChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent])

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('ECharts', ECharts)
})

// chart.vue

<script lang="ts" setup>
const chartBar = ref({
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92],
    },
  ],
  title: {
    text: 'Quarterly Sales Results',
    x: 'center',
    textStyle: {
      fontSize: 24,
    },
  },
  color: ['#16b3ac'],
})

const chartLine = ref({
  xAxis: {
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'line',
      data: [55, 72, 84, 48, 59, 62, 87, 75, 94, 101, 127, 118],
    },
  ],
  title: {
    text: 'Monthly Stock Prices',
    x: 'center',
    textStyle: {
      fontSize: 24,
    },
  },
  color: ['#16b3ac'],
})

const chartPie = 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>

<template>
  <div class="p-8">
    <div class="w-full h-[500px] bg-red-50">
      <ClientOnly>
        <e-charts :options="chartBar" autoresize />
      </ClientOnly>
    </div>

    <div class="w-full h-[500px] bg-green-50">
      <ClientOnly>
        <e-charts :options="chartLine" autoresize />
      </ClientOnly>
    </div>

    <div class="w-full h-[500px] bg-blue-50">
      <ClientOnly>
        <e-charts :options="chartPie" autoresize />
      </ClientOnly>
    </div>
  </div>
</template>