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>

效果图：