Nuxt3.0中使用EChart視覺化圖表?

?在Nuxt3.0專案中用到了視覺化圖表?，於是我用了EChart視覺化圖表庫。但是在官網我沒有找到針對在Nuxt3.0中使用EChart的方法，於是在這裡記錄我的引入EChart並簡單使用的步驟。需要宣告的是，本文只針對在Nuxt3.0專案中使用EChart.js庫的視覺化圖表進行講解，不針對EChart圖表的詳細配置進行講解，如需瞭解EChart的視覺化圖表詳細配置引數，請檢視官網手冊Documentation - Apache ECharts

?第一步：下載安裝vue-echarts和echarts

?安裝vue-echarts包：npm i vue-echarts

?安裝echarts包：npm i echarts

?tips：如果下載安裝報錯，可替換嘗試使用：npm i vue-echarts --force和npm i echarts --force

?第二步：配置專案nuxt-config.ts檔案

nuxt-config.ts檔案

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    build: {
        transpile: [/echarts/],
    }
})

?第三步：新建plugins目錄，並在目錄下新建chart.js檔案

chart.js檔案：

import { use } from 'echarts/core';

// 手動匯入ECharts模組以減小包的大小
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';

export default defineNuxtPlugin(() => {
    use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
});

?第四步：在Test.vue頁面中使用

Test.vue頁面檔案

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

<script setup lang="ts">
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import { PieChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, defineComponent } from 'vue';

use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    LabelLayout
]);

const option = ref({
    title: {
        text: '測試圖表',
        subtext: 'nuxt3.0中的EChart初探',
        left: 'center',
        textStyle: {  //主標題樣式
            color: '#DC143C'
        },
        subtextStyle: {   //副標題樣式
            color: '#008000'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'horizontal',  //圖例方向
        bottom: 'bottom',  //圖例距離底部位置
        textStyle: { color: "#FFFDFE" }, //圖例字型顏色
    },
    series: [
        {
            name: '技術量',
            type: 'pie',
            radius: '50%',
            label: {
                color: '#FFA500'
            },
            data: [
                { value: 1048, name: '前端技術' },
                { value: 735, name: '後端技術' },
                { value: 580, name: '伺服器技術' },
                { value: 484, name: '運維技術' },
                { value: 300, name: '測試技術' }
            ]
        }
    ]

});


</script>

<style scoped>
.chart {
    height: 800px;
}
</style>

???至此，我們在Nuxt3.0專案中使用EChart圖表的需求就實現啦~???

???tips：我使用的是Vue3.0的 setup語法糖的寫法，如果沒有用語法糖寫法的小夥伴可以參考如下程式碼，其中唯一的區別就是在Test.vue頁面檔案中的用法不同：

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

<script>  //注意這裡沒有使用setup語法糖
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';
import { ref, defineComponent } from 'vue';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: 'HelloWorld',
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: 'dark',
  },
  setup() {
    const option = ref({
      title: {
        text: '測試圖表',
        subtext: 'nuxt3.0中的EChart初探',
        left: 'center',
        textStyle: {
          //主標題樣式
          color: '#DC143C',
        },
        subtextStyle: {
          //副標題樣式
          color: '#008000',
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'horizontal', //圖例方向
        bottom: 'bottom', //圖例距離底部位置
        textStyle: { color: '#FFFDFE' }, //圖例字型顏色
      },
      series: [
        {
          name: '技術量',
          type: 'pie',
          radius: '50%',
          label: {
            color: '#FFA500',
          },
          data: [
            { value: 1048, name: '前端技術' },
            { value: 735, name: '後端技術' },
            { value: 580, name: '伺服器技術' },
            { value: 484, name: '運維技術' },
            { value: 300, name: '測試技術' },
          ],
        },
      ],
    });

    return { option };
  },
});
</script>

<style scoped>
.chart {
  height: 800px;
}
</style>

效果圖：