| Nuxt3.0中使用EChart可视化图表📊 | 您所在的位置：网站首页 › echart设置legend位置 › Nuxt3.0中使用EChart可视化图表📊 |
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页面文件 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: '测试技术' } ] } ] }); .chart { height: 800px; }🎉🎉🎉至此，我们在Nuxt3.0项目中使用EChart图表的需求就实现啦~🎉🎉🎉 💡💡💡tips：我使用的是Vue3.0的 setup语法糖的写法，如果没有用语法糖写法的小伙伴可以参考如下代码，其中唯一的区别就是在Test.vue页面文件中的用法不同： //注意这里没有使用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 }; }, }); .chart { height: 800px; } 效果图：
|
【本文地址】
公司简介
联系我们