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页面文件

至此，我们在nuxt3.0项目中使用echart图表的需求就实现啦~

tips：我使用的是vue3.0的 setup语法糖的写法，如果没有用语法糖写法的小伙伴可以参考如下代码，其中唯一的区别就是在test.vue页面文件中的用法不同：

效果图：

nuxt3.0中使用echart可视化图表📊的相关教程结束。