凯发真人娱乐

nuxt3.0中使用echart可视化图表📊 -凯发真人娱乐

2023-10-20

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 --forcenpm 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.0setup语法糖的写法,如果没有用语法糖写法的小伙伴可以参考如下代码,其中唯一的区别就是在test.vue页面文件中的用法不同:



效果图:

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

网站地图