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  :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  :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>

效果圖：

標籤：其他

上一篇：記錄--ThreeJs手搓一個羅盤特效

下一篇：返回列表