??在Nuxt3.0項目中用到了可視化圖表??，于是我用了EChart可視化圖表庫。但是在官網(wǎng)我沒有找到針對在Nuxt3.0中使用EChart的方法，于是在這里記錄我的引入EChart并簡單使用的步驟。需要聲明的是，本文只針對在Nuxt3.0項目中使用EChart.js庫的可視化圖表進(jìn)行講解，不針對EChart圖表的詳細(xì)配置進(jìn)行講解，如需了解EChart的可視化圖表詳細(xì)配置參數(shù)，請查看官網(wǎng)手冊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';

// 手動導(dǎo)入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: {  //主標(biāo)題樣式
            color: '#DC143C'
        },
        subtextStyle: {   //副標(biāo)題樣式
            color: '#008000'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'horizontal',  //圖例方向
        bottom: 'bottom',  //圖例距離底部位置
        textStyle: { color: "#FFFDFE" }, //圖例字體顏色
    },
    series: [
        {
            name: '技術(shù)量',
            type: 'pie',
            radius: '50%',
            label: {
                color: '#FFA500'
            },
            data: [
                { value: 1048, name: '前端技術(shù)' },
                { value: 735, name: '后端技術(shù)' },
                { value: 580, name: '服務(wù)器技術(shù)' },
                { value: 484, name: '運(yùn)維技術(shù)' },
                { value: 300, name: '測試技術(shù)' }
            ]
        }
    ]

});


</script>

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

??????至此，我們在Nuxt3.0項目中使用EChart圖表的需求就實現(xiàn)啦~??????

??????tips：我使用的是Vue3.0的 setup語法糖的寫法，如果沒有用語法糖寫法的小伙伴可以參考如下代碼，其中唯一的區(qū)別就是在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: {
          //主標(biāo)題樣式
          color: '#DC143C',
        },
        subtextStyle: {
          //副標(biāo)題樣式
          color: '#008000',
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'horizontal', //圖例方向
        bottom: 'bottom', //圖例距離底部位置
        textStyle: { color: '#FFFDFE' }, //圖例字體顏色
      },
      series: [
        {
          name: '技術(shù)量',
          type: 'pie',
          radius: '50%',
          label: {
            color: '#FFA500',
          },
          data: [
            { value: 1048, name: '前端技術(shù)' },
            { value: 735, name: '后端技術(shù)' },
            { value: 580, name: '服務(wù)器技術(shù)' },
            { value: 484, name: '運(yùn)維技術(shù)' },
            { value: 300, name: '測試技術(shù)' },
          ],
        },
      ],
    });

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

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

效果圖：

文章來源地址http://www.zghlxwxcb.cn/news/detail-438146.html

到了這里，關(guān)于Nuxt3.0中使用EChart可視化圖表?的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！