如何使用Vue集成并应用echarts图表？

本文共计679个文字，预计阅读时间需要3分钟。

目录 + 1. 引入echarts + 2. 将echarts设置为全局 + 3. 在相关组件中使用 + 在Vue中引入echarts及使用 + 今天来告诉您如何将echarts引入Vue并巧妙利用锤子函数对表格数据进行渲染。 + 1. 引入echarts + 使用npm引入echarts。

目录

• 1. 引入echarts
• 2. 将echarts设置为全局
• 3. 在相关组件中使用

在Vue中引入echarts以及使用

今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染。

1. 引入echarts

npm install echarts --save

在vue项目中安装

2. 将echarts设置为全局

main.js（项目入口文件）

//引入echarts文件 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts

这样我们就可以使用this.$echarts来使用echarts了

3. 在相关组件中使用

要注意的是在表格显示的区域一定要定义宽度和高度，这样才可以正常显示。